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

【问题标题】：What is the best way to load an image faster, either the .png/.jpg format or the data URI scheme?更快加载图像的最佳方法是 .png/.jpg 格式还是数据 URI 方案？
【发布时间】：2016-12-20 10:46:26
【问题描述】：

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

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

【问题讨论】：

标签： html css data-uri data-uri-scheme

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

所以要小心这个。并且，as stated on caniuse.com，IE

【讨论】：