我对图像的精灵方法没有太多经验（http://www.alistapart.com/articles/sprites）。有人愿意分享一些精灵与老式切片的优缺点吗？
问问题
6899 次
10 回答
12
sprites 的主要优点是浏览器必须从网络服务器请求更少的图片。这减少了 HTTP 请求的数量，并且可以更有效地压缩设计的各个部分。这两点也代表了切片图像的缺点。
在这里你可以看到一些精灵如何提高网页加载速度的好例子：
于 2009-07-01T15:32:39.597 回答
10
优点：
- 在服务器上提供单个大图像比提供许多小图像要容易得多。
- Web 浏览器加载这样的图像（稍微）快一些。
- 浏览器仅在需要时加载图像 - 如果您在翻转中使用多个图像，浏览器将在您第一次翻转元素时“暂停”。这可以使用精灵来解决，因为只有一张图像要加载。
缺点：
- 编码有点痛苦（至少比使用多个图像更痛苦）
于 2009-07-01T15:36:03.957 回答
5
使用 CSS sprites 的一个经常被忽视的缺点是内存占用：
除非仔细构建精灵图像，否则您最终会浪费大量空间。我最喜欢的例子来自 WHIT TV 的网站，该图像被用作精灵。请注意，这是一个 1299×15,000 的 PNG。它压缩得很好——实际下载大小约为 26K——但浏览器不会呈现压缩的图像数据。下载并解压缩此图像时，它将使用将近 75MB 的内存（1299 * 15000 * 4）。
当精灵被加载到浏览器中时，它们是未压缩的。一个 26 KB 的文件可以解压缩以占用高达 75 MB 的 RAM。您应该注意使用尺寸非常大的精灵。
还有一个问题是在 CSS 支持不佳的浏览器（旧版浏览器）中会发生什么。精灵最终可能会完全损坏。
于 2009-07-08T05:18:05.580 回答
4
精灵
优点：
- 与服务器的 HTTP 连接更少
- 宽带加载速度更快
缺点：
- 无封装：要换一张图，就得换sprite
- 没有工具很难在 CSS 中设置单个图像
- 不要降级：如果浏览器不支持 CSS，你就有麻烦了
于 2009-07-01T15:36:52.177 回答
3
CSS精灵：
优点：
- 在不支持的浏览器中优雅降级（不允许链接的背景图片时可以显示文本）
- 更少的 HTTP 请求
- 每个图像都有一个单独的开销，如颜色表，因此图像切片将比 CSS sprite 具有更多开销
缺点：
- 如果在浏览器中关闭图像，则会出现问题（虽然很少见）
图像切片：
优点：
- 用户感觉加载速度更快，因为是一块一块地加载。
- 按需加载，例如当用户将鼠标放在图像上时
缺点：
- 网页在客户端可能有很大的尺寸，即使在服务器端可能不是这样。
于 2009-07-01T15:46:44.230 回答
1
sprites 的主要缺点是它很难阅读/维护/修改你的 CSS。很难记住精灵中的确切像素偏移量。
于 2009-07-01T15:34:19.763 回答
1
使用 sprite 的优点：因为它使用 1 张图像，所以它需要较少的 http 服务器负载。
缺点： - 难以编码。您必须知道精灵中每个图像的坐标，以便正确显示它。一旦你改变图像的大小，你需要调整所有... - 大图像可能会创建等待已久的页面来显示。使用图片时，网速较慢的用户可以一一看到。
最佳实践。使用它例如翻转图像。
于 2009-07-01T15:41:14.477 回答
1
研究使用 CSS sprite 生成器（我们使用SmartSprites）。这样您就可以在本地进行切片，并让您的构建过程生成一个 spritemap。这是两全其美的。
SmartSprites 也不适合您，肯定还有其他人，但是我喜欢它，因为它减少了前期和更改期间的工作量。
于 2009-07-01T15:44:07.403 回答
1
缺点 - 在较旧的浏览器上速度较慢/可能无法通过悬停效果处理它们（opera6） - 如果使用不当可能会变得非常/太大（将它们充分分组！） - 设置它们的繁琐工作
优点 - 传输的字节更少，因为一张大图像小于所有单个图像的组合（一个标题/颜色表） - 更少的 http 请求
于 2009-07-01T15:44:33.643 回答
0
我更喜欢将相似图像（正常、悬停、选定页面、选定页面的父页面）分组的中间立场，而不是将所有图像放在一个文件中。要制作这些，您可以在 Photoshop 或 Illustrator 中像平常一样对切片进行图像处理，打开文件并用快捷键组合它们。我编写了将图像组合成 CSS sprites的 Photoshop 脚本。您将有多个 HTTP 连接，但不会在悬停时出现加载延迟。
于 2009-07-07T19:28:25.747 回答