Image to Base64
Convert an image to a Base64 data URI you can embed directly in HTML or CSS.
Convert an image into a Base64 data URI that you can paste directly into HTML <img> tags or CSS background-image rules — no separate image file needed. Useful for small icons, email templates, and inlining assets.
When to inline an image
Embedding an image as Base64 removes one network request, which can help for tiny, frequently-used icons or for self-contained files like HTML emails. The trade-off is size: Base64 is about a third larger than the binary, it can't be cached separately, and it bloats your HTML or CSS. Reserve it for small assets and keep large photos as normal files.
Weighing the trade-off
Inlining an image as Base64 removes a network request, which can shave a little load time for very small, frequently-used assets like icons — and it makes a document fully self-contained, which is why HTML emails rely on it. But the encoded string is roughly a third larger than the original file, it can't be cached separately from the page, and it bloats your HTML or CSS. The practical rule: inline tiny images, keep everything bigger as a normal linked file.
When embedding an image as text helps
Base64 encoding rewrites a binary image as plain text you can paste directly into HTML or CSS, so the picture travels inside the document instead of as a separate file. The payoff is one fewer network request: a small icon embedded as a data URI loads with the page rather than triggering its own round trip to the server. For tiny, frequently used graphics — a logo mark, a UI icon, an email signature image — that saved request can noticeably speed up the first paint.
The catch is size. Base64 inflates the data by roughly a third, so embedding a large photograph bloats your HTML or stylesheet and, worse, prevents the browser from caching that image separately across pages. The rule of thumb is to embed only small assets, usually under a few kilobytes, and keep larger images as ordinary linked files. This tool is perfect for generating the data URI of an icon; it is the wrong choice for a hero photograph you'll reuse site-wide.
Frequently asked questions
What is a data URI?
It's a way to embed file data directly in a URL, starting with 'data:image/...;base64,'. Browsers render it as if it were a linked file.
Should I inline large images?
No. Base64 adds about 33% to the size and can't be cached separately, so it's best kept for small icons and self-contained documents.
What size image is too big to inline?
There's no hard limit, but beyond a few kilobytes the downsides (larger payload, no separate caching) usually outweigh the saved request. Reserve inlining for small icons and logos.
Does the data URI include the image type?
Yes. It begins with something like data:image/png;base64, so the browser knows how to render it. This tool sets that prefix automatically from your file.
Why is my Base64 string larger than the original file?
Base64 represents binary data using a limited text alphabet, which adds about 33% overhead. That's expected, and it's why the technique suits only small images.
Last updated: 2026-01-15