Base64 Image Converter
Convert images to Base64 data URIs, or decode Base64 back to images — runs in your browser
Click to browse or drag and drop an image
PNG, JPG, GIF, WebP, SVG, ICO supported
What are Base64 Images?
Inline embedding
Base64 encoding converts binary image data into ASCII text that can be embedded directly in HTML, CSS, JSON, or XML — eliminating the need for a separate image file request.
~33% size overhead
Base64 encoding increases file size by approximately 33% compared to the original binary. Best suited for small icons (under 5 KB) where saving an HTTP request is worth the trade-off.
No browser caching
Unlike external image files, Base64-embedded images cannot be cached separately. Each page load re-downloads the encoded data. Consider this when embedding large or frequently reused images.
Frequently Asked Questions
A Base64 image is a binary image file that has been encoded into a Base64 ASCII string. This string can be embedded directly in HTML, CSS, or JSON without linking to an external file. The encoded image is typically prefixed with a data URI like data:image/png;base64, followed by the encoded data.
Use Base64 images for small icons, logos (under 5 KB), inline SVGs, or email templates where external resources are blocked. They are also useful when generating dynamic images in JavaScript or sending image data in JSON APIs. Avoid Base64 for large images — the ~33% size increase and lack of browser caching make it inefficient.
This tool supports all common image formats browsers can display: PNG, JPEG/JPG, GIF (including animated), WebP, SVG, ICO, BMP, AVIF, and TIFF. The MIME type is automatically detected from the file extension, the browser's File API, or the data URI prefix when decoding.
Yes. Base64 encoding increases the size of binary data by approximately 33%. A 100 KB PNG image will become roughly 133 KB as a Base64 string. This is because Base64 encodes every 3 bytes of binary data into 4 ASCII characters. This size increase is displayed in the stats bar when you encode an image above.
Use the full data URI as the src attribute of an <img> tag: <img src="data:image/png;base64,iVBOR..." alt="description">. The image is embedded directly in your HTML and requires no external file. The tool above generates this snippet automatically for you.
Use the data URI inside the url() function: background-image: url("data:image/png;base64,iVBOR..."). This is commonly used for small repeating patterns, icon sprites, custom cursors, and SVG backgrounds that need to be embedded in a stylesheet.
A data URI (data URL) is a URI scheme defined in RFC 2397 that allows data to be embedded inline in web documents. The format is data:[media-type][;base64],<data>. For example: data:image/png;base64,iVBOR... embeds a PNG image directly without a separate HTTP request.
This tool runs entirely in your browser using JavaScript's FileReader API. No image data is ever sent to any server. Your images never leave your device. However, be cautious with sensitive images: Base64 encoding is not encryption — anyone with the encoded string can decode it back to the original image using tools like this one.