使用数据URI而不是精灵图像有什么缺点？

Question

请考虑我的网站的这个条件：

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

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

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

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

• 我将图片变量放在一个单独的LESS文件中以保持我的代码库清洁

有了这些，我仍然不确定它是否是加载图像的最佳方法。使用这种方法加载小图像可以减少HTTP请求的数量，而且我们也不必维护精灵图像。

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

Answer 1

如果任何图像发生变化，则必须更改整个css文件。这打破了HTTP缓存。使用精灵图像时，css文件本身将从缓存中提供，并且只需要再次下载更改后的图像。

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

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