Image to Base64 turns an image into a Base64 string or a ready-to-paste data URL, so you can put it straight into HTML, CSS, JSON or an email template without a separate file. It works with PNG, JPG, GIF, WebP, SVG and any other file up to 20 MB. The image is encoded in your browser and never uploaded.
How to convert an image
- Choose or drop an image under File or image to Base64.
- Leave As a data URL ticked for HTML and CSS, or untick it for raw Base64, as many APIs expect.
- Click Copy, or Download to save the text as a file.
Using the result
In an HTML image tag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Company logo" width="120" height="40">As a CSS background:
.logo { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...") no-repeat; }In JSON, for an API that accepts images:
{ "filename": "logo.png", "content": "iVBORw0KGgoAAAANSUhEUgAA..." }For JSON and most APIs, use plain Base64 without the data: prefix.
When a data URL makes sense
| Good fit | Better as a normal file |
|---|---|
| Icons and logos under a few KB | Photos and large images |
| Email templates that must show images | Images used on many pages |
| Single-file HTML demos and reports | Anything you update often |
| Small images in JSON or a database | Images that should be cached |
A data URL saves one request but makes the HTML or CSS bigger, and the browser cannot cache the image on its own. For anything larger than a small icon, a separate image file is usually faster.
Make it smaller first
Every byte of the image becomes about 1.33 bytes of text. Shrink it before you convert:
- Reduce its pixel size with Resize Image, to the size it is shown at.
- Lower the file size with Compress Image.
- Convert photos to WebP or JPG with the Image Converter; keep PNG for logos with sharp edges.
Turning it back
To get the image back from a Base64 string or a data URL, see Base64 Decode.