精灵与图像切片

Question

我对图像的精灵方法没有太多经验(http://www.alistapart.com/articles/sprites).有人愿意分享精灵与老派切片的优点/缺点吗？

Answer 1

精灵的主要优点是浏览器必须从网络服务器请求更少的图片.这减少了HTTP请求的数量,并且可以更有效地压缩设计的各个部分.这两点也代表了切片图像的缺点.

在这里你可以看到一些很好的例子,精灵如何提高网页的加载速度:

http://css-tricks.com/css-sprites/

Answer 2

优点:

• 服务器上服务单个大图像要比许多小图像容易得多.
• Web浏览器加载这样的图像(稍微)更快.
• 浏览器仅在需要时加载图像 - 如果您在翻转中使用多个图像,浏览器将在您第一次翻转元素时"暂停".这可以使用精灵来解决,因为只能加载一个图像.

缺点:

• 编码很麻烦(至少比使用多个图像更多)

Answer 3

使用 CSS 精灵的一个经常被忽视的缺点是内存占用：

https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

除非精心构建精灵图像，否则最终会浪费大量的空间。我最喜欢的例子来自 WHIT TV 的网站，该图像用作精灵。请注意，这是一个 1299×15,000 的 PNG。它压缩得很好——实际下载大小约为 26K——但浏览器不呈现压缩图像数据。下载并解压缩此图像时，它将使用近 75MB 的内存（1299 * 15000 * 4）。

当精灵加载到浏览器中时，它们会以未压缩的方式存储。一个 26 KB 的文件可以解压缩以占用高达 75 MB 的 RAM。您应该注意使用尺寸非常大的精灵。

还有一个问题是在 CSS 支持较差的浏览器（传统浏览器）中会发生什么。精灵最终可能会完全损坏。