When embedding an image as Base64 is a good idea
Data URIs are worth it for small assets: icons, a logo in an email template, a background texture, a placeholder. You trade one HTTP request for a slightly bigger file, and the image can never 404 because it travels with the document. That is genuinely useful in HTML email, in single-file exports and in CSS that has to be portable.
And when it is a bad idea
Base64 makes a file about 33% larger, and an embedded image cannot be cached separately from the page or stylesheet that contains it. Inline a 400 KB hero photo and every visitor re-downloads it on every page, uncached, with your HTML blocking behind it. As a rough rule: under about 5 KB is usually a win, 5–20 KB is a judgement call, and above that you almost always want a normal image file.
Picking the right snippet
The HTML tab gives an image tag with an empty alt attribute you should fill in. The CSS tab gives a background-image rule. Markdown works in most renderers but not all — GitHub, for instance, strips data URIs in some contexts. The raw Data URI tab is what you want for a JavaScript variable or a manifest.
A note on SVG
SVG files are text, so Base64 is often the wrong choice for them — a URL-encoded SVG data URI is usually smaller than the Base64 version and stays readable. Base64 is still the safer option when the SVG contains quotes or characters that break inside CSS.
Benefits
- Converts any image the browser can read into a data URI, with ready-made HTML, CSS and Markdown snippets.
- Shows the original size, the encoded size and the exact percentage the file grew.
- Warns when the image is too large to be worth inlining.
- The file is read locally with the FileReader API — nothing is uploaded.
Limitations to know
- Base64 makes the data about 33% larger than the original file.
- An inlined image cannot be cached separately from the page or stylesheet that contains it.
- Very large images produce strings that are slow to paste and awkward to edit.
Common mistakes to avoid
- Inlining a big hero photo, which forces every visitor to re-download it uncached on every page.
- Using Base64 for SVG when a URL-encoded data URI would be smaller and still readable.
- Pasting a data URI into a Markdown renderer that strips them, then assuming the image is broken.
Alternatives
Shrink the file first with the Image Compressor, change format with the Image Converter, or encode plain text with the Base64 Encoder.
Last updated: August 2026 · Reviewed by the AI Toolbox editorial team.
Frequently asked questions
Is my image uploaded anywhere?
No. The browser FileReader API reads the file locally and the conversion happens in the page. No network request is made.
Why is the Base64 string bigger than my file?
Base64 encodes three bytes as four characters, so the output is roughly 33% larger than the original by design.
What size image is too big to inline?
As a guideline, keep inlined images under about 5–10 KB. Bigger images lose the caching benefit and slow down the page that carries them.
Can I convert it back?
Yes — paste the string after the comma into our Base64 decoder, or simply open the data URI in a browser tab.