好文: 對圖片做優化處理

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

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

推薦閱讀 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

相關文章

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料