Image to Base64: Embed Images in HTML and CSS
Converting an image to Base64 encodes it as text you can embed directly in HTML, CSS, or JSON. It removes extra file requests but increases payload size.
How Base64 Works
Base64 represents binary data with 64 ASCII characters, roughly increasing size by a third. The encoded string can be placed inline in src attributes or CSS URLs.
When It Helps
Embed tiny images—icons, small logos, sprites—to cut HTTP requests and speed up first paint. It's also handy for passing images inside JSON APIs.
When to Avoid It
For photos and large files, Base64 bloats the page and hurts caching. Keep large assets as separate files and reserve inline encoding for small, rarely-changing graphics.
Doing It Right
Use the tool to encode and get the ready-to-paste data URI with the MIME type prefix. Verify the rendered image matches the original before shipping.
Common Pitfalls
The most common mistake is embedding a large Base64 string in a file that is itself cached and reused everywhere, multiplying bandwidth. Another is forgetting the MIME prefix so the browser refuses to decode it.
Always test the data URI in a real page, and if you later replace the image, regenerate the string—editing an encoded blob by hand is error-prone.
How to Convert an Image to Base64
- Select a small image that genuinely benefits from inline embedding.
- Run the encoder to get the data URI with the correct MIME prefix.
- Paste it into the src attribute or CSS url() and test the render.
Avoid encoding photos or anything large—the text bloat outweighs the request-saving benefit.
Quick tip: use inline encoding only for assets under a few kilobytes that appear on every page. For anything else, a normal file request with caching wins.