Image to Base64 and Base64 to Image (Data URI)

How to convert an image to Base64

1. Drop an image on the box, pick it with the file button, or paste a screenshot.
2. Choose an output: a data URI, raw Base64, an HTML <img> tag or a CSS background-image rule.
3. Check the sizes. The tool shows the file size, the Base64 length and the overhead.
4. Copy the result into your HTML, CSS, JSON or email template.

How to convert Base64 back to an image

1. Switch to Base64 → Image.
2. Paste a data URI or plain Base64. Line breaks and missing padding are fine.
3. The tool detects the format from the data URI or from the first bytes of the file, shows a preview and its dimensions.
4. Press Download to save it with the right file extension.

What a data URI looks like

A data URL puts a file's contents directly inside a URL. MDN documents the syntax as data:[<media-type>][;base64],<data>. For images the media type is the image MIME type and the data is Base64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGPgjrv+HwAD+AJAO0OdtAAAAABJRU5ErkJggg==" width="1" height="1" alt="">

.icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."); }

Examples

The first characters are a quick way to tell an image's format from its Base64 text, because they encode the file's fixed signature bytes.

Tips for clean output

• Optimize first. Compress or resize the image before encoding; Base64 adds about a third to whatever size you start with.
• Keep width and height. The HTML snippet includes the image's dimensions so the page does not shift while it loads.
• Write a real alt text when the image carries meaning; the empty alt="" in the snippet is only right for decorative images.
• Prefer SVG files for icons when you can; they are often smaller than a PNG of the same icon before any encoding.

When inlining makes sense

• Tiny icons and placeholders used on one page, where a separate request would cost more than the extra bytes.
• HTML emails and single-file documents that must work without external files.
• Test fixtures and JSON APIs that need to carry an image as text.

When it does not

• Photos and large graphics. Base64 makes them about a third larger, and the bytes arrive inside the HTML or CSS, which delays rendering of everything else.
• Images reused across pages. A normal image file is cached once; an inline copy is downloaded again with every page or stylesheet that contains it.
• Images you edit often. Every change to an inline image changes the HTML or CSS file too, so the whole file has to be downloaded again.

The article why Base64 makes data about 33% larger works through the arithmetic, and Base64 vs hex encoding compares the two text encodings. For Base64 of plain text rather than files, use the universal encoder decoder.

Your image is read with the browser's FileReader API and stays on your device.