使用背景圖代碼

圖檔合并方案

什麼是Sprite拼圖：

Sprite拼圖好處：

減少網絡請求，提升網頁加載速度

圖檔優化合并

平衡與取舍

壓縮工具

- 無損 Minimage 

- 有損  TinyPng 

合并-排列

圖檔之間必須保留白隙

圖檔排列方式

- 橫向排列

- 縱向排列

合并-分類

把同屬于一個子產品的圖檔進行合并

把大小相近的圖檔進行合并

把色彩相近的圖檔進行合并

綜合以上方式合并

合并推薦

隻本頁用到的圖檔合并

有狀态的圖示合并

浏覽器相容方案

- IE6不支援PNG24半透明    (存2份 : sprite.png 24      sprite_ie.png 8  )

- CSS3 & 切圖

開始做，堅持做，重複做