为我的网站考虑以下条件:
我不支持 IE8 及以下版本，所以浏览器支持不是问题。
我还使用 gzip 来避免 CSS 中的数据过载 将数据 URI 图像复制并粘贴到我的 CSS 文件中。
我只有一个由 LESS 生成的 CSS 文件。
为方便起见，我为每个图像数据 URI 使用 LESS 变量。
- 我将图像变量放在一个单独的 LESS 文件中以保持我的代码库干净
尽管如此，我仍然不确定这是否是加载图像的最佳方法。使用这种方法加载小图像减少了 HTTP 请求的数量，而且我们不必维护 Sprite 图像。
您能想到这种方法有什么缺点吗？
最佳答案
如果任何图像发生变化，整个 css 文件都必须更改。这会破坏 HTTP 缓存。对于 sprite 图像，css 文件本身将从缓存中获取，只有更改后的图像才需要重新下载。
最好只为数据生成一个 css 文件:URI 图像，另一个用于常规 CSS 内容。这样，常规的 css 更新不需要重新下载 data:uri 图像。
第二个问题是前景图像，那些由 <img> 提供的图像html中的标记。如果它是一个经常使用的图像，它会不必要地增加 html 的大小。
关于css - 使用数据 URI 而不是 Sprite 图像有什么缺点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13426717/