Encode Images as Base64 Data URIs
Embed small images directly in HTML, CSS, JSON or email templates. Choose an image and copy it as raw Base64, a complete data URI or a ready-made CSS or HTML snippet.
How to convert an image to Base64
- Choose or drop an image file.
- Check the preview, type, dimensions and the encoded size.
- Copy the format you need — data URI, raw Base64, CSS background-image or HTML <img> — or save it as a text file.
Supported formats
- Input
- PNG, JPG, GIF, WebP, SVG, ICO, AVIF, BMP
- Output
- Base64 text, Data URI, CSS, HTML
- Maximum size
- 50 MB per file (limited by your device's memory)
When inlining images is a good idea
A data URI saves one HTTP request but makes the image about 33% bigger, can't be cached on its own and blocks rendering of the stylesheet or page that contains it. That trade-off pays off for tiny icons, placeholder images and single-file HTML documents, and almost never for photos. To go the other way and turn a Base64 string back into a file, use Base64 to Image; for non-image data, the Base64 Encoder handles plain text and arbitrary files.
Benefits
- Four ready-to-paste outputs, including CSS and HTML snippets.
- The MIME type in the data URI comes from the file's real content, not its extension.
- Shows the size increase and warns when an image is too big to inline sensibly.
Limitations
- Base64 output is about 33% larger than the original file.
- Very large images produce millions of characters; only a preview is shown in the boxes, but Copy and Save include the full text.
Privacy and security
The image is read with the browser's FileReader and encoded in this tab. It is never uploaded, and the encoded text is not stored anywhere.
Read our privacy policy for details about the site as a whole.
Frequently asked questions
What is a data URI?
A data URI is a URL that contains the file itself, such as data:image/png;base64,iVBOR…. Browsers treat it like a link to an image, so it can be used in src attributes and CSS url() values.
Why is the Base64 version bigger than my file?
Base64 represents every 3 bytes with 4 text characters, so the output is about a third larger. Gzip compression on a web server recovers part of that overhead.
Can I use Base64 images in emails?
Support varies: many webmail clients, including Gmail, block data-URI images. For newsletters, linked or attached images are more reliable.