Web 前端效能優化最佳實踐：圖片篇（4 條規則）

結合 Velocity 2008 Stoyan Stefanov 簡報，圖片優化 4 大規則：

1. 優化圖片格式與大小

• 優先使用 PNG（功能多、比 GIF 小）。
• PNG 工具：pngcrush、OptiPNG、PNGOut、pngrewrite。
• JPEG 工具：jpegtran。
• 設計師應養成產出 Web 適合尺寸的習慣，避免超大原始圖。

2. CSS Sprites 技巧優化

合併背景圖減少 HTTP 請求，但合併後大圖不可過大（見過 100KB+ 拖慢整站）。參考 Yahoo 相關圖片做法。

3. 避免 HTML 中縮放圖片

勿用 <img width="..." height="..."> 強制縮放，應預先產生正確尺寸。批量處理可用 ImageMagick convert 指令。

4. favicon.ico 小且可快取

確保存在、檔案小、設定長效快取。缺少 favicon.ico 常被視為不專業指標。