Base64 images and data URIs: what they are and when to use them

A Base64 image is an image file's bytes rewritten as plain text, using 64 characters that are safe almost anywhere text goes. Put a short header in front — data:image/png;base64, — and it becomes a data URI, which a browser accepts anywhere it would accept an image URL.

What it looks like

This is a complete, valid 1 × 1 pixel PNG as a data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

The header states the type (image/png) and the encoding (base64); everything after the comma is the file. Base64 of a PNG always starts iVBORw0KGgo, and of a JPEG /9j/, because those are the files' fixed opening bytes, encoded. The same string can be used in:

• HTML: <img src="data:image/png;base64,iVBOR…" alt="…">
• CSS: background-image: url("data:image/png;base64,iVBOR…");
• JSON or an API payload: { "avatar": "data:image/jpeg;base64,/9j/4AAQ…" }
• Markdown, where the renderer allows data URIs: ![alt](data:image/png;base64,iVBOR…)

Why Base64 is bigger

Base64 writes every 3 bytes as 4 characters, so the text is about 33% larger than the file — a 30 KB PNG becomes roughly 40 KB of text. Server compression claws a little of that back, but not all of it. And because a data URI lives inside another file, the browser can't cache it separately: it is downloaded again with every page or stylesheet that contains it.

When a data URI makes sense

• Tiny icons and shapes — a few hundred bytes to a couple of kilobytes — where a separate request costs more than the extra size. With modern HTTP/2 connections this benefit is smaller than it used to be.
• Self-contained files: a single-file HTML report, an exported document, a test fixture, or data that must travel inside JSON.
• Small SVG icons in CSS. For SVG, URL-encoding the text instead of Base64-encoding it is often smaller still.

When a normal image file is better

• Photos and anything over a few kilobytes. The size penalty and the lost caching add up quickly.
• Images used on several pages. A file is cached once; a data URI is re-downloaded inside every page.
• Images in stylesheets that block rendering. Large data URIs in CSS delay the whole page's first paint.
• Email. Gmail — on the web and in its apps — doesn't display data-URI images at all, and neither do older versions of Outlook for Windows. Attach the image and reference it instead, or link to a hosted file.
• Images you want found in image search. Search engines index images by their URL; an image embedded as text has none.

Converting in ImageDoctor

• Image to Base64 encodes the original file bytes unchanged and gives you the data URI, the bare Base64, and ready-made HTML, CSS, Markdown and JSX snippets, with the size overhead shown. Compress or resize the image first to keep the string short.
• Base64 to Image decodes a data URI or bare Base64 — including URL-safe Base64 and strings with missing padding — detects the image type, and lets you download the original or convert it.