好文: 對圖片做優化處理

網頁中的圖片, 到底要存何種格式? 哪種比較好, 有甚麼優缺點?

直接先說結論, 這個網站有提供免費服務, 可以考慮直接用, 做圖片的優化:

• smush.it!
• reSmush.it > Image optimization API

推薦閱讀 JosephJ 這篇: Image Optimization 讀書心得

下述摘錄自上述文章:

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

• 圖片最佳化技巧、工具:
  • Crush PNG: PNG 有很多用不到的 Chunk，用 pngcrush 來移除
  • pngcrush -rem alla -brute -reduce src.png dest.png # apt-get install pngcrush
• Strip JPG Metadata: JPEG 中有 EXIF、Meta data 等資訊，jpegtran 幫助改善壓縮比與移除這些資訊（要小心著作權）。
  • jpegtran -copy none -optimize src.jpg > dest.jpg # apt-get install libjpeg-turbo-progs
    
• 將 GIF 轉換為 PNG: 改善 GIF 的最好作法就是將他換成 PNG，這裡使用 ImageMagick 達成。
  • convert image.gif PNG8:image.png # apt-get install imagemagick
• 將 GIF 動畫最佳化
  • gifsicle -O2 src.gif > dest.gif # apt-get install gifsicle
• 圖片讀取顯示方式:
  • Progressive JPEG 轉換:
    • jpegtran -copy none -optimize -outfile new.jpg source.jpg
    • jpegtran -copy none -progressive -outfile new.jpg source.jpg
  • Baseline JPEG: 一張圖片由上到下顯示
  • Progressive JPEG: 先給使用者看到模糊的圖片，隨著檔案的讀取逐漸變清晰 (檔案超過 10K 使用 Progressive JPEG 將有很大的機會得到更小的檔案。)

一行轉換的 Script：for i in ./*.png; do pngcrush -rem alla -brute -reduce -ow $i; done # -ow 會蓋掉原始檔案

此篇文章有用另外一隻程式和 Script：Optimizing images for web with Google Page Speed and jpegoptim

1. sudo apt-get install jpegoptim
2. jpegoptim --strip-all -T1 -m85 -o -p example.jpg # -o 會覆蓋掉原始檔案，-T1 變動少於 1% 就不改
3. Script 如下：

   optimize() {
     jpegoptim *.jpg --strip-all
     for i in *
     do
       if test -d $i
       then
         cd $i
         echo $i
         optimize
         cd ..
       fi
     done
     echo
   }

4. 執行：optimize

相關文章

• Speeding Up Your Website: Selecting the Right Format for your Images
• Image Optimization Part 1: The Importance of Images
• Image Optimization Part 2: Selecting the Right File Format
• Image Optimization, Part 3: Four Steps to File Size Reduction
• Image Optimization, Part 4: Progressive JPEG…Hot or Not?
• 壓縮網頁圖片

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章