Image to Base64 Converter
Convert any image to a Base64 string for embedding directly in HTML, CSS, or JSON — no server required. Get the raw Base64 string, full data URI, ready-to-paste <img> tag, and CSS background-image snippet all at once. Also converts Base64 back to a downloadable image.
Image ↔ Base64
Upload Image
Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG, AVIF — any image type
Output Snippets
Upload an image to see the output
Last updated: May 24 2026
Reviewed by the QuickTooly Team
Related Developer & Image Tools
Explore more tools for working with images and data formats:
- File Hash (SHA-256 / MD5) — generate a cryptographic hash fingerprint for any file
- Image Converter — convert images between PNG, JPG, WebP, AVIF, and more
- Image Compressor — reduce image file size before embedding as Base64
- JSON to TypeScript — generate TypeScript interfaces from JSON data structures
Image to Base64 Guide
What Is Base64 Encoding?
Base64 is a binary-to-text encoding scheme that represents binary data (like image bytes) using only 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). Because it contains no special characters, Base64 can be safely embedded inside HTML attributes, CSS rules, JSON strings, XML documents, and email bodies — anywhere text is expected.
A data URI combines the MIME type with the Base64 payload: data:image/png;base64,iVBOR…. Browsers treat this string as a complete image source, eliminating the need for a separate HTTP request.
When Should You Use Base64 Images?
Good use cases
- Small icons and logos (<10 KB) — eliminates a render-blocking HTTP request; net performance gain.
- Email HTML — many email clients block external image requests; inline Base64 ensures the image always displays.
- Single-file HTML exports — embedding assets keeps the file self-contained and portable.
- CSS sprites and data URIs — background patterns, loading spinners, and small decorative images load instantly from the stylesheet.
Avoid for large images
Base64 inflates file size by ~33%. A 100 KB photo becomes ~133 KB of text, cannot be browser-cached separately, and must be parsed on every page load. For large images, serve them from a CDN with proper cache headers instead.
How This Converter Works
Image → Base64
The browser's built-in FileReader.readAsDataURL() API reads the raw bytes of the uploaded file and returns a complete data URI. This tool then splits off the prefix to give you the raw Base64 string separately, and assembles the HTML and CSS snippets for you. Everything runs locally in your browser — the image is never uploaded to any server.
Base64 → Image
Paste either a raw Base64 string or a full data URI. If you paste raw Base64, the tool tries to auto-detect the image type from the first few bytes (the "magic bytes"). The decoded image is rendered directly in the browser; click Download to save it.
Frequently Asked Questions
Why is my Base64 image larger than the original?
Base64 encodes every 3 bytes of binary data as 4 ASCII characters, adding ~33% overhead. This is unavoidable with standard Base64. The encoded size shown in the file info panel accounts for this.
Is my image uploaded to your servers?
No. All conversion happens entirely in your browser using the FileReader API. Your image data never leaves your device.
Which image formats are supported?
Any format your browser can display: PNG, JPEG, GIF, WebP, AVIF, SVG, BMP, ICO, and TIFF. The MIME type is preserved in the data URI so browsers know how to decode it.
How do I use a Base64 image in JavaScript/React?
Assign the data URI string to an img element's src: <img src={dataUri} />. In CSS, use it as a background-image: url("data:..."). In JSON APIs, store the raw Base64 string in a field and reconstruct the data URI on the client.
What is the maximum image size I can convert?
There is no hard limit set by this tool — it is bounded only by your browser's available memory. In practice, images up to ~20 MB convert reliably. Very large images may slow down or crash older devices; compress before converting if needed.
Can I use a Base64 image with a Content Security Policy (CSP)?
Yes, but you need to allow data: URIs in your CSP img-src directive: img-src 'self' data:. Be careful — allowing data: URIs in script-src or style-src is a security risk.