What is Base64 image encoding?
Base64 encoding converts binary data — such as the bytes that make up an image file — into a string of ASCII characters. A Base64-encoded image can be embedded directly into HTML, CSS, or JavaScript without needing a separate file request. The resulting string starts with a data URI prefix like data:image/png;base64, followed by the encoded data. This technique is widely used for small icons, inline email images, and offline-capable web apps.
When to use Base64 for images
Embedding images as Base64 is most practical for small files such as icons, logos, and UI decorations where saving a network request outweighs the increased file size. Base64 encoding increases data size by approximately 33%, so it is generally not recommended for large photographs. Common use cases include CSS background images, HTML email inline attachments, SVG-in-HTML embedding, and storing images in JSON or database fields that only accept text. For large images, a regular <img src="..."> with proper caching is more efficient.
How to use this tool
Click the drop zone or drag any image file onto it. The tool reads the file using the browser's FileReader API, generates the Base64 data URI, and displays a live preview alongside file metadata including filename, size, pixel dimensions, and MIME type. Two outputs are shown: the full data URI (ready to paste into src="" or url() in CSS) and the raw Base64 string without the prefix. Copy either output with the buttons provided. No data is sent to any server — the conversion happens entirely in your browser.
Supported image formats
This tool works with any image format your browser can read, including PNG, JPEG, GIF, WebP, BMP, SVG, and ICO. The MIME type is detected automatically from the file and included in the data URI prefix so the output is always valid and ready to use. SVG files are a special case — they can be embedded as Base64 or as raw URL-encoded SVG depending on your use case, and this tool provides the Base64 version.