What Base64 is

Base64 is a way to represent binary data — like an image — as plain text, using only 64 safe characters (A–Z, a–z, 0–9, + and /). It's not compression and not encryption; it's a text encoding. The point: text can go places binary can't — for example, directly inside an HTML or CSS file.

An image encoded as Base64 becomes a long string like data:image/png;base64,iVBORw0KG… — a so-called data URI that you can drop straight into a src or a CSS background-image, with no separate file.

The one big downside: it grows the file

Base64 represents 3 bytes of binary as 4 characters of text. That makes the encoded data roughly 33% larger than the original file. So a data URI is never about saving space — it's about embedding. Whenever people mail image attachments, the same overhead applies (email attachments are Base64-encoded), which is why a "20 MB of photos" email can exceed a 20 MB limit.

When a data URI is worth it

The trade-off is: you save a separate HTTP request, but you pay ~33% more bytes and lose caching (the image can't be cached on its own). That math works only for tiny images:

  • Very small icons (a few hundred bytes) used inline — the saved request outweighs the size penalty.
  • Critical above-the-fold graphics that should appear without waiting for a second request.
  • Self-contained files — an HTML email or a single-file export where no external image can be referenced.

When to avoid it

  • Larger images and photos. The 33% penalty and lost caching make a normal file far better. With HTTP/2, extra requests are cheap anyway.
  • Anything reused across pages. A cached file loads instantly on the next page; an inlined data URI is re-sent every time.
  • Content images that should be found. A data URI has no alt text advantage and won't appear in image search the way a real file does.

How to create and decode Base64

You can turn an image into a data URI and back with the image-to-Base64 and Base64-to-image tools — browser-locally, so the image isn't uploaded. Paste the resulting string into your HTML/CSS, or decode a data URI you received back into a real image file.

Conclusion

Base64 encodes images as text so they can live inside HTML or CSS — handy for tiny inline icons and self-contained files, wasteful for anything larger because it grows the file by a third and loses caching. Reach for it deliberately, not by default.