javascript - 没有 base64 的 HTML 中的内联图像

Question

好吧，我知道我可以将图像转换为 base64，然后将其添加到我的 html 中。base64 的问题在于它生成的数据在我的例子中比我的 png 图像文件大 33%，这是一个最大压缩 300KB 的 css sprite。

有什么方法可以不使用base64传输图像数据，然后在客户端组装成图像？

我正在考虑传输十六进制图像数据，然后使用 javascript 将其转换为 base64。似乎有可能，但非常多余，因为它会立即从 base64 解码回来，只是为了显示。

有任何想法吗？

Answer 1

我刚刚做了一些测试来检查文件大小，我发现没有显着差异。

sizeof(gzip(index.html + sprite.png)) = 301KB

sizeof(gzip(index_inline_b64_sprite.html)) = 302KB

虽然 base64 文本比 png 本身大 33% 左右，但一旦 gzip 压缩，它似乎没有任何显着差异。

一旦您考虑到任何解决方案都可能具有严重的跨浏览器甚至可能将奇怪的十六进制的安全问题附加到 html 文件，在我的情况下，坚持使用 base64 似乎是一个更好的解决方案。

还要感谢 Barmar 指出 html 中的 ascii hex 会大得多，起初我没有意识到这一点。