Image Optimization 讀書心得

前言

上個月在 YUI Blog 上有 4 篇 Image Optimization 的連載，若你重視網站的效能，這篇是非常經典且必讀的文章。 主要在於圖片格式的介紹、使用免費的命令列工具縮小圖片但不失真。難能可貴的是，作者 Stoyan Stefanov 也做了許多的實際測試，讓這系列的文章非常有說服力。以下為文章列表：

• The Importance of Images
  序言，作者用 Y!Slow 去測試 Alexa 的前十大網站，得到圖片佔頁面 46.6% 的檔案大小。有很大的空間藉由最佳化圖片讓網站效能更好、頁面讀取更快。
• Selecting the Right File Format
  在最佳化之前，你必須確實地了解每種圖形格式，而不是 Visual Designer 給你什麼你就照用。
• For Steps to File Size Reduction
  最精華的一部分，如何利用免費的 Command Line 工具做到不失真的圖片壓縮。
• Progressive JPEG... Hot or Not?
  善用 Progressive JPEG 不但有助 Usability，還能夠幫助檔案更小喔！

圖片格式

• GIF： 256 色、不失真、沒有專利權的問題、動畫的唯一選擇、透明只支援全透明與不透明、不支援半透明（boolean type of transparency）。
• JPEG： 數百萬種顏色、極佳的壓縮、修改後會失真（截圖、旋轉、修改 EXIF 例外）、不支援透明。
• PNG8：最應該被使用的圖形格式，跟 GIF 一樣 256 色，跟 GIF 相比的優點是檔案大小通常較小、且支援半透明（Alpha Transparency、Variable Transparency）。缺點是不支援動畫。 特別值得一提的是，PNG8 若有用到半透明，在 IE 6 及以前的版本將變成全透明，這其實是個還不錯的優雅降級方式。當然你也可以用 CSS AlphaImageLoader 來強制打開，但非常耗效能、維護起來也極不方便。
• PNG24 或 PNG32：
  比較少用，通常會用於不需考慮效能的使用手冊的螢幕截圖上（有數百萬顏色與不失真的特性）。需注意直接使用這種格式在 IE 6 及以前版本時，半透明的部份會是灰色的。
  而另外一種使用情況是整張圖幾乎都是半透明的情況（像是影片 Player 中間的再生按鈕圖），這種情況就不得不用 AlphaImageLoader 來解決問題了！

選擇圖片格式的黃金原則：照片用 JPEG、動畫用 GIF、其餘全部用 PNG8。

不失真最佳化技巧

整個流程不失真、使用免費工具、而且可以很容易做到自動化。

1. Crush PNG：

   PNG 有很多用不到的 Chunk，用 pngcrush 來移除

   pngcrush -rem alla -brute -reduce src.png dest.png

2. Strip JPG Metadata：

   JPEG 中有 EXIF、Meta data 等資訊，jpegtran 幫助改善壓縮比與移除這些資訊（要小心著作權）。

   jpegtran -copy none -optimize src.jpg dest.jpg

3. 將 GIF 轉換為 PNG：

   改善 GIF 的最好作法就是將他換成 PNG，這裡使用 ImageMagick 達成。

   convert image.gif PNG8:image.png

4. 將 GIF 動畫最佳化：

   gifsicle -O2 src.gif > dest.gif

Progressive JPEG

Baseline JPEG 就是一般大家熟悉的模式，一張圖片由上到下顯示。Progressive JPEG 則先給使用者看到模糊的圖片，隨著檔案的讀取逐漸變清晰。Progressive 的使用在 Usability 是有爭議的（傳統做法、使用者的印象效果不佳）。作者歸納出的結果是，如果檔案超過 10K 使用 Progressive JPEG 將有很大的機會得到更小的檔案。
另外 IE 雖然不支援 Progressive JPEG，但事情也沒這麼糟，只是等到檔案完全讀取才會顯示（也非 Baseline 的上到下）。

jpeg -copy none -optimize source.jpg result.jpg
jpegtran -copy none -progressive source.jpg result.jpg

Smush.it!

看完上面的說明，你可能已經迫不及待想要開始動手最佳化你的檔案了。 但實際上作者已經實作了一個線上的工具：Smush It!，你可以用 URL、上傳、Firefox Extension、Bookmarklet 的方式用上面的流程來做最佳化。而且已提供 Web Service 供使用、也有 Zip 打包下載。

http://smush.it/ws.php - gives a help message
http://smush.it/ws.php?img=http://smush.it/css/skin/screenshot.png - example smushed response
http://smush.it/ws.php?img=http://smush.it/css/skin/logo.png - image that cannot be further smushed