Hunt
Skip to content

Image to Base64

Choose or drop an image to get it as a data URL you can paste into CSS, HTML, Markdown or JSON, without a separate file. The tool shows the image's size and how much bigger Base64 makes it, and for SVGs it also gives a URL-encoded data URI, which is usually smaller. The image never leaves your browser.

Runs in your browser

or drop it here. PNG, JPEG, GIF, WebP, AVIF, SVG and ICO. It isn't uploaded.

When to inline images

A data URL puts the image inside the page or stylesheet, which saves a request: good for small icons, placeholders and email templates. But Base64 is about a third larger than the file, it's downloaded again with every page or stylesheet that contains it, and it can't be cached separately. Keep inline images small, around 10 KB or less; serve larger images as files.

How to use the Image to Base64

  1. Choose or drop an image, or press Sample.
  2. Check its size; the tool warns when it's large for a data URL.
  3. Add alt text for the HTML and Markdown snippets.
  4. Copy the data URL, the Base64, or a ready-made snippet.

Examples

A small PNG as a data URL

Input
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAMUlEQVR42mNQTX5NEmKgpob/SIBYG9BUj2ogWQOmHLU1YEpjNYIBT3LAVE3txIcVAQBxE6juTdcndAAAAABJRU5ErkJggg==
Output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAMUlEQVR42mNQTX5NEmKgpob/SIBYG9BUj2ogWQOmHLU1YEpjNYIBT3LAVE3txIcVAQBxE6juTdcndAAAAABJRU5ErkJggg==

A 106-byte, 16 × 16 icon (shown here as Base64). The data URL adds the type in front.

An SVG as a compact data URI

Input
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#2563eb"/>
</svg>
Output
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232563eb'/%3E%3C/svg%3E

# must be escaped as %23, or the browser treats the rest as a fragment. Double quotes become single quotes so the URI fits in url("…").

SVGs don't need Base64

SVG is text, so it can go in a data URI almost as it is: only characters that are special in URLs, such as #, < and >, need escaping. The result is smaller than Base64 and still readable. Use it in CSS with url("…").

Options

Alt text
Used in the HTML and Markdown snippets. Describe what the image shows, or leave it empty for decorative images.

Limitations

  • Images up to 10 MB.
  • The image is encoded as it is: it isn't resized or compressed.

Frequently asked questions

Is my image uploaded?

No. The image is read and encoded in your browser; it never leaves your device.

Why is the Base64 bigger than the image?

Base64 uses 4 characters for every 3 bytes, so it's about 33% larger, plus the data:image/png;base64, prefix. Gzip on the server recovers some of that.

How do I turn Base64 back into an image?

Use Base64 to Image, which previews it and lets you download the file.