When to Use Base64 Encoded Images (And When Not To)

Base64 encoding converts binary image data into a text string that can be embedded directly in HTML, CSS, or JavaScript. While this technique has legitimate use cases, it is frequently misused in ways that hurt performance.

What Is Base64 Encoding?

Base64 encoding represents binary data as ASCII text using a set of 64 characters (A-Z, a-z, 0-9, +, /). When applied to images, it creates a "data URI" that can replace a traditional image URL:

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

The key trade-off: Base64 encoding increases the data size by approximately 33%. A 10KB image becomes roughly 13.3KB when Base64 encoded.

When to Use Base64

Small Icons and UI Elements

Images under 2KB (like tiny icons, 1x1 pixel tracking images, or simple UI decorations) are good candidates. The overhead of an additional HTTP request often exceeds the cost of the slightly larger inline data.

HTML Emails

Email clients have inconsistent support for external images. Base64 encoding ensures images display reliably across different email clients without being blocked by image-loading settings.

Single-File Documents

When you need a self-contained HTML file (documentation, reports, exported content), Base64 encoding eliminates external dependencies.

CSS Background Images

Very small, frequently-used background patterns (under 1-2KB) can benefit from inline encoding to reduce HTTP requests.

When Not to Use Base64

Large Images

Never Base64-encode images larger than a few kilobytes. A 100KB photograph becomes 133KB when encoded and cannot be cached independently — it must be re-downloaded every time the HTML page loads.

Multiple Images on a Page

If you have many images, Base64 encoding bloats your HTML document, increasing the initial page load time. External images can be loaded in parallel and cached by the browser.

Images That Could Be Cached

External images are cached by the browser and CDN. Base64 images embedded in HTML cannot be cached separately — if the page changes, the entire encoded image must be re-downloaded.

Performance-Critical Pages

Base64 images block rendering because they are part of the HTML document. External images can be lazy-loaded and loaded progressively.

Performance Comparison

Best Practices

• Only encode images under 2KB — the HTTP request overhead threshold
• Use SVG instead of Base64 PNG for icons when possible — SVGs are already text and often smaller
• Let your build tools decide — bundlers like Webpack can automatically inline small images
• Measure performance — use Lighthouse or WebPageTest to compare before and after

PicTools' Image to Base64 tool makes it easy to convert images for the cases where inline encoding makes sense. And for everything else, use our compression tools to make your external images as small as possible.