How to convert an image to Base64
- Drop an image on the box (PNG, JPG, GIF, WebP, SVG or ICO).
- Choose the output format: a full data URI, the raw Base64 string, or ready-made HTML, CSS, Markdown or JSON.
- Copy the result or download it as a text file.
To go the other way, paste a data URI or Base64 string into Base64 to image to preview and download the picture.
What is a Base64 data URI?
Base64 turns binary data, like an image, into plain text using 64 safe characters (A–Z, a–z, 0–9, + and /). A data URI wraps that text with the file type — data:image/png;base64,iVBORw0… — so browsers can display the image straight from your HTML or CSS without a separate file.
When to embed images as Base64
- Small icons and logos (under a few KB) in CSS or HTML, saving an extra network request.
- Single-file HTML pages, reports and email templates that must work without external files.
- JSON APIs and configuration files that need to carry an image as text.
When not to
Base64 makes files about 33% larger, can’t be cached separately by the browser, and blocks rendering while large strings load. For photos and anything over ~10 KB, a normal image file (served with caching) is faster. Also note that many email apps, including Gmail, block or strip Base64 images in emails — use hosted images there. Compress first with the image compressor to keep strings short.
For encoding text rather than images, use Base64 encode/decode.
Frequently asked questions
Why is the Base64 string bigger than my image?
Base64 uses 4 text characters for every 3 bytes, so it is about 33% larger.
How do I use a Base64 image in CSS?
Choose “CSS background-image” and paste the result into your stylesheet.
Can I convert Base64 back to an image?
Yes. Paste it into the “Base64 to image” box and download the image.
Is my image uploaded?
No. Conversion happens entirely in your browser.