Skip to content

Guides

Base64 images and data URIs explained

Updated 21 October 2026

Tool for this guide: Image to Base64

Short answer: Base64 writes an image as plain text so it can be embedded straight into HTML, CSS, JSON or an email without a separate file. Convert with image to Base64, and turn text back into a file with Base64 to image. Use it only for small images, because the text is about 33% larger than the file.

What a data URI looks like

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

The header says the type (image/png) and encoding (base64); the rest is the image.

How to use it

WhereCode
HTML<img src="data:image/png;base64,…" alt="">
CSSbackground-image: url("data:image/png;base64,…");
JSON"icon": "data:image/png;base64,…"

The converter gives you the complete tag or rule to copy.

When to embed, and when not to

Good ideaBad idea
Small icons and logos (a few KB)Photos and large images
Email templates that must show images offlineImages used on many pages (they can't be cached separately)
Single-file HTML demosAnything over about 10 KB

Step by step: image to Base64

  1. Open image to Base64 and add any image, including SVG and ICO.
  2. Choose plain Base64, a data URI, an HTML img tag or a CSS background.
  3. Copy it, or download it as a text file.

Step by step: Base64 to image

  1. Open Base64 to image and paste the text, with or without the data:image/…;base64, prefix.
  2. Check the preview; the type is detected automatically.
  3. Download the image with the right file extension.

Both tools run in your browser, so nothing is uploaded.

Questions

Why won't my Base64 decode?

The text may be cut off or contain characters that aren't Base64. Copy the whole string; spaces and line breaks are fine.

Should I compress before converting?

Yes. Compress the image first, so the Base64 text is as short as possible.

Try it now

Turn an image into a Base64 string or data URI, ready to paste into HTML, CSS, JSON or email templates.

Open image to base64