1.1.6.1图片优化与合并

使用背景图代码

HTML <button class = "u-btn">点我</button>

CSS .u-btn{background:url(images/btn.png) no-repeat 0 0;}

      .u-btn{background:url(images/sprite.png) no-repeat 0 -50px;}

图片合并方案

为什么要拼图?

什么是Sprite拼图:把设计稿中的小图片拼合在一张图片中。

Sprite拼图好处：·减少网络请求，提升网页加载速度

图片的优化合并

·大小与质量

·平衡与取舍

·压缩工具

-无损 Minimage

-有损 TinyPng

·合并

-排列

·图片之间必须保留空隙

对于具体要保留多大的空隙呢，并没有一个明确的数值，遵循的一个宗旨就是保留的空隙足够后期维护就可以了。

如果是小图标，留的空隙可适当小一些，一般20像素左右；那如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大。

·图片排列方式

-横向排列

-纵向排列

-分类

·把同属于一个模块的图片进行合并

·把大小相近的图片进行合并

·把色彩相近的图片进行合并

·综合以上方式合并

合并推荐

·只本页用到的图片合并

·有状态的图标合并

浏览器兼容方案

·IE6不支持PNG24半透明

 存2份：sprite.png 24

             sprite_ie.png 8

·CSS3&切图