Skip to content
tools.best

Browse all tools

Base64 to Image Converter

Paste Base64 image data, with or without the data URL prefix. The image appears next to it and can be saved as a file.

Runs in your browser. The image data is not uploaded. Sources: RFC 4648, RFC 2397 Updated

220 characters
ImagePNG · 64 × 64 px · 163 bytes
Decoded image: 64 × 64 pixel PNG

How the Base64 to image converter finds the format

  1. A data:…;base64, prefix and any white space are removed.
  2. The Base64 is decoded into bytes, in your browser.
  3. The first bytes are compared with the signatures in the table below to find the format.
  4. The bytes are handed to the browser as an image. Download saves the same bytes as a file with the matching extension; nothing is re-compressed.

Image file signatures in Base64

FormatFirst bytesBase64 starts with
PNG89 50 4E 47 0D 0A 1A 0AiVBORw0KGgo
JPEGFF D8 FF/9j/
GIF47 49 46 38 ("GIF8")R0lGOD
WebP"RIFF", four size bytes, "WEBP"UklGR
AVIF"ftypavif" from the fifth bytevaries
BMP42 4D ("BM")Qk
ICO00 00 01 00AAABAA
SVGtext that starts with <svg or <?xmlPHN2Zy or PD94bWwg

Base64 image example: a 64 × 64 PNG

The example in the tool is a 64 × 64 pixel PNG. Its Base64 begins with iVBORw0KGgo. Decoded, those characters are the bytes 89 50 4E 47 0D 0A 1A 0A: the PNG signature. The tool therefore reports PNG, shows the picture and names the download image.png.

The picture is a checkerboard of two colors, #3B5BFF and #0A0A0B. The hex to RGB converter turns them into rgb(59, 91, 255) and rgb(10, 10, 11). If decoding gives text instead of an image, the Base64 decoder shows it.

How the Base64 to image converter reads its example: 220 Base64 characters starting iVBORw0KGgo decode to 163 bytes; the first eight are 89 50 4E 47 0D 0A 1A 0A, whose letters spell PNG, a 64 × 64 pixel checkerboard image.
The first eight bytes decide the format, whatever the data URL prefix says.

Using a Base64 image as a data URL

Copy data URL gives you the image as a complete data: URL with the detected type, ready for an <img src> attribute or a CSS url(). Data URLs suit small images such as icons. A Base64 image is about a third larger than the file it came from and cannot be cached separately from the page, so larger images are better served as normal files.

A downloaded QR code PNG is the kind of small, simple image that works well as a data URL.

Base64 to Image Converter: FAQ

How does the tool know what kind of image it is?
From the first bytes of the decoded data. Every image format starts with a fixed signature: a PNG file begins with the bytes 89 50 4E 47, a JPEG with FF D8 FF, a GIF with the letters GIF8. The tool checks those bytes and ignores what the data URL prefix claims.
Do I need the data:image/png;base64, part?
No. You can paste the bare Base64 or the full data URL. The prefix is removed before decoding.
Why does it say my Base64 is not an image?
The data decoded correctly but does not start with a signature the tool knows. It may be text, a PDF or another file type. If it is text, the Base64 decoder will show it.
The format was recognized but no image appears. Why?
The data is probably cut off or damaged: copying from a log or a terminal often loses the end of a long string. A format your browser cannot display, such as AVIF in an older browser, gives the same result.
How do I recognize an image from the Base64 itself?
By its first characters, because the signature bytes always encode the same way. PNG data starts with iVBORw0KGgo, JPEG with /9j/, GIF with R0lGOD and WebP with UklGR.

Sources

More in Developer