Skip to content
HTMLSuite
Menu

Image to Base64 Converter

Convert an image to Base64: upload, drop or paste it to get the data URI, CSS and HTML snippets.

Preview of sample.png
File
sample.png
Type
image/png
Original
196 bytes
Base64
264 bytes (+35%)

Base64 is about 33% larger than the file: every 3 bytes become 4 characters. Inline only small images; link larger ones as normal files.

How to convert an image to Base64

  1. Press Choose image, drag a file onto the tool, or copy an image and paste it with Ctrl+V.
  2. The preview and four outputs appear at once: raw Base64, the data URI, a CSS background-image rule and an HTML <img> tag.
  3. Copy the one you need with its Copy button.

Using a Base64 image in HTML and CSS

HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Logo">
CSS
.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…");
  background-size: contain;
}
JSON (raw Base64 for an API)
{
  "filename": "logo.png",
  "content": "iVBORw0KGgoAAAANSUhEUgAA…"
}

When to inline images as Base64

A data URI saves one HTTP request, but the image grows by about 33% and can't be cached separately from the page or stylesheet that contains it. It pays off for small icons, placeholders and email templates where external images are blocked. For photos and anything over a few kilobytes, a normal image file is faster.

  • Good: tiny icons and logos, CSS backgrounds, single-file HTML documents.
  • Good: images sent in JSON to an API that expects Base64.
  • Avoid: large photos, images reused on many pages, responsive image sets.

Other Base64 tools

Check an existing Base64 image with Base64 to image, or encode plain text with the Base64 encoder. Paste the generated <img> tag into the online HTML editor to see it in a page right away.

Frequently asked questions

How do I convert an image to Base64?
Choose an image, drop it onto the tool or paste it with Ctrl+V (Cmd+V on a Mac). The Base64 string, data URI, CSS and HTML snippets appear immediately, each with a Copy button.
What is the difference between Base64 and a data URI?
The data URI is the Base64 string with a prefix that names the file type, such as data:image/png;base64,. Browsers need that prefix to show the image, so use the data URI in HTML and CSS and the raw Base64 for APIs and JSON.
Why is the Base64 bigger than the image?
Base64 stores 3 bytes in 4 characters, so it is about 33% larger than the original file. That’s why inlining only makes sense for small images such as icons; larger images load faster as separate files.
Which image types can I convert?
Any image your browser can open, including PNG, JPG, GIF, WebP, SVG, ICO and AVIF, up to 10 MB. The MIME type in the data URI is taken from the file’s actual contents.
Are my images uploaded?
No. The file is read and encoded by your browser. It never leaves your device.

Related tools