图片优化与合并

在 HTML 中使用背景图片的方法如下：

  1. <button type="button" class="btn-default">Click Me</button>
  3. <style type="text/css" media="screen">
  4.   .btn-default {
  5.   background: url(image/btn.png) no-repeat 0 0;
  6. }
  7. .btn-default-alt {
  8. background: url(image/sprite.png) no-repeat 0 -50px;
  9. }
  10. </style>

图片的合并就如同上面提到的切图后保存的过程。拼好的图称之为 Sprite 它能减少网络请求次数提高速度。图片压缩工具分为无损（ImageOptim 等工具，也可结合 Grunt 自动化构建工具一同使用）与有损压缩工具（TinyPng）。

图片合并

图片合并建议方案：

  • 同个模块的图片合并
  • 大小相近的图片合并
  • 色彩相近的图片合并
  • 以上3种合并混合

合并的图片可以以横向或纵向的排列，分类可将同属于一个模块（功能模块），大小相近（充分利用画布空间），颜色相近（减少文件大小）。

图片的兼容

IE6 不支持 PNG24 半透明所以需要保存两份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。