What is a Base64-encoded image?
Base64 encoding is a way to turn binary data (the bytes inside an image file) into a string of ASCII characters that's safe to drop into a text document. It uses 64 printable characters — A–Z, a–z, 0–9, plus '+' and '/' — to represent every possible byte value. Three bytes of input become four characters of output, which means the Base64 string is always about 33% larger than the original.
A data URI wraps that Base64 in a special URL that includes the MIME type, making it a complete inline reference to the image. Anywhere a browser, CSS parser, or HTML renderer expects an image URL, you can substitute a data URI and the rendering works without making an extra network request.
Real use cases for Base64 images
- Email signatures and HTML emails. Many email clients block external image references for privacy. Inlining icons via Base64 means they always appear, regardless of the recipient's settings.
- API requests that don't accept multipart uploads. Some image-processing APIs only accept a JSON body with an image field. Sending the image as a Base64 string in JSON is the standard way around that.
- Single-file HTML demos. When you need to share an HTML proof-of-concept that's self-contained — no separate image files to remember — inline every image as Base64 and the file works anywhere.
- CSS background icons. Small UI icons (under 4 KB after Base64) save one HTTP request by being inlined in the stylesheet. The savings show up on cold loads and on slow connections.
- Test fixtures and seed data. Tests that need an image to upload often paste a Base64-encoded fixture so the test runs without any external file dependencies.
When NOT to inline an image as Base64
Three rules of thumb. First, if the image is over ~10 KB, inlining it usually costs more than it saves — Base64-encoded data isn't cached separately from the surrounding HTML/CSS, so it re-downloads with every page load. A normal image URL with HTTP caching is faster after the first visit.
Second, browser caches can't share inline images between pages. Three pages each with the same inline 50 KB image ship 150 KB total; the same image as a file URL ships 50 KB once and is reused.
Third, code reviewers hate it. A 100-line CSS file becomes a 10,000-line CSS file when you inline images. Keep file URLs for everything except the smallest, load-critical icons.
How to use this tool
- Drop an image (PNG, JPG, WebP, GIF, SVG, ICO, BMP) onto the drop zone. The 5 MB limit is deliberately lower than other tools because Base64 inflates the output.
- Pick an output mode: Data URI (most common — the full
data:image/...string), Raw base64 (just the encoded payload), CSS (ready-to-pastebackground-image: url('…');), or HTML (a full<img>tag). - Click Copy. Paste into your CSS, HTML, JSON, email signature builder, or wherever.