Embed Small Icons and Fonts as Base64 in HTML, CSS and JSON

What Base64 does and costs

Base64 represents every three bytes as four text characters, so the output is about one third larger than the original. A 3 KB icon becomes roughly 4 KB of text. That is acceptable for small assets and wasteful for large ones.

The benefit is one fewer HTTP request and a file that cannot go missing, which suits tiny images, inline SVG fallbacks and configuration values.

Build a data URI

A data URI has the form data:[mediatype];base64,[data]. For a PNG that is data:image/png;base64, followed by the encoded text.

1. Paste the text you want to embed into the encoder. For an image or other binary file, use a tool that reads the raw bytes, such as the base64 command, so the bytes are encoded as binary and not as text.
2. Encode and copy the result, making sure no line breaks were added in the middle.
3. Add the prefix that matches the file type, such as data:image/png;base64, or data:font/woff2;base64,.
4. Place it where it belongs: src="..." in an img tag, or url(...) in CSS.
5. Test in a browser and check the file really displays before deploying.

Where it fits well

• Small icons and logos under a few kilobytes in a CSS file.
• A single email template that must display an image without external hosting, though some email clients block data URIs.
• Certificates, public keys or small binary settings inside JSON or YAML configuration, which cannot hold raw bytes.
• Test fixtures where a sample file must live inside one source file.

Where it backfires

Do not inline large photos. The text bloats your HTML or CSS, it cannot be cached separately from the host file, and every visit downloads it again. A stylesheet that includes a 200 KB image forces visitors to wait for that image before the page can be styled.

Also avoid copying the same encoded string into many places. Define it once, for example as a CSS custom property or a single class.

Remember that Base64 is encoding, not encryption. Anyone can decode it, so never use it to hide passwords or private keys.

Check the size before you commit

A quick rule of thumb: multiply the file size by 1.33, then ask whether you would be happy to ship that many extra characters in the parent file. For a 2 KB icon the answer is usually yes. For an 80 KB font, probably not. Compress what you embed first: optimizing a PNG or SVG before encoding shrinks the Base64 text by the same proportion. Keep a comment next to the encoded string that names the source file, because the string itself is unreadable.

Decoding to verify

If you receive a data URI or a Base64 value in a config file, paste the part after the comma into the decoder to inspect what it contains. A PEM certificate decodes to readable text beginning with BEGIN CERTIFICATE lines, while a PNG decodes to bytes starting with the signature 89 50 4E 47, which a text decoder cannot show as readable text. Checking the first bytes is a quick way to confirm you embedded the right file.