About the JPG to Base64 tool
Encode an image as a Base64 data URI you can paste straight into CSS, HTML, JSON, or emails. Great for tiny icons and quick prototypes where an extra HTTP request isn't worth it.
Encoding happens in your browser. The image and the resulting string both stay on your machine — relevant, since Base64 payloads often come from private systems.
How to use it
- Add your image.
- Copy the generated Base64 string or the full data URI.
- Paste it wherever you need it.
What Base64 is for
Base64 turns binary data into plain ASCII text, so an image can travel inside something that only accepts text — a JSON payload, an email header, a CSS file or an HTML attribute.
The cost is size. Every three bytes become four characters, so the encoded string is always about a third larger than the file it came from.
What the numbers look like
We measured it: a 51 KB JPG became a 68 KB Base64 string — an increase of 33.3%, exactly as the encoding predicts.
That overhead is why inlining is sensible for small icons and a poor idea for photographs. An inlined image cannot be cached separately by the browser, so it is re-downloaded with every page load.
Common mistakes
- Inlining large photographs, which bloats the HTML and defeats browser caching.
- Copying only the payload when the destination needs the full
data:image/jpeg;base64,prefix. - Letting line breaks creep into the string when pasting into JSON.
Questions people ask
When should I inline an image?
For small icons, logos and SVG-like assets under a few kilobytes, where saving an HTTP request outweighs the 33% overhead.
Why is my string so long?
Base64 is inherently verbose. Compress the image first if the length is a problem.
How do I go back?
Use the Base64 to Image tool, which decodes the string and gives you the file back.