CSS Sprites图片切割术与图片优化

开发 前端
这里和大家分享一下CSS Sprites图片切割术与图片优化,CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。

本文向大家描述一下CSS Sprites图片切割术与图片优化的概念,CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。

CSS Sprites图片切割术与图片优化

关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。

图片优化

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

CSS Sprites图片切割术

CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。

不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。
size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。

在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。

◆图片对等合并:

应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。

◆区分开不需要合并的图像:

如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。

◆黄金切割位:

在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。

详文参考:http://www.mypchelp.cn/it/200906/39090.shtml

【编辑推荐】

  1. CSS Sprites对CSS布局的意义及优缺点
  2. CSS属性选择器语法详解
  3. CSS Sprites样式生成工具用法详解
  4. 七大CSS选择符用法详解
  5. 探究CSS高级语法中选择器分组和CSS继承用法
责任编辑:佚名 来源: mypchelp.cn
相关推荐

2010-09-02 13:53:58

CSS Sprites

2010-08-26 10:21:06

CSS Sprites

2011-06-22 17:11:18

SEO

2014-12-10 10:12:02

Web

2010-09-02 09:59:52

CSS SpritesCSS

2018-05-16 07:41:29

图片代码资源

2012-03-31 10:12:55

CSSWEB

2010-08-24 13:25:16

DIV+CSS

2011-06-24 16:44:43

网站优化

2010-08-27 09:45:49

CSS Sprites

2010-08-31 10:05:16

CSS Sprites

2011-06-23 19:13:08

ALT标签

2021-07-05 14:55:28

前端优化图片

2011-04-18 09:01:45

CSSHTML

2011-05-27 10:34:00

CSS Sprites网站加载时间

2011-07-21 16:40:28

网站优化

2012-05-23 15:45:13

JavaScript

2021-12-19 22:13:46

Linux命令网页图片

2010-09-09 14:38:05

CSS背景图片

2012-04-25 16:46:25

ASO图片视频
点赞
收藏

51CTO技术栈公众号