Image to Base64
Copy as a data URI, ready for CSS or HTML
Image
Result
No image yet
Drop in an image and the Base64 output appears here.
Base64 makes the data about 33% larger. Use it only for small images.
Inlining a small image as a data URI removes one network request, which matters for icons that appear on every page. Beyond a few kilobytes it stops being worth it, since Base64 makes the data about a third larger and it cannot be cached separately.
How to use
- 1 Drop in an image — small icons work best.
- 2 Choose whether you want the full data URI or just the Base64 payload.
- 3 Copy the result and paste it into your CSS or HTML.
Frequently asked questions
When should I inline an image?
Under about 4KB, and only for images used on nearly every page. Above that the size penalty and the loss of separate caching outweigh the saved request.
Why does the file get bigger?
Base64 represents three bytes of binary as four ASCII characters, a fixed 33% increase, plus a little for the URI prefix. That is the price of embedding binary data inside a text file.
Is a data URI cached?
Only as part of whatever file contains it. Change one inlined icon and the whole stylesheet has to be re-downloaded — which is exactly why inlining large images backfires.