如何優化網絡圖像：提高網站性能的分步指南

毫無疑問，圖像是萬維網的寶貴資產。 從可視化數據到分解文本段落，再到展示您的作品集，照片和圖形是大多數網站設計的重要組成部分，可幫助用戶獲得出色的在線體驗。

但是，擁有出色的視覺效果可能會對您的網站造成影響。 分辨率越高，文件越大，這也意味著加載時間越慢。 AKA，圖像通常是網站性能不佳的原因。 請記住，向您的網站添加圖片的全部目的是為您的用戶創造更好的體驗（或者甚至可能增加銷售和轉化！），這對於速度較慢的網站來說很難做到。

那麼，您如何平衡網站性能與視覺設計？

通過優化您的圖像。

在整個圖像創建過程中，您可以做很多小事來優化文件大小，特別是考慮到您的網站。

在這個圖像優化分步指南中，我將介紹：

• 什麼是圖像優化？
• 為什麼圖像優化很重要？
• 為網絡優化圖像的 7 種方法

什麼是圖像優化？

一般來說，圖像優化是在不損失質量的情況下減小文件大小的行為。 您可以在創建階段（例如在 Photoshop 中使用正確的“導出”選項）或直接在您的網站上優化您的圖像（例如使用延遲加載在您的網站上顯示媒體）。 目標是減少用戶必須下載的數據量，以便他們可以更快地獲得他們正在尋找的內容。

為什麼圖像優化很重要？

人們對網絡的關注時間很短，這就是為什麼讓您的網站在兩秒或更短的時間內加載很重要的原因。 減慢網站速度的最常見因素之一是您的圖片。 （即使您的網站運行在最好的服務器上，就像使用託管 WordPress 主機一樣，圖像也可能會導致性能下降。）

然而，圖像優化很重要還有另一個原因，它與您的業務底線直接相關。 除了減慢您的網站速度之外，圖像還會佔用為您的網站提供動力的服務器上的磁盤空間。 大多數託管服務提供商都會對每個計劃實施帶寬限制，這意味著您沒有無限的資源——您的圖像將很快佔用該空間。

如果您超過該限制，這並不是世界末日，但您可能會被收取超額費用或更糟的費用——關閉您的網站。

通過優化您的圖像，您將能夠充分利用您的站點存儲空間並避免帶寬限制。

既然知道了圖像優化的重要性，那我們就來說說怎麼做吧！ 這個分步指南將涵蓋從 Photoshop 技巧到開發實踐的所有內容。

如何為網絡優化圖像

這個分步指南將涵蓋您可以做的一切來優化圖像，從 Photoshop 開始，到您的網站結束。

請按照以下步驟優化圖像以獲得更好的網站性能：

1. 對您當前的網站速度進行基準測試。
2. 知道如何選擇最佳的圖像文件類型。
3. 在導出之前調整圖像大小。
4. 壓縮圖像以減小文件大小。
5. 使用 WordPress 插件自動優化圖像。
6. 使用“模糊”技術首先加載較低質量的圖像。
7. 使用延遲加載。

1. 對您當前的網站速度進行基準測試

在你做所有這些工作來優化你的圖像之前，首先在你的網站上運行速度測試！ 到最後，您將能夠看到您所產生的影響（此外，您可以與您的團隊或老闆分享，以獲得額外的榮譽）。

作為飛輪支持團隊的一員，我熟悉不少速度測試，但以下五個是我的最愛：

• 谷歌 PageSpeed 見解
• Pingdom 工具
• GTMetrix
• 網頁測試
• Flywheel 的 Performance Insights 附加組件

前四個是基於瀏覽器的工具，它們的工作方式非常相似：打開鏈接，然後輸入您的 URL 以獲取有關您網站速度和性能的快速報告。

Performance Insights 是 Fl​​ywheel 託管平台的附加組件，它將超越基礎知識，為您的網站提供可行的建議，包括只有您的主機才能提供的見解。

此外，您將能夠在儀表板中隨時間跟踪指標，從而在您執行優化圖像等操作時輕鬆查看更改的影響。 在這裡了解更多。

這些工具將推薦您可以採取的幾個步驟來提高站點速度和性能，但出於本教程的目的，現在只關注分數。 這為您提供了一個很好的基準，因此您知道從哪裡開始。

2.知道如何選擇最好的圖像文件類型

當您完成創建圖像（從相機保存或從 Photoshop 等工具導出）後，您可以選擇指定文件類型。 Web 上最常見的文件類型是 JPEG、PNG 和 GIF。 而且我相信您可以猜到，當它們被放置在您的網站上時，它們都有自己的優點、缺點和最佳實踐。

JPEG

JPEG 圖像最適合在您的網站上展示複雜的彩色照片，因為它們允許以更小的文件大小獲得更高質量的圖像。 這種文件類型可能適用於您想在您的網站上使用的大多數圖像，但有一個主要例外：具有透明背景的圖像。 （對於那些，請參閱下一節關於 PNG 的內容！）

為您的網站使用 JPEG 圖像時，請考慮將其導出為“漸進式”。 這允許瀏覽器在將完整分辨率完全加載到站點之前立即加載圖像的簡單版本。

這是一個關於如何加載非漸進式圖像的想法：

以下是漸進式圖像的加載方式：

如果您在 Photoshop 中工作，則在導出為“另存為 Web”時會找到此設置。

PNG

如果您的圖像中沒有大量顏色（如平面插圖或圖標），或者希望它是透明的，我建議導出為 PNG。 確保您具有正確的圖像尺寸，並尋找另存為 PNG-24 的選項（或 8，如果沒有質量損失）。

動圖

第三種最常見的 Web 圖像格式是 GIF。 它們僅支持 256 種顏色，因此您必須選擇這種文件類型！

要為您的網站優化 GIF，請認真考慮它們的持續時間、它們是否需要循環播放以及在給定頁面或網站上您真正需要多少。

3. 上傳前調整圖片大小

優化網絡圖像的最簡單方法之一是在將它們上傳到您的站點之前調整它們的大小。 特別是如果您正在處理來自 DSLR 相機的原始圖像，尺寸通常比您實際需要的要大得多。

例如，假設您正在將圖像添加到您網站上的博客文章中。 如果您的 WordPress 主題以 500 x 500 顯示圖像，但您正在上傳分辨率為 1024 x 1024 的圖像，那麼所有這些額外的像素只會增加文件大小並降低站點速度，而不會提供真正的好處。

通過在上傳之前裁剪圖像，您將減小文件大小，這將有助於您的網站加載速度更快一點，並為更多圖像節省磁盤空間。

要調整圖像大小，只需打開您選擇的圖像編輯軟件。 Photoshop 效果很好，或者您也可以使用更簡單的工具，例如 Preview（適用於 Mac）、Paint（適用於 Windows）或 Canva（一種瀏覽器工具）。

4.壓縮圖像以減小文件大小

一旦您擁有最終圖像，以正確的格式保存並裁剪為適當的尺寸，您可以在上傳到您的網站之前再採取一個步驟來優化它：壓縮它。

此過程將幫助您減小文件大小，而不會損失明顯的圖像質量。 有兩種主要類型的壓縮：有損和無損。

無損壓縮將在壓縮前後保持相同的質量水平。 有損壓縮會丟棄照片的某些元素，但通常以人眼不會注意到的方式進行。 要了解有關這些壓縮類型的更多信息，我推薦 Imagify 的本指南。

如果您在網站上看到特定圖像加載並慢慢進入視野，這可能表明它需要壓縮、調整大小或兩者兼而有之。

要壓縮圖像，您只需要一個圖像壓縮工具。 我的最愛包括：

• TinyPNG：基於瀏覽器的免費工具，用於壓縮 PNG 和 JPEG 圖像。
• ImageOptim：用於壓縮圖像的免費開源應用程序。
• JPEGmini：適用於 Mac 和 Windows 的照片重新壓縮應用程序。
• RIOT：用於優化圖像的免費 Windows 應用程序。
• Image Optimizer：本地的免費插件。

小PNG

這個基於瀏覽器的工具使用智能有損壓縮優化圖像，通過減少使用的顏色數量來減小文件大小。 （但不用擔心，您甚至不會注意到！）它可以免費且快速地用於 PNG 和 JPEG。

圖像優化

這是一個免費的 Mac 應用程序，它通過消除不必要的膨脹來壓縮圖像，同時盡可能多地保留圖像質量。

JPEG迷你

JPEGmini 是一個強大的付費選項，可幫助您減小文件大小，同時保持質量和格式。 它確實有免費試用版，因此您可以在購買前對其進行試運行。

暴動

Radical Image Optimization Tool (RIOT) 是一款用於減小圖像文件大小的免費 Windows 應用程序。 它具有並排視圖，因此您可以比較壓縮前後的圖像質量。

Image Optimizer，一個免費的本地插件

如果您使用 Local 作為本地開發環境，則可以使用 Image Optimizer Add-on 自動離線壓縮圖像。 它會掃描您的站點以查找所有圖像文件，從而節省您單獨壓縮它們的時間並在此過程中加快您的站點速度。

5. 使用 WordPress 插件自動優化圖像

在這一點上，您可能開始認為圖像優化是一項繁重的工作——而且確實可以！ 但是還有一種簡單的方法可以簡化其中的一些步驟，那就是在您的 WordPress 網站上安裝圖像優化插件。

我有一些建議，它們每個都有獨特的功能。 但通常，當您上傳到 WordPress 網站時，圖像優化插件會壓縮和調整圖像大小。 這意味著您可以跳過這些步驟而不是手動執行它們，從而節省大量時間。

要優化 WordPress 網站上的圖像，我推薦這些插件：

• EWWW 圖像優化器雲
• 壓縮 JPEG 和 PNG 圖像
• 克拉肯.io
• 想像一下

EWWW 圖像優化器雲

當您將圖像上傳到您的網站時，此 WordPress 插件會自動優化您的圖像，或者它還可以優化您過去上傳的圖像。 如果您正在使用具有未優化圖像的現有站點，這將非常有益。

壓縮 JPEG 和 PNG 圖像

TinyPNG 團隊的這個 WordPress 插件可以在上傳時優化 JPEG 和 PNG 圖像。 如果您是基於瀏覽器的工具的粉絲，請使用他們的免費插件簡化流程！

克拉肯.io

Kracken.io 插件可以優化 WordPress 網站上的新圖像和現有圖像。 它還支持無損和有損壓縮模式，讓您可以對最終結果進行大量控制。

想像一下

這個 WordPress 插件將幫助優化您的圖像而不會降低質量。 如果您使用這些插件，它還與 WooCommerce 和 NextGen Gallery 兼容。

注意：在選擇插件之前，請務必查看它們的操作方式。 有些使用可能會導致您的網站出現問題的服務器繁重操作，而另一些則使用 FTP 選項來減輕您的 Web 服務器上的負載。

6.使用“模糊”技術首先加載較低質量的圖像

即使完成了之前的所有優化步驟，在某些情況下，您仍然可能會處理較大的文件大小或頁面上的大量圖像，從而降低您的網站速度。 在這些情況下，有時不僅可以優化圖像，還可以優化加載體驗，讓網站訪問者認為您的媒體文件加載速度比實際速度快。

這就是接下來的兩個步驟的全部內容 - 提供更快加載圖像的外觀，因此用戶在文件加載時不會只是盯著空白頁。

一種方法是首先加載較低質量的圖像 (LQI)。 通過在加載完整尺寸之前加載圖像的較小版本，它可以讓用戶在等待所有細節時看到一些東西。 這給人一種更快的加載時間的感覺，即使從技術上講，一切都以相同的速度加載。

一種流行的方法是“模糊”技術，您可以通過本 CSS-Tricks 教程學習如何實現。

7. 延遲加載您的網站圖片

與“模糊”技術類似，還有一個技巧可以幫助您獲得更快加載圖像的外觀：延遲加載。

當有人登陸您的網站時，他們會從頁面頂部開始。 他們可能需要一點時間來滾動整個頁面，尤其是在他們訂婚的情況下。 延遲加載不是嘗試一次加載所有圖像，而是假設用戶最關心他們可以看到的內容。 因此，瀏覽器視圖中的圖像首先完全加載，而其他圖像首先加載佔位符，直到用戶滾動到頁面的該部分。

延遲加載本身就是一項很棒的技術，與這些圖像優化技巧的其餘部分配合使用時，它甚至更強大！ 而且，由於 BJ Lazy Load 插件，在 WordPress 網站上執行此操作非常容易。

通過優化圖像來提高網站性能的分步指南到此結束！ 要查看這對您的站點產生的影響，請運行另一個速度測試。 你怎麼做的？

在優化的工作流程和正確的圖像優化工具之間，您將能夠立即從優化的圖像中看到更好的網站性能！

超越圖像：了解如何提高網站速度以獲得極快的性能

Flywheel 的託管 WordPress 託管平台經過優化，可讓 WordPress 網站快速運行，但您的服務器只是其中的一部分。 使用我們的 Performance Insights Add-on，您將深入了解您的網站的性能（因此您確切地知道在哪裡進行改進！）同時能夠隨著時間的推移跟踪指標以查看何時、是否以及如何事情會改變的。

學到更多

本指南由 Flywheel 的幸福工程師 Tyler Stokes 撰寫。 我們每天幫助創意人員優化他們的網站，以獲得閃電般的性能。

單擊此處了解有關 Flywheel 託管 WordPress 託管平台的更多信息！