Base64 to Image: Decode a Data URI to a File
This data URI names the media type image/png, so the bytes after the comma are read as that.
an image file
This data URI decoder returns the file the Base64 already holds; it does not convert between formats. For that use the image format converters.
Encode an image file as a data URI →
How do you convert a Base64 string back to an image?
A bare Base64 string carries no file type. The media type comes from the data URI prefix, and without one you have to state what the bytes are yourself.
- Paste the string. If it starts data: the prefix names the media type; if it does not, you name the type yourself.
- Read everything after the comma as Base64 and decode it to bytes.
- Check the bytes against what the prefix promised. A PNG begins 89 50 4E 47 0D 0A 1A 0A.
- Save the bytes to a file with the matching extension. data:image/png;base64, holds 8 bytes.
Base64 Data URI to Image File Conversion Table
A data URI is data:, then an optional media type, then an optional ;base64, then a comma, then the data. With the media type left out it means text/plain;charset=US-ASCII. An image data URI names its media type before the data, as in data:image/png;base64, so whatever reads it knows what the bytes are. The data itself is Base64, and Base64 writes data with 64 characters - A to Z, a to z, 0 to 9, plus (+) and slash (/) - and reserves the equals sign (=) for padding. The prefix is the whole of what tells a browser what those bytes are, so the last row — a data URI that names no media type — means text/plain;charset=US-ASCII.
| Media type | Data URI prefix |
|---|---|
| image/png | data:image/png;base64, |
| image/jpeg | data:image/jpeg;base64, |
| image/gif | data:image/gif;base64, |
| none named | data:;base64, |
The same value in each encoding
These rows are shared with the other encoders, so a value written here is the value every page in the family writes.
| Value | Written as |
|---|---|
| PNG data URI prefix | data:image/png;base64, followed by the file's bytes in Base64 |
Worked Example: data:image/png;base64,iVBORw0KGgo= to Image File
One group of bits at a time, with the regrouping drawn out. The same twenty-four cells are cut at eight above and at six below, which is the whole of why 3 bytes become 4 characters.
Result: data:image/png;base64,iVBORw0KGgo= = iVBORw0KGgo=
Start with the first four characters, iVBO. Each one's index in the alphabet is a 6-bit number, and the four numbers written end to end are the bits in the second row. A byte is 8 bits and holds 256 values, 0–255; a nibble is 4 bits. Base64 reads three bytes (24 bits) at a time and writes them as four characters of six bits each, so the output runs four characters for every three bytes - about a third larger than the input.
The second row is the same run of bits cut every 6 instead of every eight. Each six-bit group is a number from 0 to 63, and that number is a row in the table above. Here they are 34, 21, 1, 14, which name i, V, B, O. Nothing is lost in the regrouping: the same bits are read a different width, which is why the result reverses exactly.
UTF-8 encodes each character in 1 to 4 bytes. Characters 0–127 use one byte identical to ASCII, so ASCII text is valid UTF-8. That is why the byte count, not the character count, decides the length of the result — a character outside US-ASCII takes more than one byte and therefore more than one sixth of a group.
Check it in reverse
The value goes back the way it came. Four characters give their four indices, the indices give 24 bits, and the bits give 3 bytes again. Nothing is carried alongside the result: the alphabet says what each character is worth and the pad says how much of the last group was real. To verify the result by hand, encode the recovered file back to a data URI and compare it with what you started from.
Worked examples: a Base64 data URI to an image file
Each example gives the value first, then the working. Click a value to load it in the converter.
What does data:image/png;base64, at the start of a string mean?
data:image/png;base64, at the start of a string means the bytes that follow are a PNG file.
Method: read the header between data: and the comma; it names the media type.
What does data:image/jpeg;base64, at the start of a string mean?
data:image/jpeg;base64, at the start of a string means the bytes that follow are a JPEG file.
Method: read the header between data: and the comma; it names the media type.
What does a Base64 string with no data: prefix hold?
A Base64 string with no data: prefix holds bytes whose type you have to state yourself.
Method: decode the characters to bytes, then read the first bytes to see what they are.
What does a PNG file start with?
A PNG file starts with 89 50 4E 47 0D 0A 1A 0A.
Method: decode the first characters and compare the bytes against the signature.
Every example above reverses exactly - write the same picture back as a data URI.
What Decides the File You Get Back?
What names the file type?
A bare Base64 string carries no file type. The media type comes from the data URI prefix, and without one you have to state what the bytes are yourself.
How much bigger is the result?
Encoding a file as Base64 makes it about a third larger, so a data URI is always bigger than the file it carries. 4:3 is the ratio: 4 characters for every 3 bytes.
Does the picture itself change?
No. Base64 rewrites the bytes and leaves the file they make up exactly as it was, so a photograph stays the size and the format it already had.
Is this the encoding you need at all?
The three schemes protect different things and are not interchangeable. these encodings are not interchangeable - each encoding and the job it does sets out which does what.
Base64 Data URI to Image File in Code
Both standard libraries carry this conversion, so the one-liner below is the whole job. Check the result against the table above before you trust it in a pipeline.
Python: base64.b64decode(uri.split(',', 1)[1])JavaScript: Uint8Array.from(atob(uri.split(',')[1]), c => c.charCodeAt(0))Common Mistakes
- Dropping the prefix. A bare Base64 string carries no file type. The media type comes from the data URI prefix, and without one you have to state what the bytes are yourself.
- Encoding a photograph that a smaller format would carry. Encoding a file as Base64 makes it about a third larger, so a data URI is always bigger than the file it carries.
- Expecting the encoding to change the picture. It does not: the bytes are rewritten and the file they hold is the file you started with.
- expecting a PNG out of a JPEG data URI - the prefix decides the type; to convert between image formats, use the image tools.
Frequently Asked Questions
Where does the image type come from?
A bare Base64 string carries no file type. The media type comes from the data URI prefix, and without one you have to state what the bytes are yourself.
What if the Base64 value has no data URI prefix?
Then nothing in the string says what the bytes are and you name the type yourself. The first bytes usually tell you: a PNG file begins 89 50 4E 47 0D 0A 1A 0A.
Why does a Base64 image fail to display?
Usually the prefix: a missing data: scheme, a media type that does not match the bytes, or characters lost in a copy.
Can you decode Base64 to a PDF instead?
Yes. The decoder gives back bytes, and what those bytes are is decided by the prefix and by the extension you save them under.
How do you download the image a Base64 string holds?
Decode it to bytes and save them under the extension the media type names — .png for image/png. The prefix and the file extension have to agree.
"Can I go back the other way?" Yes. The same value converts straight back in the image to data URI direction.
Related Conversions
The rest of the family sits on pick another encoding from the grid.