Base64 images and data URIs explained
Updated 21 October 2026
Tool for this guide: Image to Base64
Short answer: Base64 writes an image as plain text so it can be embedded straight into HTML, CSS, JSON or an email without a separate file. Convert with image to Base64, and turn text back into a file with Base64 to image. Use it only for small images, because the text is about 33% larger than the file.
What a data URI looks like
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...The header says the type (image/png) and encoding (base64); the rest is the image.
How to use it
| Where | Code |
|---|---|
| HTML | <img src="data:image/png;base64,…" alt=""> |
| CSS | background-image: url("data:image/png;base64,…"); |
| JSON | "icon": "data:image/png;base64,…" |
The converter gives you the complete tag or rule to copy.
When to embed, and when not to
| Good idea | Bad idea |
|---|---|
| Small icons and logos (a few KB) | Photos and large images |
| Email templates that must show images offline | Images used on many pages (they can't be cached separately) |
| Single-file HTML demos | Anything over about 10 KB |
Step by step: image to Base64
- Open image to Base64 and add any image, including SVG and ICO.
- Choose plain Base64, a data URI, an HTML img tag or a CSS background.
- Copy it, or download it as a text file.
Step by step: Base64 to image
- Open Base64 to image and paste the text, with or without the
data:image/…;base64,prefix. - Check the preview; the type is detected automatically.
- Download the image with the right file extension.
Both tools run in your browser, so nothing is uploaded.
Questions
Why won't my Base64 decode?
The text may be cut off or contain characters that aren't Base64. Copy the whole string; spaces and line breaks are fine.
Should I compress before converting?
Yes. Compress the image first, so the Base64 text is as short as possible.
Try it now
Turn an image into a Base64 string or data URI, ready to paste into HTML, CSS, JSON or email templates.
Open image to base64