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?

Eldreeda

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. – Raised

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

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

Subantarctic

Answer 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" />

Subadar

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 – Eldreeda

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

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

Formulaic