A Base64 image is the file's bytes written as text, so it can sit directly inside HTML or CSS as a data: URI instead of being a separate download. It is handy, but it is not free.

What it looks like

<img src="data:image/png;base64,iVBORw0KGgo..." alt="">
background-image: url("data:image/svg+xml;base64,PHN2ZyB...");

The cost: about one third bigger

Base64 turns every 3 bytes into 4 text characters, so the data grows by about 33 percent before any compression. Servers usually gzip or Brotli-compress HTML and CSS, which recovers some of that, but binary image data such as JPG or PNG does not compress well a second time.

The other cost: no separate caching

A normal image file is cached by the browser, so the second page view does not download it again. An image inlined into an HTML page is downloaded with that page every time. Inlined into a stylesheet, it delays the stylesheet, which blocks rendering of the whole page.

When inlining is reasonable

  • Tiny, critical images such as a 1 to 3 KB icon or a small background pattern used on every page, inside a cached stylesheet.
  • Single-file documents such as an HTML email template or a downloadable report that must work with no extra files.
  • Placeholders like a very small blurred preview shown while the real image loads.
  • Prototypes and demos where convenience matters more than speed.

When to use a normal file

  • Anything over roughly 10 KB of Base64 text. Beyond that, a separate cached file is usually better.
  • Photographs and hero images.
  • Images used on only some pages, which would bloat every page if placed in shared CSS.

Modern HTTP/2 and HTTP/3 connections make many small requests much cheaper than in the HTTP/1.1 days, which removed a lot of the original reason for inlining.

SVG is a special case

SVG is text already, so you can often embed it directly in HTML, or URL-encode it in CSS, without the 33 percent Base64 penalty. Use Base64 only where a tool demands it.

Try it

The tool shows the size of the original and the Base64 text, the overhead, and a warning when the result is large enough that inlining probably hurts. It can also decode Base64 text back to an image, for checking data you already have. Everything happens in your browser.