圖片優(yōu)化與合并

Table of Contents generated with DocToc

• 圖片優(yōu)化與合并
• 圖片的兼容

圖片優(yōu)化與合并

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

<button type="button" class="btn-default">Click Me</button>

<style type="text/css" media="screen">
  .btn-default {
  background: url(image/btn.png) no-repeat 0 0;
}
.btn-default-alt {
background: url(image/sprite.png) no-repeat 0 -50px;
}
</style>

圖片的合并就如同上面提到的切圖后保存的過程。拼好的圖稱之為 Sprite 它能減少網(wǎng)絡(luò)請(qǐng)求次數(shù)提高速度。圖片壓縮工具分為無損（ImageOptim 等工具，也可結(jié)合 Grunt 自動(dòng)化構(gòu)建工具一同使用）與有損壓縮工具（TinyPng）。

圖片合并

圖片合并建議方案：

• 同個(gè)模塊的圖片合并
• 大小相近的圖片合并
• 色彩相近的圖片合并
• 以上3種合并混合

合并的圖片可以以橫向或縱向的排列，分類可將同屬于一個(gè)模塊（功能模塊），大小相近（充分利用畫布空間），顏色相近（減少文件大?。?/p>

圖片的兼容

IE6 不支持 PNG24 半透明所以需要保存兩份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是讓高級(jí)瀏覽器使用 CSS3 低級(jí)瀏覽器則使用切圖。優(yōu)雅降級(jí)指的是讓低級(jí)瀏覽器不顯示高級(jí)瀏覽器中的界面細(xì)節(jié)。