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.
JPG · PNG · WebP · GIF · SVG
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.
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.