What is a Base64 image?
A Base64 image, or data URI, is an image file written out as text and placed directly inside HTML, CSS, JSON or an email, instead of being loaded from a separate URL. It looks like data:image/png;base64,iVBORw0KGgo…. The browser decodes the text back into the image when the page loads.
Inlining is useful for small icons and logos in HTML emails (where external images are often blocked), single-file HTML documents and reports, CSS backgrounds for tiny decorations, JSON or API payloads that must carry an image, and offline pages. It saves an extra network request, but it makes the containing file bigger.
How to use it
- Choose, drag or paste an image.
- Copy the data URI, a ready-made <img> tag with width, height and alt text, or a CSS background declaration.
- Paste it into your HTML, stylesheet or template.
How the conversion works
The file is read on your device with the browser's FileReader API and encoded as Base64 without any re-compression, so the decoded image is byte-for-byte identical to your original. The MIME type, such as image/png or image/svg+xml, is detected from the file and included in the URI.
Base64 represents every 3 bytes as 4 characters, so the encoded text is about 33% larger than the file. A 6 KB icon becomes roughly 8 KB of text.
When not to inline images
- Large photos: anything over about 10–20 KB is usually better as a normal file that browsers can cache and load lazily.
- Images used on many pages: a linked file is downloaded once and cached; an inlined one is downloaded again with every page or stylesheet.
- Content images that should rank: search engines index linked image files more reliably than data URIs.
More worked examples
Size overhead: a 6 KB icon becomes about 8 KB of Base64 text, because every 3 bytes are written as 4 characters.
Common mistakes to avoid
- Inlining large photos. Data URIs over about 10–20 KB slow pages down; link to the file instead.
- Inlining images used on every page. Linked files are cached once; inlined ones are downloaded every time.
- Forgetting to compress first. Shrink the image with the image compressor before encoding.
Sources and methodology
The calculations on this page follow these published standards and references. The code is covered by automated tests against known values.