toolready. Image to Base64 / Data URI

Image to Base64 / Data URI

Encode an image as a data URI ready to paste into CSS or HTML.

What this does

Turns a PNG, JPEG, WebP, AVIF, GIF or SVG into a base64 data URI you can paste straight into code. Alongside the raw URI you get four wrappers — a CSS background-image declaration, an <img> tag, a JSON object, and the bare base64 without the data: prefix — plus original and encoded byte sizes, so the cost of inlining is visible. The file is read by the browser's File API and encoded in the tab, never uploaded; the 5 MB limit is far larger than anything you should inline.

What does a data URI look like?

One long string, made of four parts: 

data:            the scheme
image/png        MIME type, read from the file
;base64,         the encoding marker
iVBORw0KGgoAA…   the file's bytes, base64-encoded

The MIME type comes from the file itself, so an .svg arrives as data:image/svg+xml;base64,…. That whole string goes anywhere a URL is accepted: src, CSS url(), a JSON field.

How much bigger does base64 make an image?

Base64 spends 4 characters on every 3 bytes, so the payload is about 33% larger than the file — a 9 KB PNG becomes roughly 12 KB of text, before the data:image/png;base64, prefix. Compare the "Size" and "Base64" rows above on your own file. Gzip or Brotli claws some of it back, but base64 of already-compressed image data compresses poorly, so budget for the full increase. The real cost is usually not the bytes anyway — it is where they end up.

When is inlining an image a bad idea?

Whenever the image is not tiny, and sometimes even then:

  • Caching. An inlined image lives inside your HTML or CSS, so changing either re-downloads it; a separate file would have sat in the cache with a long max-age.
  • Render blocking. Data URIs in a stylesheet load before the browser can paint, and cannot be lazy-loaded or sized through srcset.
  • Email. Gmail and most Outlook versions refuse to render <img src="data:…"> at all. Use a hosted URL or a CID attachment; inlining does not defeat image blocking.
  • Content Security Policy. img-src 'self' blocks data URIs unless you add data:.
  • Repeats. One icon inlined in twenty components is twenty copies in the bundle.

Rough rule: under a couple of kilobytes and used once, inline it. Above that, ship a file.

When is it worth doing anyway?

A single-file HTML page that must work with no assets beside it; tiny decoration such as a texture or spacer, where the HTTP request costs more than the bytes; a blur-up placeholder shown while the real image loads; and any pipeline that only accepts text — a JSON field, a YAML config, a database column.

How do I use the data URI in CSS?

  1. Pick your image, then hit CSS background.
  2. Copy the declaration into the rule that needs it: background-image: url("data:image/png;base64,…");
  3. Keep the quotes — harmless everywhere, and required for payloads containing characters that break an unquoted url().
  4. For an <img>, use the HTML button and fill in the alt; the wrapper leaves it empty rather than inventing text.

Should I base64-encode an SVG?

Usually not. SVG is already text, so base64 adds a third to its size for no benefit; a percent-encoded SVG data URI is smaller and stays readable in source. Base64 wins only when the SVG must pass through something that mangles raw markup. Either way, run it through SVG optimize first — dropping editor metadata usually saves more than the encoding costs. See also image compress, Base64 for plain text, and the favicon generator.