How to use it
- Drop in an image.
- Choose the output: a data URI, plain Base64, an HTML tag or a CSS rule.
- Copy the result.
When inlining an image makes sense
A data URI puts the image inside the page instead of in a separate file. That saves one network request, which can help with very small images: tiny icons, a loading spinner, a background pattern, or an image inside a single-file HTML report that has to work offline or as an email attachment.
When it does not
Base64 represents every 3 bytes as 4 characters, so the encoded image is about 33 percent larger than the file. It also cannot be cached separately: if the same image is inlined on ten pages, visitors download it ten times. For anything larger than a few kilobytes, a normal image file is usually better.
Some email programs block or strip data URI images, so for email newsletters, test before you rely on them.
Shrink it first
Since the encoded size follows the file size, compress and resize before encoding. An SVG icon is often smallest of all; a small PNG run through the PNG compressor is a close second.
Questions people ask
Why is the Base64 string bigger than my image?
Base64 uses 4 text characters for every 3 bytes, adding about a third to the size.
What is the difference between a data URI and Base64?
A data URI adds a prefix like data:image/png;base64, so browsers know what the data is. Raw Base64 is just the encoded characters.
Can I turn the Base64 back into an image?
Yes, with the Base64 to image decoder.