時,許多初學者只是上傳圖像,而沒有針對網絡進行優化。這些大圖像文件會使您的網站變慢。在本文中,我們將向您展示如何在不損失質量的情況下優化圖像以獲得更快的 Web 性能。我們還將分享 WordPress 的自動圖像優化插件,讓您的生活更輕松。

由于這是一份關于網絡圖像優化的綜合指南,因此我們創建了一個易于遵循的目錄:
-
-
圖像優化有什么好處?
-
-
-
-
1. 什么是圖像優化?
圖像優化是在不降低整體圖像質量的情況下以盡可能小的文件大小保存和交付圖像的過程。
雖然這個過程聽起來很復雜,但現在實際上很容易。您可以使用眾多圖像優化插件和工具之一自動將圖像壓縮高達 80%,而不會造成任何明顯的圖像質量損失。
下面是優化圖像與未優化圖像的示例:

如您所見,如果優化得當,相同的圖像可以比原始圖像小 80%,而不會造成任何質量損失。在此示例中,圖像縮小了 52%。
圖像優化如何工作?
簡單來說,圖像優化通過使用壓縮技術來工作。
壓縮可以是“有損”或“無損”。
無損壓縮減小了整體文件大小,絕對不會損失圖像質量。使用有損壓縮時,質量可能會略有下降,但理想情況下,您的訪問者不會注意到它。
優化圖像意味著什么?
您可能已經收到了來自 WordPress 托管支持或速度測試工具的優化圖像的建議,并想知道您需要做什么。
您需要通過針對網絡優化圖像來減小圖像的文件大小。我們將逐步向您展示如何做到這一點。
2. 圖像優化有什么好處?
雖然優化圖像有很多好處,但以下是您應該了解的首要好處:
-
更快的網站速度
-
提高SEO排名
-
提高銷售和潛在客戶的整體轉化率
-
更少的存儲和帶寬(可以降低托管和 CDN 成本)
-
更快的網站備份(可以降低備份存儲成本)
圖片是網頁上僅次于視頻的第二重項目。根據 ,圖像占平均網頁總重量的 42%。
由于我們知道快速網站在搜索引擎 (SEO) 中的排名更高并且轉化率更高,因此圖像優化是每個商業網站想要在線成功都必須做的事情。
現在您可能想知道圖像優化到底能帶來多大的影響。
根據 Strangeloop 的一項研究,網站加載時間延遲一秒鐘可能會使您損失 7% 的銷售額、11% 的瀏覽量和 16% 的客戶滿意度下降。

如果這些還不足以加速您的網站,那么您應該知道,像 Google 這樣的搜索引擎也會對加載速度更快的網站給予優先的 SEO 待遇。
這意味著,通過優化您的網絡圖像,您既可以提高。
3. 如何保存和優化圖像以提高 Web 性能
成功優化 Web 性能圖像的關鍵是在最小文件大小和可接受的圖像質量之間找到完美的平衡。
在圖像優化中發揮巨大作用的三件事是:
-
圖像文件格式(JPEG vs.PNG vs.GIF)
-
壓縮(更高的壓縮率 = 更小的文件大小)
-
圖像尺寸(高度和寬度)
通過選擇三者的正確組合,您可以將圖像尺寸減少多達 80%。
讓我們更詳細地看一下其中的每一個。
1.圖像文件格式
對于大多數網站所有者來說,真正重要的只有三種圖像文件格式是 JPEG、PNG 和 GIF。選擇正確的文件類型在圖像優化中起著重要作用。
為了簡單起見,您希望將 JPEG 用于具有多種顏色的照片或圖像,將 PNG 用于簡單或透明圖像,將 GIF 用于僅用于動畫圖像。
對于那些不知道每種文件類型之間區別的人來說,PNG 圖像格式是未壓縮的,這意味著它是更高質量的圖像。缺點是文件大小要大得多。
另一方面,JPEG 是一種壓縮文件格式,它會略微降低圖像質量,以提供明顯更小的文件大小。
而 GIF 僅使用 256 種顏色以及無損壓縮,這使其成為動畫圖像的最佳選擇。
在 WPBeginner 上,我們根據圖像類型使用所有三種圖像格式。
2. 壓縮
接下來是圖像壓縮,它在圖像優化中起著巨大的作用。
有不同類型和級別的圖像壓縮可用。每個設置的設置將根據您的圖像壓縮工具而有所不同。
大多數圖像編輯工具(如 、 Photo、GIMP、Affinity Photo 等)都具有內置的圖像壓縮功能。
您還可以正常保存圖像,然后使用 或 等網絡工具更輕松地壓縮圖像。
盡管它們需要一些手動操作,但這兩種方法允許您在將圖像上傳到 WordPress 之前對其進行壓縮,這就是我們在 WPBeginner 上所做的。
還有幾個流行的 WordPress 插件,例如 和 ,它們可以在您首次上傳圖像時自動壓縮圖像。這很方便,許多初學者甚至大公司都更喜歡使用這些圖像優化插件。
我們將在本文后面分享更多關于使用 WordPress 插件的信息。
3. 圖像尺寸
通常,當您從手機或數碼相機導入照片時,它具有非常高的分辨率和較大的文件尺寸(高度和寬度)。
通常,這些照片的分辨率為 300 DPI,尺寸從 2000 像素或更高開始。雖然高質量的照片非常適合印刷或桌面出版,但它們的大尺寸使它們不適合網站。
將圖像尺寸減小到更合理的尺寸可以顯著減小圖像文件大小。您可以使用計算機上的圖像編輯軟件簡單地。
例如,我們優化了分辨率為 300 DPI、圖像尺寸為 4900×3200 像素的照片。原始文件大小為 1.8 MB。
我們選擇了 JPEG 格式以獲得更高的壓縮率,并將尺寸更改為 1200×795 像素。文件大小減少到僅 103 KB。這比原始文件大小小 94%。
現在您已經了解了圖像優化中的三個重要因素,讓我們來看看網站所有者的各種圖像優化工具。
4. 最佳圖像優化工具和程序
正如我們前面提到的,大多數圖像編輯軟件都帶有圖像優化和壓縮設置。
除了圖像編輯軟件之外,還有幾個強大的免費圖像優化工具,您可以使用它們來優化網絡圖像(只需單擊幾下)。
我們建議您在將圖像上傳到 WordPress 之前使用這些工具來優化圖像,特別是如果您是完美主義者。
此方法可幫助您節省 WordPress 托管帳戶上的磁盤空間,并且由于您手動查看每個圖像,因此可以保證最快的圖像和最佳質量。
Adobe Photoshop的
是一款高級圖像編輯應用程序,可讓您導出文件大小較小的圖像以供 Web 使用。

使用導出對話框,您可以選擇具有最小文件大小的圖像文件格式(JPG、PNG、GIF)。
您還可以降低圖像質量、顏色和其他選項以進一步減小文件大小。

GIMP公司
是Adobe Photoshop的免費開源替代品。它可用于優化您的網絡圖像。缺點是它不像此列表中的其他一些解決方案那樣容易使用。
首先,您需要在 GIMP 中打開圖像,然后選擇 File ? Export As...選項。這將打開“導出圖像”對話框,您可以在其中為文件指定一個新名稱。接下來,您需要單擊“導出”按鈕。
您現在將看到圖像導出選項。對于 JPEG 文件,您可以使用“質量”滑塊來選擇壓縮級別并減小文件大小。

最后,您應該單擊“導出”按鈕以保存優化的圖像文件。
TinyPNG
是一款免費的網絡應用程序,它使用智能有損壓縮技術來減小 PNG 和 JPEG 文件的大小。您所要做的就是訪問他們的網站并使用簡單的拖放來上傳您的圖像。

他們將壓縮圖像并為您提供下載鏈接。
他們還有一個 Adobe Photoshop 擴展,這是我們在圖像編輯過程中使用的內容,因為它允許您從 Photoshop 內部訪問 TinyPNG。
對于開發人員來說,他們有一個 API 來自動轉換圖像。此外,對于初學者,他們有一個 WordPress 插件可以為您完成。我們稍后會詳細討論這個問題。
JPEGmini
使用無損壓縮技術,可在不影響其感知質量的情況下顯著減小圖像的大小。您還可以比較原始圖像和壓縮圖像的質量。

您可以免費使用他們的網絡版本或為您的計算機購買該程序。他們還有一個付費的 API 來自動化您的服務器的流程。
imageOptim
是一個 Mac 實用程序,它允許您通過查找最佳壓縮參數和刪除不必要的顏色配置文件來壓縮圖像而不會損失任何質量。

Windows 的替代方案是 。
5. WordPress 的最佳圖像優化插件
我們認為,優化圖像的最佳方法是在將圖像上傳到 WordPress 之前進行優化。但是,如果您運行多作者網站或需要自動化解決方案,那么您可以嘗試使用 。
以下是我們最好的 WordPress 圖像壓縮插件列表:
-
背后團隊的流行插件
-
-
,上面提到的 TinyPNG 團隊的插件
-
,流行的 團隊的插件
-
-
-
-
是一個內置圖像壓縮的 WordPress 畫廊插件
這些 WordPress 圖像優化插件將幫助您加快網站速度。
6. 圖像優化的最終想法和最佳實踐
如果您沒有保存針對 Web 優化的圖像,那么您需要立即開始這樣做。這將對您的網站速度產生巨大影響,您的用戶會為此感謝您。
更不用說,更快的網站非常適合 SEO,您可能會看到搜索引擎排名的提高。
除了圖像優化之外,可以顯著幫助您加快網站速度的兩件事是使用 WordPress 和使用 。
或者,您可以使用公司,因為他們通常同時提供緩存和 CDN 作為平臺的一部分。
我們希望本文能幫助您學習如何在 WordPress 中優化圖像。






