Turn an image into a Base64 data URI for HTML, CSS or code.
Drop an image to convert to Base64
Drag and drop, paste, or choose a file. Files stay on your device.
Last reviewed by the OnlineToolPro team
Base64 turns an image file into text, so it can be placed directly inside HTML, CSS or JSON instead of being loaded as a separate file. Handy for small icons and emails.
How it works
3 simple steps. No experience needed.
Good to know
A data URI starts with something like data:image/png;base64, and can be used directly as an image source in HTML or a url() in CSS. Plain Base64 is just the encoded data, which APIs and JSON fields often expect.
Base64 images can't be cached separately and make the page that contains them larger. Keep it for small icons and email templates; link larger images as normal files.
FAQ
Yes — about a third bigger. It's best for small images; larger ones load faster as normal files.
PNG, JPG, WebP, GIF, BMP, AVIF, SVG and ICO.
Copy the data URI and use it as background-image: url("data:image/png;base64,…").
Other tools you might find useful next.
Resize, compress and transform images easily. 11 free tools.