Image Optimization 讀書心得

此篇文章最近更新時間為2009-01-05 11:25:14 目前共有9篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

前言

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

圖片格式

  • 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! Logo

看完上面的說明,你可能已經迫不及待想要開始動手最佳化你的檔案了。 但實際上作者已經實作了一個線上的工具: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
他們也有將整個工具 Open Source 的計畫,這部份就請各位期待囉!

To Do List

  • CSS Sprite 工具(拖拉製作?)
  • 了解每個工具的細部功能
  • 方便 VD/WD 檢驗切圖的工具(或類似 Scanmus 的工具)
  • 設計整合到現有開發流程中(做 Check 轉換)
  • 將現有的圖片批次更換(涉及到 CSS、動畫、Cache 的問題)
  • Smush It! 及相關工具研究
  • Hoffman Table
  • 如何判斷 GIF Animation


Comments

  1. eddie 2009-06-04 12:05:44
    看本文之前还不知道smush it!这么有来头有经过试验

    而且学习到PNG-8比GIF更小这件事

    Thanks
  2. josephj 2009-01-22 23:16:32
    lulalala,

    感謝你提供的好物,我剛試壓了一下壓縮比維持在 12% 左右
    減少了 0.5M,算是有蠻大的幫助的

    不過我不是只壓 png,還有摻雜很多不同格式就是了
  3. lulalala 2009-01-22 14:41:23
    http://www.lulalala.com/dokuwiki2/doku.php?id=png%E7%9A%84%E6%9C%80%E4%BD%B3%E5%8C%96

    要是想要把 gif 轉成 png ,或是把 png 最佳化,
    我推薦使用 optipng + advpng
    Optipng 會偵測顏色數量,在不改變畫面的情況下最佳化
    (比如說一張只有 16色的圖,被存成高彩的png,optipng 就能轉換成16色的色盤)。
    而且也有 crush 的功能。
  4. josephj 2009-01-18 15:25:13
    做雜誌很好啊~
    前題是我不當 WD~ 哇哈哈~

    話說最近已經寫好了一隻 PHP
    可以將整個目錄下的 Image 做最佳化、並且取代 CSS 中的相關檔名
    不過反而就沒用 smush.it 提供的 function 了...
    主要是客製化有點困難
  5. Kay 2009-01-12 11:45:12
    我覺得應該先有的概念是"網頁不要當成雜誌"....
    圖片的問題就可以解決大半
    話說回來,最嚴重的解決了,這也不會是大問題
  6. 湯姆 2009-01-08 00:01:28
    但是如果是透明圖漸層的PNG8只有Firework做的到 請參考1. http://blog.bcse.info/making-png-8-along-with-alpha-channel 2. http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
  7. Adam 2009-01-07 22:07:55
    Smush.it還不錯用!

    (btw, 好久沒看到Awoo了)
  8. cokeyko 2009-01-06 20:32:09
    >> 選擇圖片格式的黃金原則:照片用 JPEG、動畫用 GIF、其餘全部用 PNG8。

    領受了,感謝~
  9. 貝姬 2009-01-06 11:26:43
    我建議所有製作網站的Visual Designer 也應該要來看一看...
    echo 卡羅大大的話
    網頁不要當成雜誌作啊.... (一個300dpi 一個72 dpi 差粉多哪!!)
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment