Image to Base64 & Base64 to Image Converter

Convert images from a file or clipboard to Base64, or decode Base64 to an image. Runs in your browser; nothing is uploaded.

Image preview
Choose an image above or paste Base64 on the left to preview the image here.

How to convert an image to Base64 and Base64 to an image

  1. Image to Base64 (file or clipboard): choose or drag and drop an image file (PNG, JPG, WebP, GIF, SVG, AVIF, BMP, or ICO), or press Ctrl+V to paste a copied image from your clipboard.
  2. Choose Data URI or Raw Base64: toggle between Data URI (which includes the data:image/...;base64, prefix for HTML and CSS) and Raw Base64 (just the encoded characters for JSON APIs and config files), then click Copy or Download .txt.
  3. Base64 to Image: paste any raw Base64 string, a data:image/...;base64, URI, or even a full HTML <img src="data:..."> tag or CSS url(...) rule into the Base64 pane. The image format is detected automatically, rendered in the Image preview pane with its pixel dimensions and byte size, and ready to save with Download image.

Using Base64 images in HTML, CSS, and JSON

With Data URI selected, you can embed the generated string directly in HTML or CSS without an extra network request:

<!-- HTML img element -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Icon" width="24" height="24" />

/* CSS background-image */
.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...");
}

With Raw Base64 selected, the prefix is omitted so the string can be dropped directly into JSON fields, REST/GraphQL payloads, or MIME attachments.

Automatic format detection from magic bytes

Even when a Base64 string lacks a data:image/...;base64, header, the decoder inspects the first bytes of the binary stream to identify the exact format (PNG, JPEG, WebP, GIF, SVG, AVIF, BMP, or ICO), displays the image on a checkerboard background to reveal alpha transparency, and uses the matching file extension when you click Download image.

Frequently asked questions

What is the difference between a Data URI and a raw Base64 string?
A Data URI prefixes the raw Base64 characters with data:<mime-type>;base64, (for example data:image/png;base64,iVBORw0KGgo...), allowing browsers to use it directly inside HTML <img src="..."> attributes or CSS url(...) rules. Raw Base64 omits that header and is commonly used in JSON payloads, API requests, and database fields.
How does the converter know whether raw Base64 is a PNG, JPEG, WebP, GIF, or SVG?
When you paste raw Base64 without a data:image/...;base64, prefix, the converter inspects the file signature (magic bytes) at the start of the decoded binary data—such as 89 50 4E 47 for PNG, FF D8 FF for JPEG, RIFF...WEBP for WebP, GIF89a for GIF, or an <svg> root element for SVG—to detect the exact format automatically.
When should I embed an image as Base64 instead of linking a separate image file?
Base64 encoding adds roughly 33% to the byte size of an image, so it works best for small icons, logos, placeholders, single-file HTML exports, and email templates where eliminating an extra HTTP request outweighs the larger payload.

More tools