DevKit

Image to Base64 Encoder & Decoder

Drop an image to get its data URI, raw Base64, a CSS background rule and an tag — or paste a data URI to preview and download the image.

Loading tool…

About the Image to Base64

A data URI (RFC 2397) embeds a file directly in HTML or CSS: data:image/png;base64,iVBORw0KGgo…. The browser decodes it without an extra HTTP request, which suits small icons, email templates and single-file demos. The cost is size: Base64 adds about 33%, the image cannot be cached separately and large inline images delay parsing of the document, so keep inlined assets to a few kilobytes.

This tool reads the file with the File API, detects the MIME type (from the file or its magic bytes), and shows the original size, the data URI size and the pixel dimensions. The <img> snippet includes width and height so the page does not shift while it loads.

In decode mode, paste a full data URI or bare Base64. The format is recognised from the first bytes (PNG 89 50 4E 47, JPEG FF D8 FF, GIF, WebP, AVIF, BMP, ICO or SVG markup) and you can download the result with the correct extension. For SVG, a URL-encoded data URI is often smaller than Base64; both forms are accepted when decoding.

How to use it

  1. Drop an image on the box or click “choose a file”.
  2. Copy the data URI, raw Base64, CSS rule or <img> tag.
  3. To go the other way, switch to “Base64 → Image” and paste a data URI.
  4. Check the preview, then click Download to save the image.

Frequently asked questions

When should I inline an image as a data URI?
For very small, frequently used images (a few KB) such as icons in CSS or images in HTML email. Larger images are better served as separate files so they can be cached and loaded in parallel.
Why is the Base64 string bigger than my file?
Base64 stores 3 bytes in 4 characters, so it is about 33% larger, plus the short data: prefix. Gzip or Brotli on the HTML/CSS recovers part of that.
Is my image uploaded to a server?
No. The file is read by your browser with the File API and converted locally.
How do I use a data URI in CSS?
Put it inside url(): background-image: url("data:image/png;base64,…");. The CSS output box gives you a ready rule.

Related tools

Base64 Encode/DecodeConvert text or any file to Base64 and back.Favicon GeneratorMake a favicon from one or two letters or your own image, then download favicon.ico, all…URL Encode/DecodePercent-encode text for use in a URL, or decode %XX sequences back to readable text.CSS MinifierShrink stylesheets by removing comments and whitespace and shortening values.