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

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

• javascript
• html
• image
• base64
• gzip

• If it's a zipped file from the server, it's no longer a base64 string is it ? – adeneo Commented Mar 1, 2015 at 11:44
• 1 It is not a file. base64 is just a way to represent a binary data. So we can put any data in base64 string. We can encode for example a png file and and put this string in the src attribute saying that this is image/png;base64. But what is this image/png was firstly gzipped? – Michael Miriti Commented Mar 1, 2015 at 11:47
• That it wouldn't be image/png so you'd be lying. – Quentin Commented Mar 1, 2015 at 11:54
• 1 Exactly. But I couldn't find a mime-type for gzipped png. Actually there are no mime-types for gzipped files, you can only say to the browser that the transferring data is a gzipped data with the Content-Encoding header. But we don't have headers when we are using inline base64 data. – Michael Miriti Commented Mar 1, 2015 at 11:57

1 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 e from somewhere. It is usually either embedded in an HTML document (in which case the entire document can be pressed when it is sent over HTTP) or generated locally from JavaScript (in which case there is no point in pressing it just to immediately depress it, there's no network to send it over, so no performance gains to be had by pression).