优化图像精灵大小与 http 请求

Question

我正在创建一个网站，并且设计中有很多背景图片，所以我使用图片精灵来优化页面加载时间。

问题是我有 3 张精灵图像，其中 2 张是 200 KB，尺寸不超过 900x700 像素。

我的问题是关于优化页面速度。什么会产生最好的结果？使用两个 200 KB 的 sprite 会更好，还是将它们分成 4 个每个 100 KB 的 sprite 图像会更好。

就我阅读的许多文章而言，大多数开发人员和专家都说要尽量减少 http 请求，因为现在互联网已经足够快了，所以下载并不需要太多时间。我在一定程度上同意，但我无法在图像尺寸较小的 2 个以上 http 请求或较大图像尺寸的较少 http 请求之间做出决定。

Answer 1

这对我来说似乎是微优化，但无论如何最高效的方式是将图像嵌入到 html 页面中，因此您只需使用页面的单个 http 请求。

您可以使用新的data: 协议嵌入图像并将图像包含为 base64 编码字符串，请查看此tutorial 了解详细信息。

另请参阅browser support 了解此功能。