How to use
- Drag images onto the drop area, click it to choose files, or paste an image from the clipboard. Several files at once are fine.
- Optionally choose a target format (PNG, JPEG or WebP), adjust the quality and set a maximum width.
- Check the dimensions, original size and encoded size shown for each image.
- Copy or download the output you need: data URI, raw Base64, HTML img tag, CSS background-image or Markdown.
How image to Base64 conversion works
Base64 turns the bytes of an image file into plain text built from 64 characters. Every 3 bytes become 4 characters, so the text is about 33% larger than the file. A data URI adds a short prefix with the MIME type, such as data:image/png;base64,, which lets a browser display the text anywhere it expects an image URL.
The image is read and encoded locally in your browser. It is not uploaded, so private screenshots and unreleased designs stay on your device.
Which output should you copy?
- Data URI for
srcattributes, JavaScript and JSON fields that expect a URL. - Raw Base64 for APIs that want only the encoded bytes, usually next to a separate field for the MIME type or file name.
- HTML img tag to paste straight into a page or template.
- CSS background-image for icons and decorations in a stylesheet.
- Markdown for documentation and notes. Some renderers, including GitHub, do not display data URI images.
Supported formats at a glance
The first characters of a Base64 string reveal the file type, because they encode the format signature.
| Format | MIME type | Base64 starts with |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy or PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | varies |
| TIFF | image/tiff | SUkqAA or TU0AKg |
When inlining an image pays off
Data URIs save a network request and make a file self-contained. That suits small icons and logos of a few kilobytes, single-file HTML reports, tiny blurred placeholders and images sent inside JSON. They are a poor choice for large photos: the extra third in size, no separate browser caching, and a heavier HTML or CSS file that must download before anything renders usually cost more than the request they save. If your site sends a Content-Security-Policy, inline images also need data: in img-src.
Frequently asked questions
Are my images uploaded to a server?
No. The browser reads each file and encodes it on your device. Nothing is sent to base64.is or anywhere else.
Why is the Base64 text larger than the image?
Base64 uses 4 characters for every 3 bytes, so the result is about 33% larger, plus the data URI prefix. To shorten it, set a maximum width or convert to WebP or JPEG with a lower quality.
Can I convert several images at once?
Yes. Select or drop multiple files. Each image gets its own preview, sizes and outputs, each with Copy and Download buttons.
Do Base64 images work in HTML email?
cid: are more reliable.