Image to Base64: Encode an Image as a Data URI

This data URI encoder encodes a file as Base64 text; it does not change the picture's format. To change format first, use the image converter hub.

Turn a data URI back into an image file →

How do you convert an image to Base64?

Image to Base64 encoding writes a file's bytes as text a document can hold inline. Encoding a file as Base64 makes it about a third larger, so a data URI is always bigger than the file it carries.

1. Choose the file. It is read in your browser and never uploaded.
2. Read its bytes and encode them as Base64, 3 bytes to 4 characters.
3. Put the media type in front of the data, so whatever reads the result knows what the bytes are.
4. Copy the whole string, prefix included. A PNG file starts data:image/png;base64,.

Image File to Base64 Data URI 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.

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.

Every value below is the one the specification fixes, so a result that disagrees with a row here is a result to check.

Worked Example: a PNG file to Base64 Data URI

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.

Start with the first group. Its bytes are 89 50 4E, which is 24 bits written out in the top 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, decode the data URI back to a file and compare it with what you started from.

Worked examples: an image file to a Base64 data URI

Each example gives the value first, then the working. Click a value to load it in the converter.

Every example above reverses exactly - read the same data URI back as a picture.

What Changes the Data URI?

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 - what Base64 is for, next to the others sets out which does what.

Image File to Base64 Data URI 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: 'data:image/png;base64,' + base64.b64encode(open('f.png','rb').read()).decode()

JavaScript: new FileReader().readAsDataURL(file)

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.
• encoding a large photo when a smaller format would do - change an image's format first.

Frequently Asked Questions

Related Conversions

• to carry the result in a query string, write a value as percent-encoded triplets.
• before the data URI goes into markup, turn < and & into entities.
• for a string rather than a file, produce Base64 from plain text.
• if the markup you pasted is escaped, decode HTML entities in a pasted string first.
• when the Base64 is text rather than a picture, recover the text behind a Base64 string.
• if the string came out of a link, percent-decode a query-string value first.

The rest of the family sits on back to the text encoding converter.