Image to Base64 Converter
Encode images to Base64 for embedding in HTML, CSS, and Markdown. Batch support + reverse decode — nothing leaves your browser.
Original
Encoded
Overhead
Raw Base64
Data URI
HTML <img>
CSS background-image
Markdown Image
Free Image to Base64 Converter — Encode Any Image Online
Base64 encoding transforms binary image data into a text string you can embed directly in HTML, CSS, JavaScript, or email. This tool handles PNG, JPG, GIF, WebP, SVG, BMP, and ICO formats — producing Raw Base64, Data URIs, HTML img tags, CSS background-image values, and Markdown syntax in one click. All processing is 100% client-side: nothing is uploaded, stored, or sent to any server.
The primary use case for Base64 images is reducing HTTP requests for small, frequently-used assets like icons, logos, and UI elements. When embedding a small image in CSS or HTML saves a round-trip to the server, the 33% size overhead is a worthwhile trade-off. For large photos, however, keep in mind that Base64 encoding makes the data ~33% larger than the original file — and increases parsing overhead for the browser. For photos and large images, use regular image files with proper compression instead.
Frequently Asked Questions
What is Base64 encoding for images?+
Base64 encoding converts binary image data into a text string using 64 ASCII characters. This lets you embed images directly in HTML, CSS, JavaScript, or any text-based format without needing separate image files. The browser decodes the Base64 string back to binary to display the image.
When should I use Base64 images?+
Base64 images are best for small images that are integral to a page's design — icons, logos, small UI elements. They reduce HTTP requests by eliminating separate image files. They're also useful for email HTML, data URIs in CSS, or when hosting images separately isn't possible. Avoid using Base64 for large photos — it adds ~33% overhead and slows page load.
Why is Base64 33% larger than the original file?+
Base64 uses 64 different characters to represent data, which is less efficient than raw binary (which uses 256 characters). Every 3 bytes of binary data become 4 characters in Base64, plus padding. This means a 100KB image becomes ~133KB when Base64 encoded. Keep files under 100KB for Base64 embedding — smaller images benefit most from eliminating the HTTP request.
How do I embed a Base64 image in HTML?+
Use the Data URI format from this tool in your HTML img tag: <img src="data:image/png;base64,iVBORw0KGgo...">. Replace 'image/png' with your image's MIME type. This works in all modern browsers — the browser decodes the Base64 string and renders the image inline.
How do I use Base64 images in CSS?+
Use the CSS output from this tool in your stylesheet: background-image: url('data:image/png;base64,iVBORw0KGgo...');. This works for background-image, list-style-image, border-image, and content. Use it for small icons and logos where reducing HTTP requests matters more than file size.
How do I decode a Base64 string back to an image?+
Switch to Decode mode, paste your Base64 string (including the data:image/...;base64, prefix if present), and click Decode. The tool will render the image and let you download it. Works for PNG, JPG, WebP, GIF, SVG, BMP, and ICO inputs.
Is my image data kept private?+
Yes. All processing happens entirely in your browser using the FileReader and Canvas APIs. Your images are never sent to any server, never stored, and never shared. As soon as you close or refresh the page, all data is gone.