Image to Base64 Converter
Drop an image to get its Base64 data URL — or paste Base64 to decode it back to an image.
Upload Image
Drag & drop an image here, or click to browse
PNG, JPEG, GIF, WebP, SVG supported
About this tool
Convert any image to a Base64-encoded data URL for use directly in HTML, CSS, or JavaScript without a server. Supports PNG, JPEG, GIF, WebP, SVG, and more. Also decodes Base64 strings back to viewable images.
How to use it
Quick steps to get the most out of this utility.
- 1
Upload an image
Drag and drop any image onto the upload area, or click to browse.
- 2
Copy the data URL
Grab the full data:image/... string for use as an img src or CSS background-image.
- 3
Or copy Base64 only
Some tools only want the raw Base64 without the MIME prefix.
- 4
Decode back
Switch to Base64 → Image mode to preview and download an encoded image.
Practical uses of image Base64
- HTML email: embed images inline so they display even when a mail client blocks external URLs.
- Single-file apps: bundle all assets into one HTML file with no external dependencies.
- CSS sprites replaced: inline small icons as background-image without an extra HTTP request.
- localStorage: persist small images across sessions by storing the Base64 string.
Frequently asked questions
What is an image data URL?+
A data URL embeds the image's binary content directly in a string using Base64 encoding, prefixed with the MIME type (e.g., data:image/png;base64,...). Browsers can use this string as an img src without fetching from a server.
Why does Base64 increase file size?+
Base64 represents every 3 bytes of binary data as 4 ASCII characters, adding roughly 33% overhead. A 100 KB image becomes about 133 KB as a Base64 string — so use data URLs only for small images to avoid performance penalties.
Which image formats are supported?+
Any image format your browser supports: PNG, JPEG/JPG, GIF, WebP, SVG, BMP, ICO, and AVIF. The MIME type is auto-detected from the uploaded file.
Is my image uploaded to a server?+
No. Encoding and decoding happen entirely in your browser using the FileReader API and atob/btoa. Your image never leaves your device.
When should I use Base64 images?+
Use them for small UI icons (under 2 KB) in CSS or HTML to eliminate HTTP requests, for email HTML images that must be self-contained, and for local testing when you cannot host assets.
Keep exploring
More utilities and reading from Toolisk.