您是否知道使用優化后的圖像對WordPress網站的速度有著重要的作用?
在本文是關于從圖像的三個方面優化圖片大小的教程。我們還將分享了一些優化圖像的工具,讓您的生活更輕松。
1. 圖像是如何優化的?
圖像的優化是在不降低整體圖像質量的情況下以盡可能小的文件大小保存和交付圖像的過程。
下面是優化與未優化映像的示例:

如果優化得當,相同的圖像最多可以比原始圖像小 80%,而不會降低任何質量。在此示例中,圖像縮小了 52%。
簡單來說,圖像優化是通過使用壓縮技術來工作的。
壓縮可以是“有損”或“無損”的。
無損壓縮減小了整體文件大小,絕對不會損失圖像質量。使用有損壓縮時,質量可能會略有下降,但理想情況下,訪問者不會注意到它。
2. 網站上使用優化圖像有那些好處?
雖然優化圖像有很多好處,但以下是您應該知道的最重要的好處:
- 更快的網站速度
- 提高SEO排名
- 更高的銷售和潛在客戶的總體轉化率
- 更少的存儲和帶寬(可以降低托管和 CDN 成本)
- 更快的網站備份(可以降低備份存儲成本)
圖像是網頁上僅次于視頻的第二大項目。
3. 如何保存和優化圖像以提高 Web 性能
成功優化 Web 性能圖像的關鍵是在最小的文件大小和可接受的圖像質量之間找到完美的平衡。
在圖像優化中起著巨大作用的三件事是:
- 圖像文件格式 (JPEG vs. PNG vs. GIF)
- 壓縮(更高的壓縮 = 更小的文件大小)
- 圖像尺寸(高度和寬度)
通過選擇三者的正確組合,您可以將圖像大小減小多達 80%。
讓我們更詳細地看一下其中的每一個。
1.圖像文件格式
對于大多數網站所有者來說,真正重要的只有三種圖像文件格式是 JPEG、PNG 和 GIF。選擇正確的文件類型在圖像優化中起著重要作用。
如果圖片格式錯誤無法在PS上編輯,在Windows中請右擊圖像以畫圖方式打開,若圖片展示無誤在另存中以描述選擇所需的格式。
為了簡單起見,您希望將 JPEG 用于具有多種顏色的照片或圖像,將 PNG 用于簡單或透明圖像,將 GIF 用于僅用于動畫圖像。
對于那些不知道每種文件類型之間差異的人來說,PNG 圖像格式是未壓縮的,這意味著它是更高質量的圖像。缺點是文件大小要大得多。
另一方面,JPEG 是一種壓縮文件格式,它會略微降低圖像質量以提供顯著更小的文件大小。
而 GIF 僅使用 256 種顏色以及無損壓縮,這使其成為動畫圖像的最佳選擇。
在WPBeginner上,我們根據圖像類型使用所有三種圖像格式。
2. 壓縮
接下來是圖像壓縮,它在圖像優化中起著巨大的作用。
有不同類型和級別的圖像壓縮可用。每個設置將根據您的圖像壓縮工具而有所不同。
大多數圖像編輯工具(如 Adobe Photoshop、ON1 Photo、GIMP、Affinity Photo 等)都具有內置的圖像壓縮功能。
您也可以正常保存圖像,然后使用 TinyPNG 或 JPEGmini 等網絡工具更輕松地壓縮圖像。
雖然它們需要一些手動工作,但這兩種方法允許您在將圖像上傳到 WordPress 之前對其進行壓縮,這就是我們在 WPBeginner 上所做的。
還有幾個流行的 WordPress 插件,例如 Optimole 和 EWWW Image Optimizer,它們可以在您首次上傳圖像時自動壓縮圖像。這很方便,許多初學者甚至大公司都更喜歡使用這些圖像優化插件。
3. 圖像尺寸
通常,當您從手機或數碼相機導入照片時,它具有非常高的分辨率和較大的文件尺寸(高度和寬度)。
通常,這些照片的分辨率為 300 DPI,尺寸從 2000 像素開始。雖然高質量的照片非常適合印刷或桌面出版,但它們的大尺寸使它們不適合網站。
將圖像尺寸減小到更合理的尺寸可以顯著減小圖像文件大小。您可以使用計算機上的圖像編輯軟件簡單地調整圖像大小。
例如,我們優化了分辨率為 300 DPI 且圖像尺寸為 4900×3200 像素的照片。原始文件大小為 1.8 MB。
我們選擇了JPEG格式以獲得更高的壓縮率,并將尺寸更改為1200×795像素。文件大小減少到只有 103 KB。這比原始文件大小小 94%。
現在您已經了解了圖像優化的三個重要因素,讓我們來看看各種圖像優化工具。
4. 最佳圖像優化工具和程序
1.Adobe Photoshop
Adobe Photoshop 是一款高級圖像編輯應用程序,可讓您將文件大小較小的圖像導出到 Web 上。

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

2.TinyPNG
TinyPNG 是一款免費的 Web 應用程序,它使用智能有損壓縮技術來減小 PNG 和 JPEG 文件的大小。您所要做的就是訪問他們的網站并使用簡單的拖放上傳您的圖像。

他們將壓縮圖像并為您提供下載鏈接。
他們還有一個 Adobe Photoshop 的擴展,這是我們在圖像編輯過程中使用的擴展,因為它允許您從 Photoshop 內部訪問 TinyPNG。
對于開發人員來說,他們有一個 API 來自動轉換圖像。此外,對于初學者,他們有一個 WordPress 插件可以為您完成。我們稍后會詳細討論這個問題。
本文列出的工具并非完全好用,可通過網頁或人工智能助手查找適合自己的工具。





