什么时候CSS Sprite太大了？

Question

sprite的主要目的是减少对页面上的图形元素对服务器的http请求吗？或者你想尝试尽可能多的元素适合精灵.

我想我要问的是:精灵什么时候太大了？

Answer 1

当用户必须等待文件下载才能使用页面时,它太大了.

Answer 2

如果您使用PNG作为精灵图像类型,则有必要记住每行通常独立于其他行进行压缩(放气).

因此,为了帮助平衡精灵数量/图像大小,尝试将相似的精灵水平放置而不是垂直放置 - 以利用压缩.

PNG还支持"预测变量",其仅存储预测值(基于前一行和同一行中的前一像素)与实际值之间的增量.

找到一个好的图像编辑器,允许您设置不同的PNG预测器压缩设置(或自动优化),以找到最适合您图像的设置.

Answer 3

sprite的主要目的是减少对页面上的图形元素对服务器的http请求吗？

是的,您希望避免对小图像的许多请求.将它们组合成一个sprite允许在一个http请求中获取它们.

精灵什么时候太大了？

它实际上是您想要查看的所有请求的总和.对于精灵过大的唯一方法是,如果它的部分(这正是精灵什么的总和是)过大开始.

Answer 4

关于精灵,你一定要查看这篇博文下关于内存使用的讨论:http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

我的建议:

• 只有精灵图标行,按钮和重复图像(例如圆角渐变框).
• 别管其他一切
• 将图像保持在500x500或100kb以下,尽可能少留出未使用的空间.根据具体情况使用.png或.gif文件