When to Inline an Image as Base64 (And When Not To)
2026-07-03
A data URI puts a file inside a URL. Rather than pointing a browser at an image on a server, you hand it the image directly, which removes a network request from the page load. For a handful of small assets that is a measurable win — and for anything larger it is a mistake.
Step by step
- Open the Image to Base64 tool.
- Drop in your image.
- Choose the output: data URI, CSS background rule, or HTML
<img>tag. - Copy the result into your code.
When inlining helps
- Small icons that are needed for first paint.
- A tiny logo in an email template, where external images are often blocked.
- A background pattern or gradient stop used in one stylesheet rule.
- An SVG, which is already text and usually small.
When it hurts
Three costs stack up, and they stack quickly:
- Size. Base64 represents three bytes as four characters, so the data is about 33% larger than the file.
- Caching. An inlined image cannot be cached separately from the document containing it. Change one line of CSS and every image inside that file is downloaded again.
- Parsing. A stylesheet full of megabyte-long strings is slower to parse and blocks rendering while it does.
The practical rule: inline under about 4 KB, link anything larger. This tool stops you at 1 MB because beyond that the result is almost never the right answer.
Which output format
Use the bare data URI for JSON payloads and markup you are writing yourself, the CSS rule when it is going straight into a stylesheet, and the HTML tag when you want something ready to paste. All three are produced in your browser, so unreleased artwork never leaves your machine.