網頁中的圖片, 到底要存何種格式? 哪種比較好, 有甚麼優缺點?
直接先說結論, 這個網站有提供免費服務, 可以考慮直接用, 做圖片的優化:
推薦閱讀 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
- sudo apt-get install jpegoptim
- jpegoptim --strip-all -T1 -m85 -o -p example.jpg # -o 會覆蓋掉原始檔案,-T1 變動少於 1% 就不改
- Script 如下:
optimize() { jpegoptim *.jpg --strip-all for i in * do if test -d $i then cd $i echo $i optimize cd .. fi done echo }
- 執行: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?
- 壓縮網頁圖片