Image to Base64
Encode any image to a Base64 string with five output formats: data URI, plain Base64, CSS background-image, HTML img tag, and Markdown. Drag and drop, file picker, or clipboard paste supported.
🖼️
Drop an image here or
JPG, PNG, GIF, WEBP, SVG, ICO, BMP, AVIF. Files never leave your browser.
The Image to Base64 Converter is a free, browser-based tool that encodes any image file as a Base64 string and formats it for immediate use in HTML, CSS, JavaScript, or Markdown. Drop an image, choose your output format, and copy the result to your clipboard. All processing runs entirely in your browser — nothing is uploaded.
Features
| Feature | Detail |
|---|---|
| Drag and drop | Drop an image file directly onto the upload area |
| File picker | Click to select a file from your device |
| Clipboard paste | Paste a copied image directly from the clipboard (Ctrl+V / Cmd+V) |
| Output formats | Data URI, plain Base64, CSS background-image, HTML img tag, Markdown image |
| Line wrap | None, 76-character MIME-standard wrap, or 64-character wrap |
| Live preview | Displays the image with a transparency checkerboard background |
| Stats bar | File name, MIME type, dimensions, original size, Base64 size, and size overhead |
| Copy to clipboard | One-click copy of the full output string |
| Format switching | Switch output format without re-loading the file |
| Supported formats | JPG, PNG, GIF, WEBP, SVG, ICO, BMP, AVIF, and any other image type the browser supports |
How to Use
- Drag an image file onto the upload area, click to choose a file, or paste an image from the clipboard.
- A preview appears alongside the image stats.
- Choose an output format from the Output format dropdown.
- Optionally set a Line wrap width.
- Click Copy to copy the result to your clipboard.
Output Formats
Data URI (default)
A complete, self-contained URI that can be used directly as the src attribute of an <img> element or anywhere a URL is expected:
data:image/png;base64,iVBORw0KGgoAAAANS...Plain Base64 only
The raw Base64 string without the data: prefix. Use this when the protocol has its own envelope for specifying the MIME type, such as email attachments or custom API payloads.
CSS background-image
Ready to paste into a CSS rule:
background-image: url("data:image/png;base64,iVBORw0...");HTML img tag
A complete, self-contained <img> element. Useful for embedding images in static HTML without an external file reference:
<img src="data:image/png;base64,iVBORw0..." alt="">Markdown image
A Markdown image reference using the data URI as the source:
Line Wrapping
Base64 strings used in email (MIME) are conventionally wrapped at 76 characters per line. For most web use cases (HTML, CSS, JavaScript), no line wrapping is needed. Choose:
- None — a single continuous string, suitable for HTML and CSS
- 76 chars — MIME-standard wrap for email or legacy systems
- 64 chars — used by some older protocols and PEM-format files
Base64 Size Overhead
Base64 encoding expands binary data by approximately 33%. Every 3 bytes of binary data become 4 Base64 characters. The stats bar shows the exact overhead percentage for your file so you can make an informed decision about whether inline encoding is appropriate.
When to Use Inline Base64 Images
Embedding images as Base64 is beneficial in specific scenarios:
- Email HTML: External images are often blocked by email clients; embedded Base64 images are always shown.
- Single-file HTML: Creating a truly self-contained HTML document with no external dependencies.
- CSS sprites for small icons: Embedding small icons as data URIs avoids extra HTTP requests.
- Offline or air-gapped environments: When network access is unavailable or restricted.
However, Base64-encoded images are not cached by the browser separately from the document, so they are not suitable for large images or images used on multiple pages.
Frequently Asked Questions
What image formats are supported?
Any image format that the browser's FileReader API supports, including JPG, PNG, GIF, WEBP, SVG, ICO, BMP, and AVIF. The MIME type is read from the file and included in the data URI automatically.
Can I paste an image directly from the clipboard?
Yes. Copy an image in any application (e.g. screenshot, right-click copy image) and press Ctrl+V (or Cmd+V on Mac) while the page is open. The image will be loaded and encoded automatically.
Is there a file size limit?
There is no server-side limit because all processing runs locally in your browser. Very large images (several megabytes) will still encode quickly, but the resulting Base64 string will be proportionally larger and may be impractical to embed inline.
Why is the Base64 string about 33% larger than the original file?
Base64 encodes binary data using only 64 printable ASCII characters. Each group of 3 bytes (24 bits) is represented as 4 characters (24 bits encoded as 4 x 6-bit groups). This 4/3 ratio gives approximately 33% overhead.
Can I use the output in a JSON API payload?
Yes. Use the Plain Base64 only format. Many APIs accept Base64-encoded binary data with the MIME type specified in a separate field. Alternatively, use the Data URI format if the API expects a self-describing data URI string.
Does this tool support SVG images?
Yes. SVG files are read and encoded as Base64 with the image/svg+xml MIME type. Note that for inline SVG in HTML you can also embed the raw SVG markup directly, but Base64 encoding ensures compatibility in all contexts including CSS and <img> tags.