| Input format | |
|---|---|
| Detected type | |
| MIME type | |
| Dimensions | |
| Decoded size | |
| Base64 length | |
| Base64 overhead | |
| Data URI length | |
| First bytes (hex) |
About this tool
This Base64 to image converter turns a Base64 string back into a picture you can see and save. Paste either a full data URI such as data:image/png;base64,iVBORw0… or just the raw Base64 text, with or without line breaks, and the tool works out which one you gave it. It then reads the first bytes of the decoded data to identify the real format (PNG, JPEG, GIF, WebP, BMP, ICO or SVG) instead of trusting the label, shows a preview, the pixel dimensions, the decoded file size and how much bigger the Base64 text is, and lets you download the file with the right extension. Decoding happens in your browser, so the image is never uploaded.
How to use the Base64 to image converter
- Paste the Base64. A data URI, a raw string, a CSS
url(…)value or a quoted JSON string all work. Spaces and line breaks are ignored, and URL-safe Base64 (with-and_) is accepted. - Check the details. The tool decodes as you type, or when you click Decode image. If the data URI claims one type but the bytes say another, you get a warning.
- Download or copy. Download image saves the decoded file with the extension of the detected format. Copy as data URI gives you a clean, correctly labeled data URI to paste into HTML or CSS.
Going the other way? The Image to Base64 converter encodes a picture, and the Base64 Decode & Encode tool handles plain text.
How data URIs work
A data URI puts a file's contents directly inside a URL. RFC 2397 defines the syntax as data:[<mediatype>][;base64],<data>. The media type, such as image/png, says what the data is; if it is left out it defaults to text/plain;charset=US-ASCII. The ;base64 flag means the data after the comma is Base64; without it the data is percent-encoded text, which is common for small SVG icons. The RFC notes that the scheme is only useful for short values, which is why data URIs suit icons and tiny images rather than photos.
Raw Base64, as found in JSON APIs and databases, has no prefix at all, so nothing tells you the image type. That is why this tool looks at the bytes.
Why Base64 is about a third bigger
Base64, defined in RFC 4648, encodes every 3 bytes as 4 characters from a 64-character alphabet, padding the last group with =. The encoded length is 4 × ceil(n ÷ 3) characters for n bytes, so large files grow by 4/3, about 33.3%. Very small inputs grow more because of padding. Email-style Base64 under RFC 2045 also breaks lines at 76 characters, and each line break adds two more bytes:
| Decoded size | Base64 characters | Overhead | With 76-char lines + CRLF | Overhead |
|---|---|---|---|---|
| 1 byte | 4 | 300.0% | 6 | 500.0% |
| 2 bytes | 4 | 100.0% | 6 | 200.0% |
| 3 bytes | 4 | 33.3% | 6 | 100.0% |
| 100 bytes | 136 | 36.0% | 140 | 40.0% |
| 1 KiB (1,024 bytes) | 1,368 | 33.6% | 1,404 | 37.1% |
| 10 KiB (10,240 bytes) | 13,656 | 33.4% | 14,016 | 36.9% |
| 100 KiB (102,400 bytes) | 136,536 | 33.3% | 140,130 | 36.8% |
| 1 MiB (1,048,576 bytes) | 1,398,104 | 33.3% | 1,434,898 | 36.8% |
How the image type is detected
Most image formats begin with a fixed signature, often called magic bytes. The tool compares the first decoded bytes with the image signatures listed in the WHATWG MIME Sniffing Standard, the same patterns browsers use. PNG's eight-byte signature is fixed by the W3C PNG specification.
| Format | First bytes (hex) | As text | MIME type | Extension |
|---|---|---|---|---|
| PNG | 89 50 4E 47 0D 0A 1A 0A | \x89PNG\r\n\x1A\n | image/png | .png |
| JPEG | FF D8 FF | (binary) | image/jpeg | .jpg |
| GIF | 47 49 46 38 37 61 or 47 49 46 38 39 61 | GIF87a or GIF89a | image/gif | .gif |
| WebP | 52 49 46 46 xx xx xx xx 57 45 42 50 56 50 | RIFF????WEBPVP | image/webp | .webp |
| BMP | 42 4D | BM | image/bmp | .bmp |
| ICO | 00 00 01 00 | (binary) | image/x-icon | .ico |
| SVG | none: text that starts with an <svg> element | <svg … | image/svg+xml | .svg |
SVG is different: it is XML text, so it has no binary signature. The tool decodes the bytes as text and checks that, after an optional XML declaration, comments or a doctype, the document starts with an <svg element. Because SVG can contain scripts, the preview only ever shows it through an image element with a data URI. As the MDN guide to SVG as an image explains, JavaScript is disabled and external resources are not loaded in that context. The SVG markup is never inserted into the page, and the tool warns you if it finds a script or event handler attribute so you can be careful where you use the file.
Worked example
The tool loads with a small sample icon as a data URI. Decoding it gives:
Input format Data URI (declared image/png) Detected type PNG MIME type image/png Dimensions 32 × 32 px Decoded size 186 bytes Base64 length 248 characters Base64 overhead +33.3% Data URI length 270 characters First bytes (hex) 89 50 4E 47 0D 0A 1A 0A
186 bytes is exactly 62 groups of 3, so there is no padding and the text is 248 = 186 × 4 ÷ 3 characters. The 22-character data:image/png;base64, prefix makes the full URI 270 characters long.
Common mistakes
- Pasting a truncated string. Logs and database viewers often cut long values. The tool flags lengths that cannot be valid, and warns when a PNG, JPEG or GIF is missing its end marker.
- Trusting the label. A data URI that says
image/pngmay hold a JPEG; check the detected type before saving. - Double encoding. If the result is text that itself looks like Base64, the data was encoded twice. Decode it with the Base64 tool first.
- Leaving percent-encoding in place. Copying a data URI out of a URL can turn
=into%3D; the tool undoes this. - Inlining large photos as data URIs. They cannot be cached separately and are a third bigger; a normal image file is usually better.
Use cases
- Checking what an API, a JSON field or a database column actually contains.
- Extracting an inline image from HTML, CSS, an SVG or an email source.
- Verifying a data URI before pasting it into a stylesheet, and seeing its real size.
- Recovering a screenshot or signature image stored as Base64. To shrink it afterward, use the Image Compressor.
Frequently asked questions
On Linux, save the text to a file and run base64 -d image.txt > image.png, after removing any data:image/png;base64, prefix. On macOS use base64 -D or base64 --decode. In PowerShell, [IO.File]::WriteAllBytes("image.png", [Convert]::FromBase64String($text)) writes the decoded bytes to a file.
Decoding gives you the original file, in whatever format it was encoded from, so a Base64 WebP downloads as a WebP. To change the format, download it here and then open it in an image converter, which can re-encode it as JPG, PNG or WebP in the browser.
With this page the data stays in your browser: decoding, preview and download all run locally and nothing is sent to a server. For confidential images such as ID scans or signatures, a local-only tool like this one, or the command line, is the safer choice compared with sites that upload your input.
The usual causes are a truncated string, a wrong or missing type in the data URI, or extra characters such as quotes, escaped slashes or a JSON backslash-n sequence left in the text. Paste it here: the tool removes whitespace, ignores the label and reports whether the data is invalid, cut short, or not an image at all.
RFC 2397 does not set a maximum length, but it says the scheme is only useful for short values. Browsers, servers and email clients each apply their own limits, and some email clients do not show data URI images at all. In practice, keep data URIs for small images and icons and link larger files normally.
Neither. Base64 is a lossless text encoding: decoding returns exactly the same bytes, so the image is identical to the original, with the same quality and metadata. It does not compress anything either; the encoded text is about 33% larger than the file it represents.