Is data:image/png;base64 the only base64 encoding for the img tag?

Question

Been working in Java with images from the web encoded as base64 strings. I have only seen image/png format in img src tags i.e. data:image/png;base64,{eNc0d3d_St!ng...} I have not seen image/gif or image/jpg. I have looked on SO and read a little on base 64 encoding.

Furthermore, I strip off the data:image/png;base64 part in Java (Android) when doing Base64.decode(src, Base64.DEFAULT) so it looks like there is no need for the png in that situation. In fact if I do not strip off this "header" then BitmapFactory.decodeByteArray returns null.

So the question is, are there other formats other than png for image encoding on the web?

Solution 1

Yes they are:

data:image/gif

data:image/jpg

etc...

and not only for images:

data:text/html

The format is the follow

data:[<media type>][;charset=<character set>][;base64],<data>

Se here https://en.wikipedia.org/wiki/Data_URI_scheme

and

http://dataurl.net/#about

Solution 2

No, you can use gif, jpg or any type of image that the browser reads. E.g:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Comments

[Harald K]

Most image (or other binary) file formats, like PNG, GIF or JPEG, contains a ("magic") identifier at the beginning of the file, that uniquely identifies the format. In this case, the image/png part is redundant, but this may not be the case for all possible formats that can be represented using the data URI scheme. So it does have a purpose. Also, keep in mind that the ;base64 part i optional, don't just blindly send the data to the Base64 decoder.

[Rick]

Thank you for the comment, that answers some of my related questions on the topic. And generates a few new ones also. :)

[Rick]

Maybe this is best as a separate question but: if I change image/png in the code above to image/gif, I get the same image. I expected to get maybe a corrupt image, but it seems that at least FF is rendering it the same regardless of the type of image declared

[Glenn Randers-Pehrson]

Right, once FF sees that the datastream is an image, it looks at the "magic number" to figure out which image type it is.