Base64 and Data URLs: When to Inline Images (and When Not)
Base64 turns any binary data into plain text so it can travel through systems built for text — email, JSON, HTML attributes. It is useful, but it is not compression and not encryption.
How it works
Base64 takes 3 bytes (24 bits) and writes them as 4 characters from a 64-character alphabet (A–Z, a–z, 0–9, + and /), with = padding at the end. Because 3 bytes become 4 characters, the encoded text is about 33% larger than the original (plus line breaks in some contexts).
Hi! → SGkh
Hello → SGVsbG8=Base64 is not encryption. Anyone can decode it instantly. Never use it to “hide” passwords or keys.
Data URLs
A data URL puts a file directly inside a link (RFC 2397):
<img src="data:image/png;base64,iVBORw0KGgo..." alt="">When inlining helps
- Very small images (a few hundred bytes), such as tiny icons, where an extra request costs more than 33% overhead.
- Self-contained files: an HTML email or a single-file report that must work offline.
- Small images inside JSON APIs or test fixtures.
When it hurts
- Large images: 33% bigger, and they block rendering when inlined in CSS or HTML.
- Images used on many pages: a separate file is cached once; an inlined copy is downloaded with every page.
- SVG: inline the SVG markup itself (or URL-encode it) instead of Base64 — it is smaller.
Try it
Image to Base64 creates a data URL and ready-to-paste HTML/CSS snippets; Base64 encodes and decodes text and files, including the URL-safe variant used in JWTs. Both run in your browser.