Image to Base64 and data URIs
Converting an image to Base64 lets you embed it directly in HTML, CSS, Markdown, JSON or an email template instead of linking to a separate file. The result is usually used as a data URI — data:image/png;base64,… — which browsers treat exactly like an image URL. This tool reads your image locally, detects its type and gives you the Base64 in the format you need, with a preview to confirm it worked.
Output formats
For a 1×1 pixel PNG named dot.png:
| Output | Result |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg== |
| HTML <img> tag | <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="dot.png"> |
| CSS background-image | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="); |
| Markdown image |  |
Raw Base64 gives just the encoded data without the data: prefix, for APIs that take the MIME type in a separate field.
When embedding images makes sense
- Small icons and UI sprites (a few kilobytes) in CSS, saving an HTTP request each.
- Single-file documents: HTML reports, offline pages or notebooks that must work without external files.
- APIs that accept images as JSON strings, such as many image-processing and AI services.
- Placeholders like tiny blurred previews shown while the full image loads.
When it does not
- Base64 is about 33% larger than the original file.
- An embedded image cannot be cached separately; it is downloaded again with every page or stylesheet that contains it.
- Large data URIs make HTML and CSS slower to parse. As a rule of thumb, keep embedded images under roughly 5–10 KB and serve larger ones as files.
- Email support is mixed: several popular email clients do not display data URI images, so linked or attached (CID) images are more reliable for newsletters.
Before you paste the output
- Fix the alt text. The HTML
<img>output uses the file name as itsaltvalue, as inalt="dot.png". Replace it with a short description of the picture, or withalt=""if the image is purely decorative, so screen readers do not read out a file name. - Consider plain text for SVG icons. SVG is already text, so in CSS you can also embed it URL-encoded as
data:image/svg+xml,%3Csvg…. That form is often shorter than Base64 and compresses better with gzip, while Base64 is simpler because you never have to worry about which characters need encoding. - Match the MIME type. The data URI prefix comes from the detected file type. If you only copy the raw Base64 into an API, send the same type (for example
image/webp) in the field the API provides, or the receiving service may reject the image.
Doing it in JavaScript
FileReader.readAsDataURL(file) produces the same data URI as this tool, keeping the original bytes. canvas.toDataURL('image/png') is different: it re-encodes whatever is drawn on the canvas, which changes the file size and drops metadata — useful for resizing, but not an exact copy.
Tips
Optimise the image before converting it — resize it to the displayed size with the Image Resizer and choose an efficient format. For vector graphics, SVG to Base64 also accepts pasted SVG code. To turn a Base64 string back into a picture, use Base64 to Image.
Your image is processed entirely in your browser and never uploaded.