Image to Base64 Converter
Turn any image into a Base64 data URI — with copy-ready HTML and CSS snippets — or decode one back into an image. Everything runs in your browser, so your image is never uploaded anywhere.
HTML <img> snippet
CSS background-image snippet
Base64 to image (reverse)
Paste a data URI below to preview and download it as a normal image file.
What is a Base64 data URI for?
A data URI packs an entire image into a single string of text, so the image can live inside your HTML, CSS, or email instead of being a separate file. That's useful in three common situations: HTML emails, where linked images are often blocked but embedded ones display; tiny icons and logos in CSS, where inlining saves a network request; and single-file documents — a self-contained HTML page, a README, or a code snippet that has to work with no other files next to it. It's also handy in places where you simply can't host a file, like some CMS fields or sandboxed environments.
The honest downside: Base64 is ~33% bigger
Base64 represents every 3 bytes of image data as 4 characters of text, so the encoded string is about one third larger than the original file. A 60 KB photo becomes roughly 80 KB of text — and unlike a normal image file, that text can't be cached separately by the browser and bloats the page it's pasted into. That's why the sweet spot is small stuff: icons, logos, tracking-pixel-sized graphics, things under a few tens of kilobytes. This tool warns you above 50 KB — for anything big, a normal hosted image file is almost always the better choice.
When inlining is worth the 33%, and when it is a mistake
The size penalty is the well-known half of the trade. The half that costs people more is caching. A normal <img src="logo.png"> is fetched once and reused on every subsequent page; a data URI is part of the document, so it is re-downloaded with every page that contains it and can never be cached on its own. Inline a 40 KB image into a page a visitor sees five times and you have sent 200 KB instead of 40 KB, plus the 33%.
The threshold most build tools settle on is roughly 2–4 KB:
| Situation | Inline? | Why |
|---|---|---|
| A tiny icon inside a CSS file | Yes | The CSS is cached anyway, and one fewer request beats a few hundred bytes. |
| An image in an email signature | Yes | Many mail clients block remote images entirely; inlined ones display. |
| A logo that appears on every page | No | Cached once as a file. Inlined, it ships again with every page. |
| A photograph, at any size | No | The 33% is real bytes, and photos are exactly where 33% hurts. |
| Pasting into a chat or a document | Yes | Nothing to host and nothing to expire. This is what the format is genuinely good at. |
One thing that surprises people: compression does not undo the 33%. Gzip and Brotli squeeze base64 text well, but not well enough to reach the size of the original binary — you land a little above where you started, not back at it. Base64 is a transport encoding, not a compression format.
Sources
- MDN — Data URLs — the
data:scheme this page produces, and MDN's own note on the size overhead and the caching behaviour described above. - RFC 4648 — The Base16, Base32, and Base64 Data Encodings — the four-characters-per-three-bytes ratio, which is where the 33% comes from exactly rather than approximately.
Frequently asked questions
Is my image uploaded to your server?
No. The file is read and encoded entirely inside your browser using the built-in FileReader — nothing is sent anywhere, and the page works offline once loaded.
Does converting to Base64 change the image quality?
No. Base64 is a lossless re-labelling of the exact same bytes — decode it back and you get a pixel-for-pixel identical file. Only the size on the page grows, not the image itself.
Is there a maximum size?
Technically browsers handle data URIs of many megabytes, but pasting huge strings into editors gets slow and some tools truncate very long lines. Keep it under ~50 KB for comfort; above that, use a normal file.
Why won't my pasted data URI decode?
The string must start with something like data:image/png;base64, followed by the encoded data, with no line breaks or missing characters. Copy-pasting from emails or chats often wraps or trims the string — grab it again from the original source.
You might also need
✂️Background Remover
AI cutout to a transparent PNG — your photo never leaves your browser.
🖼️Image Compressor
Shrink JPG/PNG/WebP file size with quality and width controls.
🔄Image Converter
HEIC to JPG, WebP to PNG — convert between formats locally.
🕵️EXIF Viewer & Remover
See hidden GPS/camera metadata in photos and strip it out.