Image to Base64 / Data URL

What this converter does

The tool works in both directions. Image → Data URL reads a file and gives you a data:image/png;base64,... string with one-click copies for the full data URL, the bare Base64 payload, a ready img tag and a CSS background-image declaration. Data URL → Image takes a pasted data URL (or a bare Base64 string), shows the decoded picture with its MIME type and byte size, and lets you download it as a real file. Everything happens in your browser.

How to use it

1. Pick a direction with the toggle at the top.
2. Encode: drop an image on the dashed area or click to choose one. The preview, the original size and the encoded size appear immediately. Use the copy buttons for the format you need.
3. Decode: paste a data URL or Base64 text into the box. The image renders as soon as the input is valid; click Download image to save it with the right extension, or Copy data URL to get a normalized string.

What the output looks like

For a 1 KB PNG icon you get something like this (payload shortened):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9h...

The copy buttons wrap the same string for the two common destinations:

<img src="data:image/png;base64,iVBORw0K…" alt="" />

.icon {
  background-image: url("data:image/png;base64,iVBORw0K…");
}

Base64 characters are URL-safe inside url("..."), so no escaping is needed. For SVG you can also use a UTF-8 data URL (data:image/svg+xml;utf8,...), which is often shorter than Base64 but needs # encoded as %23 and quotes balanced.

When data URLs help and when they hurt

Situation	Inline as data URL?	Why
16×16 icon, under 1 KB	yes	saves a request; cost in bytes is trivial
Small SVG used once in CSS	yes	avoids a round trip on first paint
Image repeated on many pages	no	an external file is cached once; inline bytes are re-downloaded with every HTML/CSS
Photo over 10 KB	no	33% size tax, blocks CSS parsing, cannot be lazy-loaded
Email templates	sometimes	many clients block remote images but also strip data URLs — test first
Canvas or FileReader round trips in JS	yes	this is what the API returns natively

Two more gotchas:

• Base64 is not compression or encryption. The string is 33% larger than the file and anyone can decode it. Gzip/Brotli on the server claws some of the overhead back, but not all of it.
• Giant data URLs slow the browser. A 500 KB string inside a stylesheet is parsed every time the CSS is parsed and shows up in DevTools as an enormous single line. Keep inlining for assets under about 2 KB; everything larger should be a file — run it through the image compressor first.

How decoding detects the type

A bare Base64 string has no MIME type, so the decoder looks at the first characters, which are the file’s magic bytes in Base64 form:

Starts with	Detected as
iVBORw0KGgo	PNG
/9j/	JPEG
R0lGOD	GIF
UklGR	WebP (RIFF container)
Qk	BMP
PHN2Zy, PHN2Zw, PD94bWw	SVG (<svg or an XML prolog)

Anything else falls back to PNG. If a full data URL is pasted, the MIME type in the prefix is trusted instead. The byte size shown for decoded input is calculated from the string length and padding without actually decoding.

Related tools and snippets

• Base64 converter — encode and decode plain text, not just images.
• Image compressor — shrink the file first so the data URL is as short as possible.
• SVG optimizer — minify an SVG before inlining it in CSS.
• URL encoder — percent-encode a UTF-8 SVG data URL for use inside url().
• Image to Base64 announcement — the post introducing this tool with more examples.