Base64 Image Encoder

Image to a Base64 data URL for CSS or HTML, or decode one back.

About Base64 Image Encoder

A Base64 image encoder that turns a PNG, JPEG, GIF, WebP or SVG into a data URL for HTML or CSS, and decodes a data URL or Base64 back into an image file.

How to use

  1. In Encode, choose or drop an image up to 5 MB. You get the full data URL, the raw Base64, an <img> tag and a CSS background-image rule, each with Copy, plus a preview and the size before and after.
  2. In Decode, paste a data URL (data:image/png;base64,…) or bare Base64. The image type is detected, the preview appears, and Download saves the file with the right extension.

What it does

  • Encoding uses the browser's own FileReader, so the output is exactly what readAsDataURL produces.
  • Base64 stores 3 bytes in 4 characters, so the text is about 33% larger than the file; the Larger by figure shows the real number for your image.
  • Decoding ignores whitespace and line breaks, then checks the first bytes of the result to tell PNG, JPEG, GIF, WebP, BMP, ICO, AVIF and SVG apart, falling back to the type named in the data URL. Anything else is reported as not an image.
  • Percent-encoded (non-Base64) data URLs, as some SVG tooling emits, are not decoded.

Example

pixel.png (68 bytes)
→ data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==
→ <img src="data:image/png;base64,iVBOR…" alt="">

Privacy

The file is read and encoded in the browser. No request is made, and nothing is stored.

Frequently asked questions

What is a Base64 image?
An image file whose bytes are written out as Base64 text, usually inside a data URL such as data:image/png;base64,iVBOR…. Browsers render it like any other image source, but the data lives inside the HTML or CSS instead of a separate file.
Should I use Base64 images in CSS?
Only for very small images, roughly under a few kilobytes, such as icons or a tiny placeholder. The text is about a third larger than the file, cannot be cached separately from the stylesheet, and must be decoded on every load, so for anything bigger a normal image file is faster.
How do I convert an image to Base64 in JavaScript?
In the browser, create a FileReader and call readAsDataURL(file); the onload result is the data URL. In Node, read the file into a Buffer and call buffer.toString("base64"), then prefix it with data:<mime type>;base64,.
Why is a Base64 image larger than the original?
Base64 uses 64 printable characters, so each character carries 6 bits and every 3 bytes become 4 characters. That is a fixed 33% overhead before padding, and gzip on the wire recovers only part of it.