Developer tools
Turn an image into a line of text
Drop an image to get its Base64 data URI as raw text, CSS or an <img> tag — or paste Base64 to turn it back into an image.
About this tool
Data URIs, both ways
A data URI puts an image directly inside HTML, CSS or JSON — useful for tiny icons, email templates and anywhere a separate request is not an option. This encodes any image to Base64 and gives you the formats you actually paste, shows the size cost (Base64 is a third larger than the file), and decodes the other way too: paste a data URI or raw Base64 and download the image it contains.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
Every paste format
Raw Base64, a full data URI, a CSS background-image rule and an <img> tag with width and height filled in.
Honest about size
Base64 adds about 33%. The tool shows the original and encoded sizes, and warns when an image is too big to be worth inlining.
Decode too
Paste Base64 or a data URI and get the image back, with its real format detected.
Step by step
How to convert an image to Base64
Add an image
Drop any image, or switch to Decode and paste Base64.
Pick the format
Choose raw Base64, data URI, CSS or <img>.
Copy it
Copy the text into your code — or download the decoded image.
Get the most out of it
Tips for the best results
- Only inline small imagesUnder about 4 KB a data URI saves a request; bigger ones bloat your HTML and cannot be cached separately.
- Compress firstBase64 inherits the file size. Shrink the image before encoding it.
- SVG is better as textFor SVG, URL-encoding is smaller than Base64 — use the SVG optimizer’s data URI output.
- Email needs inlineMany email clients block external images; small inline logos show immediately.
Keep going
More free developer tools
Questions
Questions about this tool
Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.
What is a Base64 data URI?
A way of writing a file as text, prefixed with its type: data:image/png;base64,… Browsers treat it exactly like a URL to the image, so it can go in an <img> src or a CSS url().
Does Base64 make images bigger?
Yes — about 33% larger than the binary file, because every 3 bytes become 4 characters. That is why it only makes sense for small images.
How do I decode Base64 to an image?
Switch to Decode, paste the Base64 text or the whole data URI, and the image appears with a download button. The format is detected from the data itself.
Which image formats work?
Any image your browser can open — JPEG, PNG, WebP, AVIF, GIF, SVG and ICO.
Is my image uploaded?
No. Encoding and decoding happen in your browser.