✓ Image to Base64: When to Use Data URIs (and When You Shouldn't)

Embedding an image directly into your HTML or CSS as a Base64 string looks like a neat trick — no extra file, no extra request. Sometimes it genuinely is the right call. Often it isn't. Here's how to decide.

What Base64 encoding does

Base64 represents binary data using 64 text characters, so an image can live inside a text file — your HTML, CSS, or JSON. Wrapped as a data URI, it looks like this:

<img src="data:image/png;base64,iVBORw0KGgoAAA..." />

The browser decodes and renders it like any other image — no network request needed.

You can generate all the common variants (raw Base64, data URI, HTML tag, CSS background-image) from any image with the Image to Base64 tool — it runs locally, so the image never leaves your browser.

The trade-offs, honestly

Cost 1: Base64 is ~33% bigger. Every 3 bytes of image become 4 characters of text. A 30 KB icon becomes ~40 KB of markup.

Cost 2: it can't be cached separately. A linked image downloads once and is cached; on the next page view it costs nothing. A Base64 image is glued into your HTML/CSS and re-downloads with it every time the document isn't cached.

Cost 3: it blocks the critical path. Inline a large image in CSS and every visitor downloads it before the stylesheet finishes parsing — even on pages where the image never shows.

Benefit: zero extra requests. For very small images the request overhead can outweigh the 33% penalty, especially with many tiny assets.

Rules of thumb

Good cases for Base64 / data URIs:

Tiny assets under ~5 KB: icons, 1px textures, placeholder blurs
Single-file deliverables: HTML email templates, self-contained reports, offline pages
Avoiding a request for something used exactly once

Bad cases — link the file instead:

Photos and anything over ~20 KB
Images reused across multiple pages (you lose caching)
Anything already served from a CDN

Prepare the image before encoding

Since Base64 inflates whatever you feed it, shrink the source first:

Resize to the display dimensions with Resize Image
Compress it with Compress Image — for photos, WebP via Convert Image Format usually wins
Then encode with Image to Base64

A 10 KB optimized WebP becomes ~13 KB of Base64 — fine. A 500 KB unoptimized PNG becomes ~670 KB of markup — not fine.

Two related tricks

SVG first: for icons and logos, SVG is usually smaller than any raster format — and if you need a bitmap version, the SVG to PNG Converter renders one at any resolution.
Favicons: modern browsers accept SVG favicons directly, but for legacy .ico needs, the Favicon Generator covers every size from one image.

Takeaway

Base64 is a packaging format, not a compression format. Use it for tiny or must-be-self-contained assets, keep everything else as a normal cached file — and always optimize the image before encoding, because the 33% overhead applies to whatever you put in.