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 ie 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?

Answer 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

Answer 2

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

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

Answer 3

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