Web 前端優化最佳實踐第六部分面向 圖片(Image)，這部分目前有 4 條規則。在最近的 Velocity 2008 技術大會上，Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有參考價值。結合一起說一下。
1. 優化圖片 (Optimize Images)
使用 GIF 、JPG 還是 PNG 格式的圖片? 盡可能的使用 PNG 格式的圖片，更多的功能，更小的尺寸(與 GIF 相比)。
對於 PNG 圖片，考慮用 Pngcrush 或類似的工具進行優化。常見的工具如下表:
pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite http://www.pobox.com/~jason1/pngrewrite/
OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
PNGOut http://advsys.net/ken/utils.htm
對 JPEG 圖片的優化工具：
jpegtran (http://jpegclub.org/)
必需要強調的是，圖片設計的同學啊，請考慮設計面向 Web 的圖片，不要動不動就設計超過可接受尺寸之外大家伙，這應該是一種習慣，而不是什麼高超的技能，只需要記住就成了。
2. 使用 CSS Sprites 技巧對圖片優化 (Optimize CSS Sprites)
之前提到過，簡單的說就是"利用 CSS background 相關元素進行背景圖絕對定位"，把多次 HTTP 調用變為一次調用，更多參考：CSS Sprites: Image Slicing's Kiss of Death
補充一下：對於這個技巧我曾經見到有人濫用的。把多個背景圖片揉成一個，減少 HTTP 調用，這是一個很好的思路。但一定要記住這個大圖片不能太"重"，我看到過 100 多K 的背景圖。一個圖片就把整個網站拖得很慢。比較好的例子可以參考雅虎關系的這個圖.
3. 不要在 HTML 中使用縮放圖片 (Don't Scale Images in HTML)
更多的時候，可能是因為偷懶而沒有制作合適大小的圖片，如果是批量處理圖片的話，可能一條 ImageMagic 命令（convert ）就能搞定 。必須提及的是，看到太多的對圖片拉伸很難看的頁面，救救這些頁面!
4. 用更小的並且可緩存的 favicon.ico (Make favicon.ico Small and Cacheable)
更小，可緩存，這兩條可能都不是問題。問題是，太多站點根本沒有 favicon.ico 。有的時候，判斷獨立域名的 Blog 是否專業，基本看一下是否有 favicon.ico 就差不多了。
--EOF--
