When embedding an image as Base64 makes sense
A data URI puts the image’s bytes directly inside your HTML, CSS or JSON, so the browser doesn’t make a separate request for it. That is useful in a handful of situations:
- small icons and logos in a single-file HTML page or email template;
- a placeholder or loading image that must appear instantly;
- test fixtures and API payloads where the image has to travel inside JSON;
- tools and sandboxes (CodePen, Storybook, Jupyter) where uploading a separate file is awkward.
For ordinary photos on a website it is usually a bad idea. Base64 text is about a third larger than the file, can’t be cached separately from the page, and makes HTML and CSS slow to parse.
Which output to copy
| Tab | What you get |
|---|---|
| Data URI | data:image/png;base64,iVBOR…, usable anywhere a URL is accepted |
| Raw Base64 | Just the encoded bytes, for APIs that ask for the payload alone |
| HTML | An <img> tag with width and height filled in, which prevents layout shift |
| CSS | A background-image: url("…") declaration |
| Markdown | . GitHub strips data URIs from READMEs, so this suits other renderers. |
| JSON | An object with the MIME type, data URI, width and height |
Keep it small first
Base64 grows with the file, so shrink the image before encoding. Resize an icon to the size it will actually display at, and run photos through the compressor. For SVGs, an optimised file can be a fraction of an exported one.
The file is read and encoded entirely in your browser, byte for byte, with no re-compression. Decoding the string gives back exactly the file you dropped in.
Questions
How do I turn a Base64 string back into an image?
Paste it into Base64 to image; it accepts both data URIs and raw strings.
Do email clients show data URI images?
Inconsistently. Apple Mail and many mobile apps do; Gmail and several Outlook versions block them. For email, hosted images or attachments referenced with cid: are more reliable.