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

6
votes

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?

3
javascriptandroidimagebase64png
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. – Harald K
Thank you for the comment, that answers some of my related questions on the topic. And generates a few new ones also. :) – Rick

3 Answers

5
votes

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

1
votes

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" />
0
votes

async/await version

const axios = require("axios");
const response = await axios.get("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Los_Colorines_4.jpg/320px-Los_Colorines_4.jpg", {
  responseType: "arraybuffer"
});
const base64 = Buffer.from(response.data, 'base64').toString('base64');
const base64ImageUrl = `data:image/gif;base64,${base64}`

Demo: https://runkit.com/nickjanssen/axiosbase64image