<img src="data:... with gzipped file

Question

It's probably more like a theoretical question but still.

It is pretty simple to use inline base64 data to pass it in image source parameter. We are doing it like that: <img src="data:image/png;base64,[base64 string]" />.

But what if the data that represented in this base64 string is gzipped? Is there a way to tell the browser about it? It can be simply done when the image is loaded from a HTTP server by adding Content-Encoding: gzip header. But is it possible with the inline method?

I couldn't find any information about this. The only solution that I see is use JavaScript to "unbase64" the data, "gunzip" it and then "base64" it again and put it to the src attribute.

But it not seem to be a good solution...

Answer 1

Browsers support gzip encodings at the transport level (i.e. in HTTP). They don't have any support for it at the data level.

If you were to provide a base64 sting of gzipped data, then it wouldn't be image/png it would be application/x-gzip and the browser wouldn't be able to handle it because it would try to decode it as an image.

If you were to do that but use the correct MIME type, then the browser still wouldn't know what to do with it because it wouldn't be an image format and there is no support for decoding gzip data and then guessing at what format the data inside is.

But we don't have headers when we are using inline base64 data.

The data has to come from somewhere. It is usually either embedded in an HTML document (in which case the entire document can be compressed when it is sent over HTTP) or generated locally from JavaScript (in which case there is no point in compressing it just to immediately decompress it, there's no network to send it over, so no performance gains to be had by compression).