How to Encode Images to Base64 (and When to Do It)

Base64 encoding converts binary data into a text string that can be safely transmitted over text-based protocols. For images, this means turning a PNG or JPEG into a long string of letters, numbers, and symbols that can be embedded directly in HTML, CSS, or JSON.

The use cases are real but limited. Base64 makes sense for small icons that would otherwise require an extra HTTP request. It makes sense for self-contained documents that need to work offline. It does not make sense for large photos — the encoded string is 33% larger than the original file and offers no caching benefits.

How Base64 encoding works

Base64 takes three bytes of binary data and represents them as four ASCII characters. This means the encoded output is always larger than the original — roughly 33% larger. A 100KB image becomes a 133KB string.

The encoding is reversible. You can convert a Base64 string back to the original binary data with no quality loss. This is not compression — it is a different representation of the same data.

The most common format is the data URI: data:image/png;base64,iVBORw0KGgo.... This string can be used anywhere a URL is expected — in an <img> tag, in CSS background-image, or in a JSON payload.

When to use Base64

Base64 makes sense in a few specific situations.

Small icons and graphics. If you have a small icon that is used on every page, encoding it as Base64 and embedding it in your CSS eliminates an HTTP request. For a 2KB icon, the tradeoff is worth it.

Self-contained documents. If you need a single HTML file that works offline — an email template, a report, a portable document — embedding images as Base64 ensures they are always available.

APIs and JSON payloads. When sending image data through a JSON API, Base64 is the standard way to include binary data in a text-based format.

When NOT to use Base64

Base64 does not make sense for large images. A 1MB photo becomes a 1.33MB string. That string must be downloaded every time the page loads, cannot be cached independently, and cannot be compressed by the browser.

It also does not make sense for images that change independently of the HTML. A Base64 image is embedded in the HTML — if the image changes, the HTML must change too. This defeats the purpose of separate image caching.

Finally, Base64 strings are hard to maintain. A single character error corrupts the entire image. Version control systems struggle with long strings of random characters. Keep the original file and encode only when needed.

How to encode images to Base64

Encoding is straightforward. Select the image, choose the output format, and copy the resulting string. Most tools handle the conversion instantly.

For web use, encode to PNG for graphics and screenshots, or to JPEG for photographs. The resulting Base64 string can be pasted directly into your HTML or CSS.

To decode a Base64 string back to an image, use a Base64 decoder. Paste the string and the tool generates the original image file.

Wrapping up

Base64 encoding is a useful tool for specific use cases — small icons, self-contained documents, and API payloads. It is not a replacement for serving images as files. Use it when the tradeoff makes sense, and keep your original files for everything else.

Encode small images for embedding, keep large images as files, and always compare the encoded size against the original before committing to Base64.