什么时候CSS Sprite太大了?

时间:2009-05-13 19:16:35

标签: html css sprite css-sprites

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

我猜我的问题是:精灵什么时候太大了?

8 个答案:

答案 0 :(得分:16)

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

答案 1 :(得分:10)

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

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

PNG还支持“预测变量”,它只存储预测值(基于前一行和同一行中的前一像素)与实际值之间的增量。

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

答案 2 :(得分:7)

  

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

是的,你想避免对小图片提出很多要求。将它们组合成一个sprite允许在一个http请求中获取它们。

  

精灵什么时候太大?

这实际上是您想要查看的所有请求的总和。精灵太大的唯一方法是它的各部分之和(精确到精灵 )的总和太大而不能开始。

答案 3 :(得分:5)

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

我的建议:

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

答案 4 :(得分:3)

您可以将所有小型静态设计元素打包到一张主图像中,而不会出现大问题。

当然,如果你的网站上有1000万像素的照片,将它们打包在一起就会很疯狂。

答案 5 :(得分:2)

当您包含除基本UI元素之外的任何内容时,CSS精灵太大了。这些是小的补充图像,如图标和徽标,压缩不会对质量造成太大影响。由于所有这些图像都会以其他方式独立加载,因此您不会比单独请求它们更糟糕。如果加载时间过长,则问题不依赖于精灵,而是正确压缩图像。

答案 6 :(得分:1)

是的,主要目的是减少请求(以及因此加载时间)。另一个优点是您只需要担心一个图像被正确缓存。提示:使用PNG图像,因为它们的压缩最适合处理大的白色(“空”)区域。

答案 7 :(得分:0)

Google地图使用[256x256] px图片。