sprites 的主要目的是减少向服务器发出的对页面上图形元素的 http 请求吗？或者您是否想尝试将尽可能多的元素添加到精灵中。
我想我要问的是：精灵什么时候太大了？
问问题
5977 次
8 回答
16
当用户必须等待文件下载才能使用页面时，它太大了。
于 2009-05-13T19:18:36.447 回答
10
如果您使用 PNG 作为 sprite 图像类型，请记住每一行通常独立于其他行进行压缩（放气）。
因此，为了帮助平衡精灵数量/图像大小，请尝试将相似的精灵水平而不是垂直放置彼此相邻 - 以利用压缩。
PNG 还支持“预测器”，它只存储预测值（基于同一行中的前面的行和前面的像素）和实际值之间的增量。
找到一个好的图像编辑器，它允许您设置不同的 PNG 预测器压缩设置（或自动优化）以找到最适合您的图像的设置。
于 2009-05-24T20:21:27.117 回答
7
sprites 的主要目的是减少向服务器发出的对页面上图形元素的 http 请求吗？
是的，您希望避免对小图像有很多请求。将它们组合成一个精灵可以在一个 http 请求中获取它们。
什么时候精灵太大了？
这实际上是您要查看的所有请求的总和。精灵太大的唯一方法是它的部分的总和（这正是精灵的样子）太大而无法开始。
于 2009-05-13T19:26:51.660 回答
5
关于精灵，你也应该看看这篇博文下面关于内存使用的讨论：http: //blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
我的建议：
- 只有精灵图标行、按钮和重复图像（例如圆角渐变框）。
- 别管其他一切
- 将图像保持在 500x500 或 100kb 以下，并尽可能少地留出未使用的空间。根据情况使用 .png 或 .gif
于 2009-05-24T20:17:45.767 回答
3
您可以将所有小的静态设计元素打包到一个主图像中，而不会出现大问题。
当然，如果您的网站上有 10 兆像素的照片，那么将它们打包在一起会很疯狂。
于 2009-05-13T19:18:07.150 回答
2
当您只包含基本 UI 元素之外的任何内容时，CSS 精灵就太大了。这些是小的补充图像，例如图标和徽标，压缩不会对质量造成太大损害。由于所有这些图像本来都是独立加载的，因此您不会比单独请求它们更糟糕。如果加载时间过长，则问题不在于精灵，而在于正确压缩图像。
于 2009-05-13T19:29:12.687 回答
1
是的，主要目的是减少请求（并因此减少加载时间）。另一个优点是您只需要担心正确缓存一个图像。提示：使用 PNG 图像，因为它们的压缩处理大的白色（“空白”）区域最好。
于 2009-05-13T19:21:57.083 回答
0
谷歌地图使用 [256x256] 像素图像。
于 2009-05-13T19:40:12.793 回答