WordPress 圖像優化終極指南
已發表: 2017-06-141 … 2 … 3 … – 您的潛在客戶剛剛關閉了您的網站，因為它仍在加載中。 聽起來很熟悉？ 我相信你多次是那個不耐煩和沮喪的訪客。 我知道我是。 這就是為什麼我編制了一份關於圖像優化需要了解的最終清單。 它會很長，但我希望你會覺得它值得一讀。
目錄
- 3分鐘視頻中的本文內容
- 圖像優化的好處
- 圖像格式
- 上傳前調整圖像大小
- 用於自動調整圖像大小的 Imsanity WordPress 插件
- 壓縮圖像
- 最佳圖像壓縮在線工具
- 小PNG
- 優化
- 壓縮機
- 圖像優化
- 圖像較小
- 海妖
- JPEG.io
- PageSpeed 見解
- 最佳在線壓縮工具的結果
- JPEG 的最佳在線壓縮工具
- PNG的最佳在線壓縮工具
- 最佳在線圖像壓縮工具
- 用於圖像壓縮的最佳 WordPress 插件
- WP Smush（免費版）
- 通過 TinyPNG 壓縮 JPEG 和 PNG 圖像
- 短像素
- 想像一下
- EWWW 圖像優化器（免費版）
- 用於圖像壓縮的最佳 WordPress 插件的結果
- 用於壓縮 JPEG 的最佳 WordPress 插件
- 用於壓縮 PNG 的最佳 WordPress 插件
- 整體圖像壓縮的最佳 WordPress 插件
- 最佳圖像壓縮在線工具
- 結論
3分鐘視頻中的本文內容
這是本文的一個非常快速的視頻概述。 我仍然建議閱讀，但只是為了取笑你，我們開始吧：
圖像優化的好處
你還沒有賣掉所有的圖像優化東西嗎？ 讓我們看看如果你只解決這個小而微不足道的問題，你將獲得的所有好處：
- 您的網站會更快
- 您的 Google PageSpeed 分數會更好
- 谷歌會更喜歡你，你的搜索引擎排名也會提高
- 你的跳出率會更小，更多的訪問者會看到你的頁面
- 您將需要更少的服務器存儲空間，您將在服務器上花費更少的資源，這將為您節省資金
- 您將為自己和您的訪客節省移動數據計劃費用
我現在已經引起了你的注意，對吧？ 現在我們可以開始真正的工作了。
圖像格式
圖像優化從一些關於圖像格式的基本知識開始。 Internet 上最常見的兩種格式是擴展名為.png的PNG和擴展名為.jpg的JPEG 。 在大多數情況下，我會使用 JPEG，因為它是照片、漸變圖像和數百萬顏色圖像的最佳格式。 另一方面，PNG 更適合有限的彩色圖像，例如徽標，以及具有透明度的圖像。
下一個示例將向您展示選擇正確的圖像格式以獲得最佳圖像優化的重要性。
我將以.jpg和.png格式保存我們未優化的 child.jpg 圖像。 我們可以看到，圖像child-saved-as-jpeg.jpg是 3.1 MB 大，圖像child-saved-as-png.png是 4.5 MB 大。 在這種情況下，PNG 圖片比 JPEG 圖片大 45% ，這一差異僅源於選擇特定的圖像格式。 沒有更簡單的方法可以用這麼少的努力節省這麼多的空間。 好吧，也許有。 讓我們看看下一步。
上傳前調整圖像大小
我們在前面的示例中通過選擇正確的圖像格式節省了一些空間，但如果我們在上傳之前調整圖像大小，我們可以節省更多空間。 但是我們應該調整多少呢？ 這實際上取決於您網站的寬度和容器。
在我們的 ProteusThemes 網站上，圖像的最大寬度為 1110 像素，因此我將調整當前圖像child.jpg的大小（其寬度為 1800 像素）為 1110 像素。 在這種情況下，我們的大小剛剛從 3.1 MB 變為 1.1 MB，這又節省了 65%並減少了空間。
提示：您可以直接在 WordPress 媒體庫中調整圖像大小。 單擊媒體 -> 選擇您的圖像 -> 編輯圖像並為您的圖像選擇新尺寸：
用於自動調整圖像大小的 Imsanity WordPress 插件
如果您不想考慮調整圖像大小，或者如果許多不同的用戶將圖像上傳到您的網站，那麼 Imsanity 插件應該非常適合您。 在插件設置中，您可以選擇圖像應具有的最大寬度或高度，插件會將所有較大的圖像調整為該大小。 您還可以選擇批量調整大小功能來調整所有現有圖像的大小。 我絕對向任何在上傳之前分別調整每個圖像大小有問題的人推薦這個插件。 您可以免費下載 Imsanity 插件。
壓縮圖像
現在我們已經了解了圖像優化的基礎知識，讓我們看看如何提升我們的遊戲。 我們可以在互聯網上找到大量的圖像壓縮在線工具，甚至可以找到WordPress 插件，它們可以減小圖像的大小。 但是在這裡我們必須小心，有些工具幾乎沒有什麼區別，有些設置會破壞我們的形象，使其無用。 那麼，如何找到完美的平衡點呢？ 別擔心，在撰寫本文時（2017 年 6 月，2018 年更新），我們測試了所有最流行的在線工具/服務和 WordPress 插件以進行圖像優化，並且我們選擇了最好的。
我們使用了 3 個不同的 JPEG 圖像和 1 個 PNG 圖像來進行我們的測試。
所有 3 幅 JPEG 圖像均來自 Unsplash，作者是 Mi Pham、Breather、Denise Chan 和 Niko Virtanen。 出於測試目的，它們被裁剪並調整為 1110 x 624 像素。
對於 PNG 圖像，我們創建了自己的圖像，帶有 ProteusThemes 徽標和其背後的一些圖案。 就像 JPEG 測試圖像一樣，這張照片也被調整為 1110 x 624 像素。
我們現在將所有圖像通過所有選定的工具和插件進行壓縮，我們將找出哪一個是最適合您使用的。 讓我們從在線工具開始。
最佳圖像壓縮在線工具
在撰寫本文時（2017 年 6 月，2018 年更新），以下是最流行的圖像壓縮在線工具和服務的完整列表：
- 小PNG
- 優化
- 壓縮機
- 圖像優化
- 圖像較小
- 海妖
- JPEG.io
- PageSpeed 見解
如果您認為其他工具值得列入該列表，請告訴我們，我們將對其進行測試並將其添加到列表中。 您可以在下面找到我對每個工具的評論，以及我對最佳工具的評估。 如果您不想閱讀每個單獨的工具，請單擊此處 - 向我展示獲勝者！
小PNG
TinyPNG是我使用的第一個圖像壓縮工具之一，有時我仍然使用它。 沒有選項，您只需上傳圖像，然後將它們壓縮。 使用此在線工具，您最多可以批量上傳 20 張大小為 5 MB 的圖像。
優化
Optimizilla是另一個簡單但功能強大的在線工具。 它是免費使用的，並且可以選擇批量上傳多達 20 張圖片。 為了獲得最佳壓縮/質量比，我們將質量設置保留為 90，因為它是默認設置。 如果您想進一步推動壓縮，只需更改此設置，您就會立即看到質量的變化。
壓縮機
Compressor有可能成為圖像壓縮的最佳工具之一，但它有一個很大的缺陷。 目前沒有批量上傳選項，這意味著您一次只能壓縮 1 張圖片。 除此之外，它是免費的、易於使用的並且有兩個壓縮選項。 我們在測試中使用有損選項，因為壓縮後圖像的質量仍然保持不變。
圖像優化
ImageOptim是一個有很多設置的工具。 您可以在 3 種不同的質量選項和 3 種不同的顏色質量選項之間進行選擇。 我們發現，最好的壓縮/質量結果是使用默認設置。 將質量設置為中等，顏色質量設置為自動。 ImageOptim最讓我困擾的事情，在有點過時的設計旁邊， 即使我上傳PNG，它也會導出JPEG . 我已經向 Kornel（ImageOptim 的創建者）發送了一封關於該問題的電子郵件，他已經修復了它。
圖像較小
就像Compressor一樣， ImageSmaller也有同樣的缺陷。 沒有批量上傳的選項。 但是，它具有最大的上傳限制之一，即 50 MB。 如果您有更大的文件需要優化，那麼 ImageSmaller 可能是適合您的工具。
海妖
Kraken是一款高級圖像壓縮工具，是我測試過的所有工具中最好的儀表板。 您會發現用於上傳圖像的漂亮網絡界面和許多不同的設置以獲得最佳效果。 我們在測試中使用了他們的默認有損設置。
JPEG.io
JPEG.io是與Kraken相同的工具的免費版本。 它具有相同的壓縮功能，但就像網站的 URL 告訴我們的那樣，它僅適用於 JPEG。
PageSpeed 見解
你沒想到會在這裡看到這個，對吧？ 當我們測試我們的網站時， PageSpeed Insights還為我們提供了一個 .zip 壓縮文件。 這不是最用戶友好的方式，因為您必須讓您的網站與所有圖像一起在線，然後用新的壓縮圖像替換它們，但您將得到壓縮的圖像，就像 Google 想要的那樣。
最佳在線壓縮工具的結果
您將在下面找到包含我們所有測試結果的圖表。 您還可以查看我們的詳細電子表格以獲取更多信息。
JPEG 的最佳在線壓縮工具
大多數工具將我們的測試 JPEG 壓縮了大約 80% 。 讓我們看看我們的child.jpg圖像。 我們從 3.1 MB 大小的圖片開始，經過調整大小和壓縮後，我們的圖片只有 165 KB 大，這意味著尺寸縮小了 95% 。 現在，這是一個區別！ 我們設法使用Compressor和ImageOptim獲得了相同的結果。 所以，看起來我們在這裡有兩個贏家。
PNG的最佳在線壓縮工具
對於我們的 PNG 測試，我們使用所有工具平均減少了 50% 的大小。 然而， Optimizilla比其他的要好一點，我們的pt-logo.png圖像的大小減小了56% 。
最佳在線圖像壓縮工具
即使Optimizilla不是 JPEG 的最佳壓縮工具，我也會推薦它作為目前在線可用的最佳壓縮工具。 以 79% 壓縮的 JPEG 仍然很棒，您可以通過頁面上的簡單質量設置將其推得更高。 它還有一個批量上傳選項，其中缺少Compressor並且上傳比ImageOptim更可靠，其中所有圖像都導出為 JPEG，即使其中包括 PNG。 由於所有這些，我認為Optimizilla配得上最佳在線圖像壓縮工具的稱號。
接下來，讓我們看看 WordPress 插件是否可以擊敗在線圖像壓縮工具。
用於圖像壓縮的最佳 WordPress 插件
在線圖像工具和 WordPress 插件有什麼區別？ 好吧，如果您使用在線圖像工具進行圖像壓縮，您仍然需要將這些圖像上傳到您的 WordPress 網站然後使用它們。 如果您更喜歡將所有東西都放在一個地方，那麼用於圖像壓縮的 WordPress 插件可能是您的最佳選擇。 大多數插件還具有通過上傳優化圖像的選項，因此您可以打開該設置而忘記任何額外的工作。
我為每個插件創建了一個新的 WordPress 網站，每次都上傳相同的 4 張圖片。 不同的插件有不同的設置，所以我一直在尋找壓縮和圖像質量之間的完美平衡。
我測試了以下插件：
- WP Smush（免費版）
- 通過 TinyPNG 壓縮 JPEG 和 PNG 圖像
- 短像素
- 想像一下
- EWWW 圖像優化器（免費版）
就像我之前提到的，如果您知道我們應該測試的任何其他插件，請告訴我們，我們會將其添加到列表中。 如果您不想了解有關這些插件的更多信息，請單擊此處 – 向我展示獲獎者！
WP Smush（免費版）
WP Smush是我所知道的最古老的圖像壓縮插件之一。 與所有其他插件相比，它有一個很好的優勢，因為無需註冊即可使用免費版本。 它還具有自動壓縮新上傳圖像的選項，因此一旦設置了插件，您就可以忘記它，它將在後台為您完成所有工作。 不幸的是，壓縮結果是免費版本中最差的結果之一，所以我不建議使用它。 他們已經在他們的網站上聲明，專業版的壓縮效果要好得多，所以我也會在文章的下一次更新中測試這個。
通過 TinyPNG 壓縮 JPEG 和 PNG 圖像
就像TinyPNG在線壓縮工具一樣，WordPress 插件也非常簡單。 完成註冊後，它的設置很少，基本上可以開箱即用。 所有新上傳的圖像也可以自動壓縮，因此您可以激活插件並忘記它。
短像素
就個人而言， ShortPixel是最大的驚喜之一。 我在研究之前從未聽說過它，我真的印象深刻。 使用默認的有損推薦設置，它在 WordPress 插件之間具有最佳壓縮效果，並且它還具有光澤選項。 此選項適用於需要非常高質量的圖片並且不能因質量損失而妥協的攝影師或任何其他專業人士。
想像一下
Imagify是一個插件，由著名的WP Rocket插件作者製作。 註冊後，您將獲得一些明確的選項可供選擇。 為獲得最佳定量壓縮和圖像質量，請選擇激進模式。 設置中的一件好事也是一個選項，可以為原始圖像設置一個單獨的文件夾，以防壓縮出現任何問題。 我唯一不完全理解的是，為什麼我們必須切換到媒體中的列表視圖才能看到壓縮結果。 除此之外，Imagify 是一個非常好的和可靠的插件。
EWWW 圖像優化器（免費版）
EWWW Image Optimizer是唯一的插件，它給了我一些錯誤。 首先，我在自己的主機上進行了嘗試，但出現了一個錯誤，即 EWWW Image Optimizer 需要 exec() 或 API 密鑰。 下次我在本地開發 WordPress 網站上嘗試該插件時，我收到一個錯誤，提示我缺少 pngout。 我按照有關如何安裝它的說明進行操作，該插件終於可以進行測試了。 由於我測試了免費版本，因此只有一個無損選項，這並沒有帶來最好的結果。 就像使用 WP Smush 一樣，我還將在下一篇文章更新中測試 EWWW Image Optimizer 專業版，我們將看看它是否會表現得更好。
用於圖像壓縮的最佳 WordPress 插件的結果
就像之前一樣，您會在下面找到包含我們所有測試結果的圖表。 您還可以查看我們的詳細電子表格以獲取更多信息。
用於壓縮 JPEG 的最佳 WordPress 插件
ShortPixel是贏家，平均壓縮率為 84% 。 與最佳在線壓縮工具類別中的Compressor和ImageOptim相同。 第二好的插件是Imagify ，平均壓縮率為 70% 。 我宣布ShortPixel目前是該類別的絕對贏家。
用於壓縮 PNG 的最佳 WordPress 插件
最好的 PNG 壓縮插件是TinyPNG的Compress JPEG & PNG images ，壓縮率為 56% 。 有趣的是，最好的結果再次與最佳在線壓縮工具類別相同。 但是，其他插件在這裡更具競爭力，壓縮率約為 50% 。
整體圖像壓縮的最佳 WordPress 插件
在我看來，用戶體驗、不同設置和壓縮之間的最佳比例來自ShortPixel插件。 總的來說，它是一個非常可靠的插件，有很多選項，但也有很好的默認設置。 您可以在註冊後立即開始使用該插件，最重要的是，壓縮非常好。 目前，我會為我自己的網站使用ShortPixel插件，尤其是如果大多數圖像都是 JPEG 格式的話。
結論
那是一次長途旅行，對吧？ 同時，我們設法將child.jpg圖像壓縮到 95% 。 如果您只遵循這3 個簡單的步驟，您的網站可以運行得更快。 讓我們再重複一遍：
- 選擇正確的圖像格式
- 上傳前調整圖片大小
- 使用在線工具或 WordPress 插件壓縮圖像
另一件重要的事情是，您對每個圖像僅使用一個工具或 WordPress 插件，因為它們中的大多數都具有某種有損壓縮，這意味著您的圖像質量可能會隨著每次額外壓縮而變得更糟，而這是我們所做的不想。 如果您想檢查它們之間的質量比較或自己測試一些其他工具和插件，我們還在 GitHub 上添加了所有測試圖像。
你不應該有任何不壓縮圖像的藉口。 有很多工具和不同的方法可以做到這一點，我們已經證明了這一點，最終它是值得的。 選擇您自己的在線壓縮或 WordPress 插件的個人獲勝者，並在優化前後檢查您的網站 Google PageSpeed 得分。 在我們的評論部分分享您的網站速度和分數改進信息。 我還想知道，這篇文章是否對您進行圖像優化有幫助，您對此有何看法。