css - 使用数据 URI 而不是 Sprite 图像有什么缺点？

Question

为我的网站考虑以下条件:

• 我不支持 IE8 及以下版本，所以浏览器支持不是问题。

• 我还使用 gzip 来避免 CSS 中的数据过载将数据 URI 图像复制并粘贴到我的 CSS 文件中。

• 我只有一个由 LESS 生成的 CSS 文件。

• 为方便起见，我为每个图像数据 URI 使用 LESS 变量。

• 我将图像变量放在一个单独的 LESS 文件中以保持我的代码库干净

尽管如此，我仍然不确定这是否是加载图像的最佳方法。使用这种方法加载小图像减少了 HTTP 请求的数量，而且我们不必维护 Sprite 图像。

您能想到这种方法有什么缺点吗？

Answer 1

如果任何图像发生变化，整个 css 文件都必须更改。这会破坏 HTTP 缓存。对于 sprite 图像，css 文件本身将从缓存中获取，只有更改后的图像才需要重新下载。

最好只为数据生成一个 css 文件:URI 图像，另一个用于常规 CSS 内容。这样，常规的 css 更新不需要重新下载 data:uri 图像。

第二个问题是前景图像，那些由 <img> 提供的图像html中的标记。如果它是一个经常使用的图像，它会不必要地增加 html 的大小。