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

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

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

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

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

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

最后,您應(yīng)該單擊“導(dǎo)出”按鈕以保存優(yōu)化的圖像文件。
TinyPNG
是一款免費(fèi)的網(wǎng)絡(luò)應(yīng)用程序,它使用智能有損壓縮技術(shù)來減小 PNG 和 JPEG 文件的大小。您所要做的就是訪問他們的網(wǎng)站并使用簡單的拖放來上傳您的圖像。

他們將壓縮圖像并為您提供下載鏈接。
他們還有一個(gè) Adobe Photoshop 擴(kuò)展,這是我們在圖像編輯過程中使用的內(nèi)容,因?yàn)樗试S您從 Photoshop 內(nèi)部訪問 TinyPNG。
對于開發(fā)人員來說,他們有一個(gè) API 來自動轉(zhuǎn)換圖像。此外,對于初學(xué)者,他們有一個(gè) WordPress 插件可以為您完成。我們稍后會詳細(xì)討論這個(gè)問題。
JPEGmini
使用無損壓縮技術(shù),可在不影響其感知質(zhì)量的情況下顯著減小圖像的大小。您還可以比較原始圖像和壓縮圖像的質(zhì)量。

您可以免費(fèi)使用他們的網(wǎng)絡(luò)版本或?yàn)槟挠?jì)算機(jī)購買該程序。他們還有一個(gè)付費(fèi)的 API 來自動化您的服務(wù)器的流程。
imageOptim
是一個(gè) Mac 實(shí)用程序,它允許您通過查找最佳壓縮參數(shù)和刪除不必要的顏色配置文件來壓縮圖像而不會損失任何質(zhì)量。

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






