Image to Base64: When to Use Data URIs (and When Not To)
What a Base64 data URI is, the right and wrong places to inline images, and how to convert an image to Base64 and back.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
A data URI embeds a file directly inside HTML, CSS or JSON as text: data:image/png;base64,iVBORw0KGgo…. Instead of the browser fetching logo.png, the image travels inside the page itself.
How to convert an image to Base64
- Open the free Image to Base64 converter.
- Drop in an image.
- Copy the format you need: the full data URI, raw Base64, an
<img>tag or a CSSbackground-imagerule.
Switch to Base64 to image to paste a Base64 string and download it back as a file — handy for debugging API responses that return images as Base64.
When inlining makes sense
- Tiny icons (under ~2–4 KB) where an extra request costs more than the bytes
- Single-file demos and HTML exports that must work offline
- JSON APIs that need to carry a small image in one payload
- Placeholder images (tiny blurred previews while the real image loads)
When it doesn't
- Anything larger than a few KB on a website. Base64 is ~33% bigger than the file, can't be cached separately and blocks rendering of the HTML or CSS it's embedded in.
- Email. Gmail and many clients block data-URI images; use hosted images or CID attachments instead.
- Images that repeat across pages — a normal file is cached once and reused.
Base64 is not security
Encoding an image (or anything else) in Base64 doesn't hide it — anyone can decode it instantly. Read more in What is Base64 encoding?
Size check
The converter shows the original size and the encoded length so you can see the overhead before deciding to inline. Compress the image first with the Image Compressor to keep data URIs small.
Your images stay on your device
Pyalm's image tools process files with your browser's canvas. Nothing is uploaded — useful for ID photos, product shots before launch, and screenshots containing customer data.
Building something that handles images?
Pyalm builds custom software and websites with proper image pipelines — uploads, resizing, CDN delivery — so nobody has to hand-encode images.
Related free tools
Image to Base64 | Base64 Encoder | SVG Downloader | Favicon Generator | All free tools