图片合并方案 – sprite拼图

把设计稿里的一个个小图标拼合到一个图片里，用时引入这张图片。

好处：减少网络请求，提升网页加载速度；

推荐：《 谈谈CSS sprite（CSS精灵）》

• 大小与质量（平衡和取舍 – 反比）

压缩：无损Minimage（对图片大小影响不显著）；有损TinyPng（一个在线网站）

• 合并（排列 / 分类）

准则：图片之间必需保留空隙（考虑到图片的容错性和可维护性）

• 图片排列方式：横向排列 & 纵向排列

分类合并：

把同属于一个板块的图片进行合并；

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

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

综合以上方式进行合并；

推荐（合并）：

只本页使用到的图片合并（后面使用不到的就不需要加载了）；

有状态的图标合并（有交换状态，如点击前图片，点击后图标，CSS设置只是X轴变化）。

图片兼容方案

• IE6不支持PNG24半透明

存两份，高级浏览器 sprite.png 24；IE6存sprite_ie.png 8（带背景切的）。

• CSS3 & 切图（圆角、阴影等情况）

高级浏览器使用CSS3解决，低级浏览器使用切图解决或者优雅降级（即，不显示）。

青岛中新(83837777.com)