Image to Base64

How to use the Image to Base64

1. Drop in a small image — icons, logos and simple graphics work best.
2. Choose the output you need: a raw data URI, an HTML tag, a CSS rule or Markdown.
3. Press Copy and paste it straight into your code.

What a data URI is

A data URI carries a file's contents inside the URL itself instead of pointing at a location. The structure is data:, the MIME type, ;base64,, then the encoded bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…

Anywhere a URL is accepted — src, CSS url(), a Markdown image — a data URI works instead. The image travels with the document, so there is no second request and nothing to break if a file moves.

When to use one, and when not to

Good uses: tiny icons in a CSS sprite, a logo in an HTML email, an inline SVG placeholder, images in a self-contained HTML file that must work offline, or embedding an image in a JSON payload.

Poor uses: photographs and anything above roughly 10 KB. Three costs stack up. Base64 adds about 33% to the size. The data cannot be cached separately, so it is re-downloaded with every page load. And because it sits in the HTML or CSS, it blocks rendering in a way a separate image request does not.

A useful rule: if the image is small enough that a separate HTTP request costs more than the bytes, inline it. Otherwise link to it.

SVG deserves a mention

SVG is text, so it does not need Base64 at all. You can put the markup directly into a data URI with only the special characters escaped, avoiding the 33% overhead entirely — or better, paste the SVG straight into your HTML, where CSS can then style it.

Frequently asked questions