精灵与图像切片

Question

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

Answer 1

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

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

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

Answer 2

优点：

• 在服务器上提供单个大图像要比许多小图像容易得多。
• 网页浏览器加载此类图片（稍微）快一点。
• 浏览器仅在需要时加载图像 - 如果您在翻转中使用多个图像，浏览器将在您第一次翻转元素时“暂停”。这可以使用精灵来解决，因为只能加载一个图像。

缺点：

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

Answer 3

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

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

  

除非仔细构建精灵图像，否则最终会得到   令人难以置信的浪费空间。我最喜欢的例子来自WHIT   电视的网站，其中this image用作精灵。注意   这是一个1299×15,000的PNG。它压缩得很好 - 实际   下载大小约为26K - 但浏览器不进行压缩   图像数据。下载并解压缩此图像时，它将会   在内存中使用近75MB（1299 * 15000 * 4）。

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

还存在CSS支持较差的浏览器（旧版浏览器）中会发生什么问题。精灵可能最终完全崩溃。

Answer 4

精灵

优点：

• 减少与服务器的HTTP连接
• 宽带加载速度更快

缺点：

• 无封装：如果要更改一个图像，则必须更改精灵
• 很难在没有工具的情况下在CSS中设置单个图像
• 不要降级：如果浏览器不支持CSS，则遇到麻烦

Answer 5

使用CSS精灵生成器（我们使用SmartSprites）。这样你就可以在本地做切片，让你的构建过程生成一个spritemap。这是两全其美的。

SmartSprites也不适合你，肯定是其他人，但是我喜欢它，因为它减少了前期和更改期间的工作量。

Answer 6

缺点 - 旧浏览器速度较慢/可能没有悬停效果（opera6） - 如果使用不当可能会变得非常/太大（将它们充分分组！） - 设置它们的繁琐工作

赞成 - 更少的字节传输，因为一个大图像小于所有单个图像组合（一个标题/颜色表） - 减少http请求

Answer 7

CSS Sprites：

优点：

• 不受支持的浏览器中的优雅降级（不允许链接的背景图像时显示文本）
• 更少的HTTP请求
• 每个图像都有一个单独的开销，如颜色表，因此图像切片将比CSS sprites具有更多的开销

缺点：

• 如果在浏览器中关闭图像，则会出现问题（但很少见）

图像切片：

优点：

• 用户在逐件装载后感知到更快的负载。
• 按需加载，例如用户将鼠标放在图像上

缺点：

• 即使在服务器端可能不是这样，网页也可能在客户端有大尺寸。

Answer 8

sprite的主要缺点是难以读取/维护/修改CSS。可能很难记住精灵内的精确像素偏移。

Answer 9

使用精灵的专业人士： 因为它使用1个图像，所以它在http服务器上需要较少的负载。

缺点： - 难以编码。你必须知道sprite中每个图像的坐标，这样你才能正确显示它。一旦你改变了图像的大小，你需要调整所有... - 大图像可以创建长时间等待显示的页面。使用图像时，具有慢速互联网连接的用户可以逐个查看。

最佳做法。 使用它例如翻转图像。

Answer 10

我更倾向于将相似图像（正常，悬停，所选页面，所选页面的父页面）分组，而不是将所有图像分组到一个文件中。要制作这些，您可以在Photoshop或Illustrator中像普通图像一样切片，打开文件并将它们与快捷键组合在一起。我写了combines images into CSS sprites的Photoshop脚本。您将拥有多个HTTP连接，但在悬停时不会出现负载延迟。