CSS图像的精灵高度限制?

时间:2010-02-03 21:31:37

标签: css sprite css-sprites

我正在制作精灵,它的高度达到了约4000像素。在图形设计社区中使用的最大精灵高度是否有一般尺寸?

2 个答案:

答案 0 :(得分:11)

即使你只使用很少的精灵,即使大部分图像是空白/白色,浏览器也必须对整个图像进行解压缩(并保留在内存中)。 对于桌面客户端,你只是错过了通过使用太多内存而成为好公民的机会(浏览器已经吸收了大量内存)。 对于某些移动客户端(例如,对于解压缩后超过25k的文件的IPhone),它可能更成问题,图像根本不会被缓存,因此最好有2个文件< 25k和两个HTTP请求比一个> 25k文件和单个请求永远不会被缓存。

最后一个问题,PNG压缩是基于行的,拥有较宽图像的开销较高(尽管在某些情况下太宽可能在理论上不好,因为每行只能有一个预测过滤器类型)。 / p>

哦,而且,由于太多的精灵,你可能会在同一张图片中以太多不同的颜色结束,并错过了体面的调色图像的机会。测试所有这些组合是单调乏味的,但如果可以的话,通过渐变的主要颜色对精灵进行分组是一种很好的启发式方法(因为渐变/模糊需要许多不同的颜色)。

答案 1 :(得分:3)

我不认为焦点应该是精灵在物理上的大小(宽度x高度),而是精灵文件大小有多大,并且问自己是否值得将精灵分成多个精灵。

我们常常根据颜色分割我们的精灵,所以精灵主要是蓝色或红色或黄色。这样我们可以在保持图像文件大小的同时获得更平滑的渐变和整体图像质量