How to Convert an Image to Base64
Drag and drop an image onto the box above, or click it to choose a file from your
device. The image is read locally using your browser's FileReader API
and converted into a Base64-encoded string - no upload required. You'll get both
the raw Base64 string and a ready-to-use CSS background-image snippet.
Using Base64 Images in HTML and CSS
In CSS
Paste the generated snippet directly into your stylesheet:
background-image: url('data:image/png;base64,iVBORw0KGgo...');
In HTML
Use the Base64 string in an <img> tag's src attribute:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="..." />
Embedding small icons or images this way avoids an extra HTTP request, which can slightly improve load times for very small assets. For larger images, a normal file reference is usually more efficient, since Base64 increases the data size by about 33% and can't be cached separately by the browser.
When to Use (and Avoid) Base64 Images
| Good for | Avoid for |
|---|---|
| Small icons, logos, sprites | Large photos or hero images |
| Inline SVGs | Images reused across many pages (lose caching) |
| Email templates | Frequently updated images |
Frequently Asked Questions
This tool supports files up to 5MB. Keep in mind Base64 encoding increases the resulting string size by roughly 33% compared to the original file.
Yes. SVG files convert to Base64 just like raster images, and the resulting data URI works in <img> tags and CSS background-image declarations.
Copy the generated CSS snippet (e.g. background-image: url('data:image/png;base64,...');) and paste it directly into your stylesheet.
No. The file is processed locally using the browser's FileReader API. It's never uploaded, transmitted, or stored anywhere outside your device.