布丁足迹

千里始足下,高山起微尘,吾道亦如此,行之贵日新。

什么是CSS Sprites及CSS Sprites在实际应该中应注意的细节!

此方法应用以有一段时间了,感觉还是很好,现在做前台WEB制作很少有像以前。尽最大努力不多切出1像素,就是所为的完美,而CSS Sprites却完美改变,它是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。它是以减少图片载入次数,减少网站的HTTP请求数,从而可以减轻服务器的负载,提高网页加载速度。实践证明还是对的。现在大部份网站都是此方法,目前它已经在网页开发中发展得较为成熟。

CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。

前面说过,即然都很成熟,大家追求的可能就是,更多的细节,及更多的优化方法。
下面有几种方法,都是互联网上搜集来的?

图片优化

   1. 对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积。
   2. Photoshop相比起Fireworks,导出同等质量的PNG图片,体积会稍大。而Fireworks虽然做了相应压缩优化,但没有达到最优秀的压缩。
   3. 我所知的设计软件,对于PNG图片的处理都没做到最优秀的压缩,图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。
   4. 图片体积及尺寸方面,建议体积保持在100K以内(较为符合国情最佳请求SIZE),size为800px(最佳尺寸)。(从某权威人事中得知,具体无从考证)

CSS Sprites图片切割术

   1. CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。
   2. 不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。
   3. CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。
   4. size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。Demo
   5. 在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。Demo
   6. 在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。Demo
   7. 图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。Demo
   8. 区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。
   9. 黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。

补两条
10. 有的说定位时避免使用bottom或right等,当使用CSS sprite的时候,只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的,但是问题是,当你在宽度上或高度上扩展相关sprite图片的时候,原先设置的位置可能是错的,因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

其实我感觉一般情况宽度图不片不会改应变,用RIGHT和LEFT还是挺方便的,但从整体考虑,升级了。改版的。图片宽度还是有可能会改变的。必竟开始时做太宽也没什么好处,还是浪费很多空间。就是多费点时间去对坐标,最好还是不用RIGHT 和 LEIFT的了。

12 有的说竟晚给每个图片足够的空间
  就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,以至于其它图片不会意外出现。

这个我支持,必竟多空点,也占不不了多大空间,如何要追求完美,那就慢慢调吧。费了劲了。在加上浏览器兼容问题,最好还大多空间。小误差也忽略了。

更多
« 展会喧传单页广告四套正反面互联网广告关注的几大重点 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

黄金广告位求包养

最会抢沙发的淫

宣传推广栏

完全随机文章

最新评论及回复

最近留言

Powered By Z-Blog 1.8 Walle Build 100427

[过度上网,有害健康]    感谢诚网科技提供空间
版权所有 © 2007-2010 布丁足迹 辽ICP备08100443号

你敢来踩,我就敢回踹