根據HTTP Archive，截至2018年12月，影象佔桌面和移動裝置平均網站頁面權重的40%以上。那是巨大的！當談到新的移動優先索引和效能時，影象優化對於WordPress網站的載入速度起著至關重要的作用。影象壓縮是您可以實施的最簡單的優化之一，反過來也會產生最大的影響。從本質上講，這需要通過使用兩種流行的壓縮形式來減小影象的檔案大小：有損和無損。WEBP支援兩種壓縮方式！
今天我們將深入研究有損和無損這兩種型別的影象壓縮，並討論我們建議您使用哪一種。這可能因您經營的業務型別而異。
有失真壓縮
第一種壓縮形式是有損的。有失真壓縮涉及消除影象中的一些資料。因此，這意味著您可能會看到效能下降（質量下降或某些人稱之為畫素化）。所以你必須小心你減少了多少影象。不僅是因為質量，還因為你無法逆轉這個過程。當然，有失真壓縮的一大好處以及為什麼它是最流行的壓縮方法之一是您可以將檔案大小減少很多。
- JPEG和GIF都是有損影象格式。
- JPEG非常適合需要快速載入時間的站點，因為您可以調整質量級別以獲得質量和檔案大小的良好平衡。
WordPress自動壓縮影象
您知道WordPress在您將JPEG上傳到媒體庫時會自動壓縮它們嗎？預設情況下，WordPress會自動將影象壓縮至原始大小的90%。但是，從WordPress 4.5開始，他們將這一比例提高到82%，以進一步全面提高效能。如果您想知道為什麼您的影象在新安裝的WordPress上看起來有點畫素化，這就是原因。
雖然自動壓縮很棒，但我們通常看到82%遠不足以真正影響您網站的效能。因此，如果需要，您可以通過將以下過濾器新增到主題functions.php檔案來禁用此選項。請記住，在編輯您的網站之前，請務必先進行備份。
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
如果你想提高WordPress的自動壓縮率，你可以新增過濾器並降低原始檔案的百分比，例如下例中的70%。
add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );
請記住，這些不會影響已上傳的影象。您需要使用像Regenerate Thumbnails這樣的外掛才能將其應用到您現有的媒體庫中。或者更好的是，我們只是建議您不要理會您的主題，只需使用影象優化 WordPress 外掛（我們將在下面進一步介紹）或在上傳影象之前進一步壓縮影象。
使用Save for Web（軟體）壓縮影象
您可以使用Adobe Photoshop、Affinity Photo、Affinity Designer或其他影象編輯器等工具來調整影象的質量設定（如下所示）。在大多數工具中，它位於“儲存到網路”或“匯出設定”下。
更改照片質量
如果我們對有失真壓縮率進行一些比較，我們可以看到 50% 看起來不錯。33% 的一些背景細節開始變得有點模糊（但會很不明顯），而5%顯然是不可接受的。這只是為什麼WordPress中的自動82%還不夠的一個例子。您可以而且應該以更高的速率壓縮以進一步減小檔案大小。
- original.JPG 2.82 MB（2,000 畫素 x 1463 畫素）
- lossy-compressed-1.JPG：227 KB（2,000 畫素 x 1463 畫素） 減少91.95%
- lossy-compressed-2.JPG：185 KB（2,000 畫素 x 1463 畫素） 減少93.44%
- lossy-compressed-3.JPG：5 KB（2,000 畫素 x 1463 畫素） 減少99.82%
有失真壓縮比較
假設您選擇使用50%壓縮率的壓縮包。檔案大小為227KB，這絕對比原來的2+MB檔案小很多。但是，如果這只是頁面上15個以上的其他影象之一，那仍然不是很好。通常，如果可能，最好將所有影象保持在100KB 以下。在我的情況下，你應該能夠變得更小。所以這是調整影象大小也很重要的地方。50%的影象首先縮小到 1251 畫素 x 916 畫素，只有95KB。
但請記住，您可能不想一直縮小影象的大小，因為從WordPress 4.4開始，它現在支援響應式影象（未通過CSS縮小）。WordPress會自動為上傳到媒體庫的每個影象建立多種尺寸。通過將影象的可用尺寸包含到srcset屬性中，瀏覽器現在可以選擇下載最合適的尺寸並忽略其他尺寸。請參閱下面的程式碼實際外觀示例。
程式碼中的srcset響應式影象示例
因此，隨著如今越來越多的HiDPI顯示器，找到一個合適的媒介是件好事。假設是您網站的列或div大小的2倍或3倍，但仍小於原始大小。瀏覽器將根據裝置的解析度顯示正確的。
谷歌推薦有失真壓縮
您使用Google PageSpeed Insights嗎？如果是這樣，您可能熟悉“優化影象”的警告。早在 2017 年，谷歌實際上更新了他們的文件，現在推薦使用有失真壓縮作為進一步加快網站速度的一種方式。
Google PageSpeed Insights優化影象警告
如果你想擺脫這些警告，最簡單的方法之一就是使用有失真壓縮來安撫谷歌。
無失真壓縮
現在是時候深入研究無失真壓縮的第二種形式了。與有失真壓縮不同，無失真壓縮不會降低影象質量。這怎麼可能？它通常通過刪除不必要的後設資料（由捕獲影象的裝置生成的自動生成的資料）來完成。但是，這種方法的最大缺點是您不會看到檔案大小的顯著減小。換句話說，它會隨著時間的推移佔用大量磁碟空間。
- RAW、BMP、GIF和PNG是無損影象格式。
- 您可以使用Photoshop、FileOptimizer或ImageOptim等工具在桌面上執行無失真壓縮 。
- 一些外掛會將 Gzip壓縮 應用於影象（縮小它們）。
如果我們對有失真壓縮率進行一些比較，我們可以看到，在使用無失真壓縮時，您不會損失任何質量。但是，影象的檔案大小僅減少了10.84%。相比之下，使用有失真壓縮時超過90%。
- original.JPG：227KB（2,000 畫素 x 1463 畫素）
- lossless-compressed.JPG：203KB（2,000 畫素 x 1463 畫素）
無失真壓縮對比
哪種壓縮方法更好？
這個問題的答案實際上取決於你。對於大多數使用者，我們建議使用有失真壓縮，因為您可以輕鬆地將影象壓縮超過70%（有時甚至超過90%！）而不會造成太大的質量損失。將此乘以頁面上的15張影象，它將在減少您網站的載入時間方面發揮重要作用。不僅如此，有失真壓縮將確保您使用盡可能少的磁碟空間。這反過來意味著您可以節省託管費用。
無失真壓縮適用於那些無法承受任何質量損失的人。攝影師、美食博主和模特只是少數依靠畫素完美的影象謀生的人。在這些情況下，您必須將影象託管在CDN上。由於大小，您甚至可能需要將它們解除安裝到第三方儲存服務，例如Amazon S3或Google Cloud Storage。
如何在WordPress中使用有失真壓縮
如果您仍然在有損和無損之間感到困惑，請不要擔心，您可以從許多出色的影象優化WordPress外掛中進行選擇，這些外掛會自動應用有失真壓縮：
- Imagify（有損和無損）
- WP Smush（有損和無損）
- EWWW Cloud（有損和無損）
- ShortPixel（有損和無損）
注意：上面列出的所有伺服器都使用自己的第三方伺服器來壓縮影象。出於效能原因，您應該始終在異地批量壓縮影象。
下面將向您展示Imagify是如何工作的。他們有一個免費的計劃，但即使是他們的專業計劃的價格也非常合理。我們優化了相當多的影象，我們正在使用“精簡版”計劃（每月1GB）就好了。每年支付，每月不到4.25美元。
Imagify具有三個不同的優化級別：
- Normal：此模式使用無失真壓縮，這意味著您的影象不會丟失任何質量，但它們的大小也不會減少太多。
- Aggressive： 此模式使用有失真壓縮並大幅節省初始權重，同時略微降低影象質量。大多數時候它甚至不明顯。
- Ultra： 此模式使用有失真壓縮並應用所有可用優化以實現最大影象壓縮。這將大大節省初始重量，但您很可能會注意到一些影象質量下降。
Imagify設定
演示使用Aggressive模式，通常會根據影象節省 60-70%。注意：實際上我們使用的PNG比JPEG多得多，因為我們的大多數影象都是圖示和插圖，而不是照片。
影象壓縮檔案節省
您可以在上傳時啟用自動優化影象（我們建議您不要忘記）或在媒體庫中使用它們的批量影象優化器。您也可以讓它備份原始影象。這使您可以在以後實際將影象轉換為其他優化級別，甚至可以恢復原始影象。如果您不使用此功能，我們建議您將其關閉以節省磁碟空間。
您通常應該事先調整影象大小，但Imagify確實具有調整更大影象的功能，以防您忘記或沒有時間。除了有失真壓縮，這是另一個大檔案大小節省程式！
Imagify調整影象大小
事實上，我們最近才在整個WordPress媒體庫中使用了批量影象優化功能。如您所見，它減少了700MB以上！這在前端效能方面是巨大的。
批量影象優化節省
速度測試
讓我們做一個小測試！由於我們經常看到使用者上傳未壓縮的全解析度影象，因此我們將對此進行一些比較，這會影響您網站的整體效能。
測試 1 – 原始未壓縮
我們首先上傳了10張未壓縮的影象。然後我們在Pingdom上進行了5次測試並取平均值。我們可以看到總載入時間為3.04秒，總頁面大小為28.4MB。
- uncompressed-1.jpg (2.82 MB)
- uncompressed-2.jpg (2.82 MB)
- uncompressed-3.jpg (2.82 MB)
- uncompressed-4.jpg (2.82 MB)
- uncompressed-5.jpg (2.82 MB)
- uncompressed-6.jpg (2.82 MB)
- uncompressed-7.jpg (2.82 MB)
- uncompressed-8.jpg (2.82 MB)
- uncompressed-9.jpg (2.82 MB)
- uncompressed-10.jpg (2.82 MB)
未壓縮速度測試（Pingdom）
測試 2 – 壓縮
然後我們再次上傳完全相同的影象，但這次我們在 Imagify 外掛中啟用了“自動優化”。然後我們再次在 Pingdom 上進行了 5 次測試並取平均值。
- compressed-1.jpg (69.3 KB)
- compressed-2.jpg (69.3 KB)
- compressed-3.jpg (69.3 KB)
- compressed-4.jpg (69.3 KB)
- compressed-5.jpg (69.3 KB)
- compressed-6.jpg (69.3 KB)
- compressed-7.jpg (69.3 KB)
- compressed-8.jpg (69.3 KB)
- compressed-9.jpg (69.3 KB)
- compressed-10.jpg (69.3 KB)
我們可以看到總載入時間現在是522毫秒，總頁面大小為901.4KB。因此，我們的有失真壓縮影象將頁面載入時間減少了 82.83%！😮 總頁面大小也減少了驚人的 96.83%。多虧了 Imagify，我們的影象看起來仍然是高質量的。
速度測試壓縮（Pingdom）
小結
一旦確定了您網站上所需的影象質量，您就可以選擇是否要使用有損或無失真壓縮。同樣，對於那些更關心速度而不是質量的人，我們建議使用有失真壓縮。請記住，如果您找到正確的平衡，有失真壓縮影象會看起來很漂亮。如果您需要畫素完美的影象，那麼您應該始終使用無失真壓縮。
評論留言