html - 什么是更快地加载图像的最佳方式，.png/.jpg 格式或数据 URI 方案？

Question

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

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

Answer 1

渲染图像所需的时间将相同，但加载所需的时间可能不同。对图像进行 Base64 编码使其大约为 37% larger比起通过 url() 链接到它:

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size

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