About Image to Base64
Base64 encodes binary data using only printable ASCII characters, which lets an image travel through channels that expect text — a CSS file, an HTML attribute, a JSON payload or an email body. Wrapped in a data URI, the encoded image becomes a self-contained string that a browser can render with no separate file and no network request.
The usual reason to do this is to eliminate an HTTP request for a very small asset: an icon, a texture, a one-pixel gradient. Inlining it means the image arrives with the stylesheet or document rather than needing its own round trip.
Base64 costs about 33% in size, because three bytes of binary become four characters of text. That overhead is trivial for a 2 KB icon and ruinous for a 2 MB photograph, which is why this technique is worth using only on genuinely small files.
How to convert an image to Base64
Add an image
Drag and drop a file or tap Select Images. Files up to 10 MB are accepted, though small images are the sensible use case.
Choose an output format
Switch between a raw Base64 string, a data URI, an HTML img tag or a CSS background-image rule.
Copy or download
Copy the string to your clipboard with one press, or download it as a text file if it is long.
When inlining is worth it
- Small icons and logos under roughly 5 KB used in a stylesheet.
- Images embedded in HTML email, where external images are often blocked by default.
- Single-file HTML documents, reports and exports that must work with no accompanying assets.
- Placeholder images inlined into JSON or a configuration file.
When to avoid it
Inlined images cannot be cached separately. A normal image file is downloaded once and reused across every page; a Base64 image is re-downloaded with every document that contains it, and it inflates the HTML or CSS that carries it.
Large inline images also block rendering: the browser must parse the entire string before it can paint the stylesheet or document. As a rule of thumb, do not inline anything above about 10 KB.