html - 更快加载图像的最佳方法是 .png/.jpg 格式还是数据 URI 方案？

Question

以数据 URI格式加载图像是否会使其在页面中加载更快？例如：background: url("data:image/jpg;base64,/someImageData")

还是以常见的 .jpg 或 .png 格式加载更快？例如：background: url("wallpaper.jpg")

score 3 · Accepted Answer

渲染图像所需的时间将相同，但加载所需的时间可能不同。Base64 编码图像使其比通过 url() 链接到图像大 37% ：

非常粗略，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍

但是，虽然图像更大并且需要下载更多字节，但您可以节省与服务器对讲的时间，以便使用 url() 方法获取图像。无法确定哪个加载速度更快 - 这取决于用户的连接。请参阅这篇文章，了解何时使用 base64 编码图像是个好主意。

score 1 · Accepted Answer

Data-uri 的大小大约大了 37%，但还有更重要的一点：

所以要小心这个。而且，正如 caniuse.com 上所述，IE < 9 的数据总量限制很大。

2 回答 2