What Is Image to Base64 Conversion?
Converting an image to Base64 creates a data URI — a text string that embeds the image directly in your HTML or CSS without requiring a separate file or HTTP request. This tool reads your image locally using the FileReader API, encodes it to Base64, and outputs it in Data URI, CSS background-image, HTML img tag, or raw Base64 format.
When to Use Base64 Images
- → Small icons and decorative elements — under 2-5KB, the saved HTTP request outweighs the size increase.
- → CSS background patterns — tiny repeating patterns work well as inline data URIs.
- → Email HTML — use with care: Gmail (all platforms) and Outlook for Windows 2007-2016 do not display Base64 data-URI images; attach email images as CID or host them.
- → Single-file HTML — documentation or reports that need to be self-contained.
How to Use This Image To Base64
- Upload or drag an image — Select a PNG, JPEG, GIF, SVG, or WebP image from your device, or drag and drop it onto the tool.
- View the Base64 output — The tool instantly converts your image to a Base64-encoded string, including the data URI prefix.
- Choose the output format — Copy as a complete data URI (with
data:image/png;base64,prefix) or as raw Base64 text. - Paste into your code — Use the data URI directly in HTML
<img>src attributes, CSS background-image properties, or email templates.
Worked example: what Base64 costs, byte for byte
Base64 turns every 3 bytes into 4 text characters, rounding up to a whole 4-character block, and a data URI adds the prefix data:image/png;base64, (22 characters). We encoded files of three sizes and counted:
| File | Original | Base64 characters | Full data URI | Overhead |
|---|---|---|---|---|
| 1 KB icon | 1,024 bytes | 1,368 | 1,390 | +33.6% |
| 4 KB logo | 4,096 bytes | 5,464 | 5,486 | +33.4% |
| 10 KB image | 10,240 bytes | 13,656 | 13,678 | +33.4% |
So the rule of thumb holds: about a third larger, plus the prefix. The bigger cost is caching. A separate image file is downloaded once and reused on every page; a data URI is re-sent inside every page or stylesheet that contains it. That is why data URIs suit icons of a few kilobytes that appear on one page, and why anything larger or shared should stay a normal file.
Email is the exception people get wrong. Gmail does not display Base64 data-URI images on any platform, and neither do Outlook for Windows 2007-2016 or Windows Mail; Apple Mail, Outlook.com and Thunderbird do. For logos in email, attach the image inline (CID) or link to a hosted file.
Sources, checked October 11, 2026: byte counts measured with Python's base64 module; RFC 4648 §4 (Base64); Can I email: Base64 image format (Gmail last tested May 2024).
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools