將網頁中的圖片壓縮及最佳化 ( Image Compression & Optimization ) 能節省用戶下載網站資源的速度，也因此能提升網站的用戶體驗。我們將會抽出選幾個熱門「WordPress 外掛」作出測試及比較，看看各外掛的圖片壓縮及最佳化表現作為外掛使用參考。

測試圖片

測試圖片為一張 Mac OS X Lion 的預設銀河背景圖片，檔案大少為 526 KB。

圖片壓縮及最佳化測試圖片

圖片壓縮及最佳化測試圖片

測試外掛

我們選擇了四個熱門免費外掛及一個付費外掛。

  • WP Smush
  • Compress JPEG & PNG images
  • EWWW Image Optimizer
  • ShortPixel Image Optimizer
  • WP Smush Pro (付費外掛)
測試外掛

測試外掛

失真 (Lossy) 和無失真 (Lossless) 圖片壓縮

若圖片經過失真 (Lossy) 篩選器處理，部分像素資料將會被除去。但也因為我們的眼睛對顏色沒有絕對的敏感度，使用失真壓縮來處理及縮減網頁圖片檔案大小也是一個常用及可行的方法。另一方面，若經過無失真 (Lossless) 圖片壓縮後，壓縮圖片的資訊和原始資料一致，不受損失。

原圖壓縮表現結果

外掛名稱
(作者)
活躍安裝原圖壓縮表現
( 壓縮時間, 包括 8 個縮圖 )		備註
WP Smush
(WPMU DEV)		800,000+免費版不壓縮原圖
( ~ 18.6 秒 )		只壓縮縮圖 (Thumbnail)
Compress JPEG & PNG images
(TinyPNG)		100,000+Lossy: 223 KB
( ~ 31.4 秒 )		需註冊
免費版每月限額 500 張圖片
EWWW Image Optimizer
(Shane Bishop)		500,000+Lossless: 488KB
( ~ 2.9 秒 )		付費版才有 Lossy Compression
ShortPixel Image Optimizer
(ShortPixel)		40,000+Lossy: 132 KB
Lossless: 484 KB
( ~ 3.6 秒 )		需註冊
免費版每月限額 100 張圖片
WP Smush Pro
(WPMU DEV)		不是免費外掛Lossy: 244 KB
( ~ 24.2 秒 )		付費外掛

從以上壓縮表現結果比較圖表看到，失真壓縮 ( Lossy Image Compression ) 能大幅度降低圖片檔案大小，最小也由 526 KB 減至 244 KB，壓縮率多於 50%。此外，大部份失真壓縮 ( Lossy Image Compression ) 的服務都要付費。

假若選擇使用失真壓縮，你的網站不是大量上載圖片的話，可使用有每月限額的 Compress JPEG & PNG images 或 ShortPixel Image Optimizer。

如果網站的圖片需要保留精細的細節，那就建議使用無失真 (Lossless) 圖片壓縮的外掛 WP Smush 1 或 EWWW Image Optimizer 吧。

1 使用 WP Smush 時原圖 (Original Image) 不會被壓縮。如你想使用檔案被壓縮的圖片，你可選擇在網頁內容插入一張比較大的縮圖 (Thumbnail)，再在圖上加上 Lightbox 連結原圖。

 

標籤：, , , , , , ,