如何優化網站圖片以提升性能而不降低質量
最後更新於 2024 年 5 月 1 日，由編輯部撰寫 | 審核人：Syed Balkhi
編輯注：我們從 WPressize Me 的合作鏈接中賺取佣金。佣金不會影響我們編輯的意見或評價。了解更多關於編輯流程的信息。
你知道在將圖片上傳到 WordPress 之前進行優化可以對網站速度產生巨大影響嗎？許多新手在開始博客時，會在未進行圖片優化的情況下直接上傳圖片，這些大文件會使網站變慢。
你可以通過將圖片優化作為常規博客操作的一部分來解決這個問題。
本文將展示如何在不降低質量的情況下，優化圖片以提高網站性能。我們還會分享可以幫助你自動優化圖片的 WordPress 外掛，使你的生活更加輕鬆。
目錄
- 什麼是圖片優化？
- 圖片優化的好處
- 如何保存和優化圖片以提高網站性能
- 最佳圖片優化工具和程序
- 最佳 WordPress 圖片優化外掛
- 圖片優化的最終建議和最佳實踐
- 改善 WordPress 性能的專家指南
什麼是圖片優化？
圖片優化是指在不降低圖片質量的情況下，以最小的文件大小保存和傳遞圖片。
儘管這個過程聽起來很複雜，但如今其實很容易實現。你可以使用許多圖片優化外掛和工具，自動壓縮圖片最多達 80% 而不會對圖片質量造成任何明顯影響。
例如，經過適當優化，同樣的圖片可以變成比原來小 80%，而不會有任何質量損失。在這個例子中，圖片大小減少了 52%。
圖片優化是如何工作的？
簡單來說，圖片優化是通過使用壓縮技術實現的。
壓縮可以是「有損」或「無損」的。
無損壓縮在無損圖片質量的情況下減少文件大小。有損壓縮可能會有輕微的質量損失，但理想情況下，這些損失對訪問者來說是不可見的。
優化圖片意味著什麼？
你可能收到 WordPress 主機支持或速度測試工具的建議，讓你優化圖片，但不知該怎麼做。
你需要通過優化圖片來減少圖片文件大小。下面我們會一步步展示如何操作。
圖片優化的好處
雖然優化圖片有很多好處，但以下這些是你應該了解的頂級好處：
- 更快的網站速度
- 改善的 SEO 排名
- 更高的銷售和潛在客戶轉化率
- 更少的存儲和帶寬使用（可以減少主機和 CDN 成本）
- 更快的網站備份（可以減少備份存儲成本）
根據 HTTP 檔案庫，圖片是網頁中僅次於視頻的第二重項目，佔平均網頁總重量的 42%。
由於我們知道快速網站在搜索引擎（SEO）中的排名更高，並且有更好的轉化率，圖片優化是每個希望在線成功的業務網站必須做的事情。
你可能會想知道圖片優化究竟能帶來多大的差異。
根據Strangeloop 的研究，網站載入時間延遲一秒鐘可能會讓你損失 7% 的銷售額、11% 的頁面瀏覽量和 16% 的客戶滿意度。
如果這些理由還不足以加快你網站的速度，那你應該知道像 Google 這樣的搜索引擎也會給更快速載入的網站 SEO 優待。
這意味著通過優化圖片，你可以同時提高網站速度和提升 WordPress SEO 排名。
如何保存和優化圖片以提高網站性能
成功的網絡性能圖片優化的關鍵在於找到最小文件大小和可接受的圖片質量之間的完美平衡。
在圖片優化中，三個重要因素是：
- 圖片文件格式（JPEG vs. PNG vs. GIF）
- 壓縮（壓縮率越高，文件大小越小）
- 圖片尺寸（高度和寬度）
通過正確組合這三者，你可以將圖片大小減少最多 80%。
以下是每個因素的詳細介紹。
1. 圖片文件格式
對於大多數網站所有者來說，實際上最重要的三種圖片文件格式是 JPEG、PNG 和 GIF。選擇正確的文件類型在圖片優化中起著重要作用。
為了簡單起見，你應該為照片或顏色豐富的圖片使用 JPEG，為簡單或透明的圖片使用 PNG，為動畫圖片僅使用 GIF。
為那些不知道這些文件類型區別的人，PNG 文件格式是未壓縮的，即高質量圖片，唯一的缺點是文件大小較大。
另一方面，JPEG 是一種壓縮文件格式，稍微降低了圖片質量，但顯著減少了文件大小。
而 GIF 只使用 256 種顏色以及無損壓縮，這使其成為動畫圖片的最佳選擇。
在 WPressize Me 上，我們根據圖片類型使用所有三種圖片格式。
2. 壓縮
接下來是圖片壓縮，這在圖片優化中起著巨大作用。
有不同類型和級別的圖片壓縮可供選擇。每個工具的設置會有所不同。
大多數圖片編輯工具，如 Adobe Photoshop、ON1 Photo、GIMP、Affinity Photo 等，都內建了圖片壓縮功能。
你也可以正常保存圖片，然後使用像 TinyPNG 或 JPEGmini 這樣的網絡工具來進行更簡單的圖片壓縮。
儘管這些方法需要一些手動操作，但這兩種方法讓你可以在上傳到 WordPress 之前壓縮圖片，這也是我們在 WPressize Me 上的做法。
還有一些流行的 WordPress 外掛，如 Optimole 和 EWWW Image Optimizer，可以在你首次上傳圖片時自動壓縮圖片。這既方便，又是許多新手和大型企業偏愛的圖片優化方式。
稍後我們會分享更多有關使用 WordPress 外掛的信息。
3. 圖片尺寸
通常，當你從手機或數碼相機導入照片時，它們具有非常高的解析度和較大的文件尺寸（高度和寬度）。
這些照片通常具有 300 DPI 的解析度和從 2000 像素開始的尺寸。儘管高品質照片適合打印或桌面出版，但它們的大尺寸使其不適合網站。
將圖片尺寸縮小到更合理的範圍可以顯著減少圖片文件大小。你可以使用電腦上的圖片編輯軟件簡單地調整圖片大小。
例如，我們優化了一張解析度為 300 DPI、尺寸為 4900×3200 像素的照片。原始文件大小為 1.8 MB。
我們選擇 JPEG 格式以實現更高壓縮，並將尺寸更改為 1200×795 像素。文件大小縮小到僅 103 KB。這比原始文件大小小了 94%。
現在你已經知道圖片優化的三個重要因素，讓我們看一下網站所有者可以使用的各種圖片優化工具。
最佳圖片優化工具和程序
正如我們之前提到的，大多數圖片編輯軟件都帶有圖片優化和壓縮設置。
除了圖片編輯軟件，還有一些功能強大的免費圖片優化工具，你可以用它們來優化網絡圖片（只需幾下點擊）。
我們推薦在上傳到 WordPress 之前，使用這些工具優化圖片，特別是如果你對質量要求較高。
這種方法可以幫助你節省 WordPress 主機帳號上的磁碟空間，並保證最快速且最優質的圖片，因為你會手動審查每張圖片。
Adobe Photoshop
Adobe Photoshop 是一款高級圖片編輯應用程序，讓你可以導出網絡使用的小文件大小圖片。
使用導出對話框，你可以選擇給你最小文件大小的圖片文件格式（JPG、PNG、GIF）。
你還可以減少圖片質量、顏色和其他選項以進一步減少文件大小。
GIMP
GIMP 是 Adobe Photoshop 的免費且開源的替代品。它可以用來優化你的網絡圖片。缺點是它不如本文列出的一些其他解決方案使用方便。
首先，你需要在 GIMP 中打開你的圖片，然後選擇「文件」>「另存為…」選項。這將打開「導出圖片」對話框，你可以在其中為文件指定新名稱。接下來，你需要點擊「導出」按鈕。
現在你會看到圖片導出選項。對於 JPEG 文件，你可以使用「質量」滑杆來選擇壓縮級別並減少文件大小。
最後，你應該點擊「導出」按鈕以保存優化後的圖片文件。
TinyPNG
TinyPNG 是一個免費網絡應用，使用智能有損壓縮技術減少你的 PNG 和 JPEG 文件大小。你只需訪問他們的網站，使用簡單的拖放操作上傳圖片即可。
它們會壓縮圖片並提供下載連結。
他們還有一個 Adobe Photoshop 擴展，這是我們在圖片編輯過程中使用的，因為它讓你可以在 Photoshop 內訪問 TinyPNG。
對於開發者，他們有一個 API 可以自動轉換圖片。另外，對於初學者，他們有一個 WordPress 外掛會為你自動優化圖片。我們會稍後詳細討論這一點。
JPEGmini
JPEGmini 使用無損壓縮技術，顯著減少圖片大小而不影響其感知質量。你還可以比較原圖和壓縮後的圖片質量。
你可以免費使用他們的網絡版本，或購買電腦端程序。他們也有一個付費 API，可以自動為你的服務器進行圖片壓縮。
ImageOptim
ImageOptim 是一款 Mac 降低圖片質量的工具，可以在不損失任何質量的情況下壓縮圖片，通過找到最佳壓縮參數並移除不必要的色彩配置文件。
Windows 的替代品是 Trimage。
最佳 WordPress 圖片優化外掛
我們認為優化圖片最好的方法是在上傳 WordPress 之前進行。但是，如果你運營一個多作者網站或需要自動化解決方案，那麼可以嘗試使用 WordPress 圖片壓縮外掛。
以下是我們推薦的最佳 WordPress 圖片壓縮外掛列表：
- Optimole，由 ThemeIsle 團隊開發的受歡迎插件
- EWWW Image Optimizer
- JPEG, PNG & WebP Image Compression，由 TinyPNG 團隊開發的插件
- Imagify，由受歡迎的 WP Rocket 團隊開發的插件
- ShortPixel Image Optimizer
- Smush
- reSmush.it
- Envira Gallery，是一個內建圖片壓縮功能的 WordPress 畫廊插件
這些 WordPress 圖片優化外掛將幫助你加快網站速度。
如果你不設置圖片優化，那麼你應該立即開始這樣做。這會對你網站速度產生巨大的影響，並且你的用戶會感謝你。
此外，更快的網站對 SEO 很有幫助，你很可能會看到你的搜索引擎排名上升。
除了圖片優化，還有兩件事可以顯著幫助你加快網站速度：使用 WordPress 緩存插件和使用 WordPress CDN。
或者，你可以使用管理 WordPress 託管公司，因為他們通常在平台上提供緩存和 CDN 服務。
改善 WordPress 性能的專家指南
現在你已經知道如何通過優化圖片來加快網站速度，你可能會想查看一些相關的文章，瞭解更多提升 WordPress 性能的方法。
- 提升 WordPress 速度和性能的終極指南
- 如何加快 WooCommerce 性能
- 最佳 WordPress 緩存插件，加快網站速度
- 如何優化核心 Web Vitals 的 WordPress（終極指南）
- 如何減少 WordPress 的首字節時間（TTFB）：專家提示
- 如何使用 GTmetrix 插件提升 WordPress 站點性能
- 最快的 WordPress 託管（性能測試）
- 在 WordPress 站點上應測量的重要指標
- 如何正確執行網站速度測試
- 如何對 WordPress 網站進行壓力測試
希望這篇文章能幫助你學會如何在 WordPress 中優化圖片。你也可以查看我們的 WordPress 安全指南或我們為商業網站推薦的最佳 WordPress 插件。
如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道，以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。
