About the Image to Base64 Converter
Inlining a small image as Base64 removes an HTTP request, which is worth it for icons, tiny logos and email images that cannot rely on external files. This tool reads the image you drop, choose or paste, encodes its bytes, and wraps the result in the form you need: a raw data URI, a ready-to-paste background-image rule, an <img> tag, a JSON object with the file metadata, or the bare Base64.
PNG, JPEG, GIF, WebP, SVG and BMP are all supported, and the correct MIME type is taken from the file so the data URI works immediately. Because the file is read locally, images containing anything sensitive are safe to encode here.
Base64 inflates size by about a third, so it suits images under roughly 10 KB; larger images are better served as normal files. Data URIs also cannot be cached separately by the browser. The Base64 to Image tool decodes a data URI back to a viewable, downloadable image.
How to use
- Drop an image on the pane, paste one from the clipboard, or click to choose a file.
- Pick the output format: data URI, CSS, HTML, JSON or raw.
- Copy the result into your stylesheet, page or code.
Common questions
- Is my image uploaded to a server?
- No. It is read and encoded by JavaScript in the page; nothing is sent anywhere.
- When should I inline an image instead of linking it?
- For very small images (icons, tiny logos) or for email, where external images are often blocked. Large images should stay as files so the browser can cache them.
- Which formats are supported?
- Any image the browser can read: PNG, JPEG, GIF, WebP, SVG, BMP and AVIF.
- Why is the Base64 longer than the file?
- Base64 uses four characters for every three bytes, so it is about 33 percent larger.