使用数据URI代替精灵图像有哪些缺点？

Question

考虑我的网站现状：

• 不支持IE8及以下版本浏览器，因此浏览器兼容性不是一个问题。

• 我使用gzip来避免在将数据URI图像复制和粘贴到CSS文件中时出现数据过载的情况。

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

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

• 我将图像变量放在单独的LESS文件中，以保持代码库的整洁

尽管如此，我仍然不确定这是否是加载图像的最佳方法。使用此方法加载小图片可以减少HTTP请求的数量，同时我们也不必维护sprite图片。

您能想到这种方法的任何缺点吗？

- Mohsen

---

一些移动设备/浏览器不会缓存超过某个大小的文件（我认为iPhone是24kb？）。如果由于数据URI而导致CSS文件非常大，那么你可能会自食其果。 - cimmanon

@cimmanon，我相信这在2012年已经不是问题了。看看这个。 - Mohsen

使用精灵或URI存在优缺点。我建议阅读这篇伟大的文章：http://www.alistapart.com/articles/sprites/，来自A list apart。希望能有所帮助。 - wandarkaf

Answer 1

如果任何一个图片更改，整个CSS文件都必须更改。 这会破坏HTTP缓存。 使用精灵图像，CSS文件本身将从缓存中提供，并且只需重新下载更改的图像。

最好为data:URI图像生成单独的CSS文件，另外再生成另一个常规CSS文件。这样，常规CSS更新不需要重新下载data:URI图像。

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

- Sripathi Krishnan

---

指出CSS文件更改加1分。我不使用那些数据URI来创建“img”元素。 - Mohsen