<img src="data:... 带有 gzipped 文件

Question

这可能更像是一个理论问题，但仍然如此。

使用内联base64数据将其传递到图像源参数中非常简单。我们是这样做的：<img src="data:image/png;base64,[base64 string]" />。

但是如果这个base64字符串中表示的数据被压缩了呢？有没有办法告诉浏览器呢？通过添加Content-Encoding: gzip标头从 HTTP 服务器加载图像时，可以简单地完成。但是内联方法有可能吗？

我找不到任何关于此的信息。我看到的唯一解决方案是使用 JavaScript “unbase64”数据，“gunzip”它，然后再次“base64”并将其放入src属性。

但这似乎不是一个好的解决方案......

Answer 1

浏览器在传输级别（即 HTTP）支持 gzip 编码。他们在数据层面上没有任何支持。

如果您要提供 gzip 压缩数据的 base64 字符串，那么浏览器将无法处理它，因为它会尝试将其解码为图像image/png。application/x-gzip

如果您要这样做但使用正确的 MIME 类型，那么浏览器仍然不知道如何处理它，因为它不是图像格式，并且不支持解码 gzip 数据，然后猜测什么格式里面的数据是。

但是当我们使用内联 Base64 数据时，我们没有标头。

数据必须来自某个地方。它通常要么嵌入在 HTML 文档中（在这种情况下，通过 HTTP 发送时可以压缩整个文档），要么从 JavaScript 本地生成（在这种情况下，压缩它只是为了立即解压缩它是没有意义的，没有必要）。网络来发送它，因此压缩不会带来性能提升）。