How to convert an image to Base64
- Drop a single image onto the box above, or press Browse files to choose one.
- Pick the output style. A plain data URI, a CSS background rule, or an HTML img tag.
- Check the encoded size shown, since Base64 is roughly a third larger than the file.
- Press Copy to clipboard, or download the string as a .txt file.
- Paste it into your stylesheet, template or JSON payload.
What this encoder produces
- A complete data URI including the correct MIME type prefix, ready to paste.
- Optional CSS and HTML wrappers so you do not have to write the boilerplate.
- A live readout of the encoded length, which is the number that actually matters.
- Support for PNG, JPG, WEBP, GIF and SVG sources.
- One-click copying, plus a .txt download for very long strings.
- No upload at any point, so unreleased assets stay private.
What a data URI is and when to use one
A data URI embeds a file directly inside the text that references it. Instead of src="logo.png" pointing at a separate file the browser must fetch, the entire image travels inline as a long Base64 string. The browser decodes it and renders the picture without making a second request.
The appeal is obvious: one fewer round trip to the server. For a small icon on a page that already loads quickly, removing a request can genuinely help, and it guarantees the image arrives at the same moment as the markup that needs it, no flash of missing graphic while a separate file loads.
Where inlining works well
- Small interface icons in a stylesheet, where a separate request would cost more than the bytes.
- HTML email, where many clients block linked images by default but render inline ones.
- Single-file deliverables. A report or prototype that must work as one self-contained HTML file.
- JSON payloads and APIs that need to carry an image without a separate upload endpoint.
- Placeholder thumbnails inlined while the full-resolution image loads behind them.
The size penalty is real
Base64 represents three bytes of binary data using four text characters, so the encoded string is about 33 per cent larger than the file it came from. A 30 KB icon becomes roughly 40 KB of text. For an icon that is a fair trade against a network request. For a 2 MB photograph it is a poor one. You have added 700 KB and lost the ability to cache the image separately.
That last point matters more than the size. A linked image is cached once and reused across every page. An inlined image is part of the document, so it is re-downloaded with every page that contains it and can never be cached independently. The usual guidance is to inline below about 5 KB, consider it up to 10 KB, and link anything larger.
Choosing the output style
The data URI option gives you the bare string, which is what you want for JSON, a JavaScript variable, or an attribute you are assembling yourself. CSS wraps it in a background-image declaration ready to drop into a rule. HTML produces a complete img tag with an empty alt attribute for you to fill in, do fill it in, because an inlined image is no more accessible than a linked one.
SVG is worth a special mention. Because it is already text, an SVG can be inlined directly into your markup without Base64 at all, which is both smaller and stylable with CSS. Use the SVG converter if you need a raster version instead.
Going the other way, and privacy
To turn a string back into a file, the Base64 to image decoder reverses this process and shows you a preview before downloading. Both tools run entirely in your browser: the file is read with the File API and encoded in local memory, so unreleased logos and client assets never reach a server. If you want to shrink the image before encoding, usually a good idea, the image compressor and image resizer work the same way.