About the Image to Base64
Encode any image as a Base64 string or data URI, with ready-to-paste snippets for HTML <img> tags and CSS backgrounds.
Key features
- Converts PNG, JPG, GIF, SVG, WebP and ICO to Base64
- Four ready-to-copy formats: data URI, raw Base64, HTML, CSS
- Shows original vs. encoded size
- Image preview
- Encoded locally; nothing uploaded
- One-click copy for each snippet
Embed images directly in code
Base64 encoding converts an image's binary data into plain text. That text can be placed directly into HTML, CSS, JSON, JavaScript or email templates as a data URI, so the image loads without a separate file or HTTP request.
Output formats
| Format | Example | Use it in |
|---|---|---|
| Data URI | data:image/png;base64,iVBOR… | Anywhere a URL goes |
| Base64 only | iVBORw0KGgo… | APIs and JSON fields expecting raw Base64 |
HTML <img> | <img src="data:image/png;base64,…" /> | Web pages, email templates |
| CSS background | background-image: url("data:…"); | Stylesheets |
When Base64 images make sense
- HTML emails, where external images are often blocked by default.
- Small icons and UI sprites, saving a request for each tiny file.
- Single-file HTML exports, reports and offline pages.
- APIs that accept image uploads as Base64 strings in JSON (including many AI vision APIs).
- Storing small images in databases, configs or localStorage.
When to avoid it
| Downside | Why |
|---|---|
| ~33% larger | Base64 overhead |
| No separate caching | The image re-downloads with every page or CSS change |
| Slower first render for large images | Blocks HTML/CSS parsing |
| Harder to maintain | Huge unreadable strings in your code |
Rule of thumb: inline images under about 4 KB; serve anything larger as a normal file, ideally as WebP.
Related tools
Decode Base64 back into an image with Base64 to Image. Shrink images before encoding with the Image Compressor. Encode JSON instead with JSON to Base64.
How to use the Image to Base64
- Drag and drop your files into the upload area, or click Choose files.
- Set any options, such as quality, page size or page ranges.
- Click the convert button. Processing happens right in your browser.
- Download each result individually, or all of them as a ZIP.