Image to Base64 Converter – Compress, Encode and Embed as a Data URI | TrenTyx
Drop an image, shrink it to the size you actually need, and copy it back out as a Base64 data URI — or as a finished CSS rule, <img> tag, Markdown image or JSON string. Base64 inflates a file by about a third, so compressing before you encode is usually the difference between a usable inline asset and a bloated stylesheet. Decoding works too: paste a data URI and download the image.
Why Compress Before You Encode
Base64 represents three bytes of binary data with four ASCII characters, so an encoded image is always about
33% larger than the file it came from, plus a few bytes of data: prefix. An 800 KB
PNG becomes a string of roughly 1.07 MB — dropped straight into a stylesheet, that string is downloaded by every
visitor, cannot be cached separately, and blocks rendering until the CSS finishes parsing.
Re-encoding the same image to WebP at quality 80 often brings it under 100 KB before Base64 is applied, which is the difference between a sensible inline asset and a performance problem. That is why this tool puts resizing and format conversion in front of the encoder instead of behind it.
When Inlining an Image Is a Good Idea
- Small icons and logos under about 5 KB — one fewer HTTP request, no flash of missing image.
- Single-file HTML documents — reports, email templates and offline pages that must travel as one file.
- Environments without file hosting — a JSON payload, a database column or a config file that has to carry the picture with it.
- Placeholder blurs — a tiny 20px preview inlined while the full image loads.
Above roughly 10 KB the trade goes the other way: a normal <img> file is cached by the browser,
loaded in parallel and served compressed. Use the size warning in the tool as a rough guide.
Common Use Cases
- Inlining an icon in CSS — copy the finished
background-imagerule, no manual string wrangling. - Embedding a logo in an email template — many clients accept a data URI where an external image would be blocked.
- Shrinking a screenshot before pasting it into a prompt or a ticket — resize, convert to WebP, done.
- Recovering an image from a data URI — paste the string you found in a stylesheet or an API response and download the file.
- Converting formats offline — PNG to WebP or JPEG without installing anything.
Frequently Asked Questions
Are my images uploaded to a server?
No. Files are read with the browser FileReader and re-encoded on a canvas element inside your tab. You can disconnect from the internet and everything still works, which matters for screenshots that contain customer data.
Why does the Base64 string get bigger than my file?
That is inherent to the encoding: four characters per three bytes, a fixed 33% overhead, plus padding and the data:image/...;base64, prefix. The only way to make the string shorter is to make the image smaller first, which is what the quality and max-width controls are for.
What happens to SVG files?
They are encoded exactly as they arrive, never drawn onto a canvas. Rasterising an SVG would throw away its scalability and usually make it larger, so re-encoding options are ignored for SVG input.
Does re-encoding remove EXIF data?
Yes. Any conversion to WebP, JPEG or PNG redraws the pixels on a canvas, so camera metadata, GPS coordinates and colour profiles are dropped. Choose Keep original if you need that metadata preserved.
How large an image can it handle?
Anything your browser can decode, though very large photographs produce very large strings and a sluggish text area. For files above a few megabytes, set a max width first — encoding a 6000px photo as a data URI is almost never the right answer.