優化您的圖像，不再浪費時間

根據 HTTPArchive 的數據，平均網站大小在 5 年內幾乎翻了一番，從 2014 年的 1MB 增加到 2019 年的 2MB。當然，互聯網訪問速度比以往任何時候都快，但是，為什麼現在網站這麼大？ 答案部分在於一般的多媒體資產，尤其是圖像。

網站不再是簡單的文本頁面已經很久了。 它們現在是動態的，充滿了圖像、視頻、GIF……我們希望所有這些資產在具有巨大分辨率的屏幕上看起來漂亮而清晰。

如果您的網站加載速度非常慢並且您從未優化過圖片，我有一個好消息：今天您將學習如何加快 WordPress 的速度。 讓我們看看您可以使用哪些工具來提高網站性能並防止圖像妨礙用戶體驗。

為什麼圖像優化很重要

在解釋可用於優化圖像資產和加速您的網站的不同方法之前，我想花幾分鐘讓您相信這樣做的重要性。

圖像對網頁的整體大小有巨大影響

正如我一開始所說，網站上圖像的權重佔總數的重要百分比。 例如，考慮這篇博文：DevTips – How to Stop WordPress From Guessing URLs。 這是一篇相當短的文章，不到 400 字，它為一個明確的問題提供了一個快速的解決方案。

根據 GTMetrix 的說法，加載這篇文章使用了 850KB 的數據。 但是為什麼這麼短的帖子會使用這麼多數據呢？ 嗯，圖片是這個問題的部分原因：僅帖子的特色圖片就超過 200KB，佔總數的 25%。

移動流量

根據 statcounter 中的數據，52% 的網絡流量來自移動設備，45% 來自桌面。 這就是為什麼今天如此強調使用在小屏幕上運行良好的響應式設計。

正如您自己所經歷的那樣，移動設備上的互聯網連接並不總是很好（特別是如果您在通勤或在地下）。 根據 Statistia 的數據，2019 年的平均速度約為 14 Mbps。 因此，如果我們想加快移動網站的速度，我們必須盡可能地減輕它們的重量，包括它們的圖像。

存儲和數據傳輸成本

您應該擔心使用具有適當尺寸的圖像的另一個原因是金錢。 託管服務提供商提供計劃的標準包括您的網站使用的磁盤空間量以及您從其服務器發送給訪問者的數據量。 使用的磁盤空間越多，發送的數據越多，您支付的費用就越多。

通過減小圖像的大小，您會減少這兩個因素，並且每個月都會節省一些錢？

圖像優化操作

既然您知道為什麼要擔心優化圖像，那麼讓我們看看您可以做些什麼來加速您的 WordPress 網站。

#1 上傳適當縮放的圖像

上傳直接從全新數碼單反相機中剝離的照片的人數之多令人驚訝。 問題是，任何用數碼單反相機拍攝的照片對於網站來說都可能太大太重。

您要做的第一件事是在將圖像上傳到您的網站之前將它們縮小到合理的大小。 例如，在我們的網站上，我們通常上傳的最大圖片是我們帖子的特色圖片。 我們決定將這些圖像限制為僅 1200x800 像素。 在另一篇文章中，我解釋了一種在上傳圖像之前快速縮放和壓縮圖像的方法。

#2 調整您的主題以生成適當的縮略圖

當您將圖像上傳到 WordPress 時，WordPress 會生成多個縮略圖。 這些縮略圖由您的主題定義，因為您的主題知道何時需要更大或更小的圖像版本。

例如，我們的特色圖片是 1200x800 像素。 在查看帖子本身時，這些尺寸非常有用：

對於這樣的事情來說，這顯然太多了：

這就是為什麼對於這種特殊情況，我們的主題註冊了一個新的縮略圖大小，它只有 480x320 像素，並用於帖子列表屏幕。

如果您認為您的主題沒有生成適當的縮略圖，我建議您閱讀 WordPress 文檔以了解如何使用set_post_thumbnail_size定義縮略圖的大小，甚至如何使用add_image_size定義其他縮略圖。

而且，與往常一樣，如果您需要這方面的幫助，請在下面的評論部分告訴我，我很樂意提供幫助（甚至寫一篇關於它的帖子？）

#3 巧妙地使用圖像尺寸

WordPress 會為您在媒體庫中擁有的圖像生成多個縮略圖，以便您的主題可以在每個可能的場景中使用最佳圖像。 但有趣的部分來了：在頁面和帖子中插入圖像時，您也可以使用縮略圖。

將圖像插入帖子時，請查看側邊欄並選擇最適合您需要的尺寸：

例如，如果您要像這樣放置一個窄而小的圖像，那麼一個小圖像（300x200px）可能是完美的：

但是對更大的圖像使用相同的縮略圖會產生糟糕的結果：

最好使用分辨率更高的版本：

#4 使用適當的圖像格式

有不同的圖像格式，每種格式都有其壓縮圖像的優點和缺點。 最常用的格式是：

• 巴布亞新幾內亞。 用於共享沒有任何圖片的屏幕截圖的絕佳圖像格式，例如 WordPress 編輯器的屏幕截圖。
• JPG。 世界上使用最廣泛的格式之一。 它幾乎適用於任何類型的攝影，允許非常高的壓縮比。 然而，它並不完美：如果照片的邊緣非常銳利（例如，如果有文字或圖畫），您將不得不使用較低的壓縮率，否則圖像可能會出現難看的偽影。
• GIF。 互聯網（和社交媒體平台）之王。 這是一種允許動畫的格式類型。 老實說，我認為我們現在使用的所有“GIF”實際上都是（短）視頻，它們提供更好的壓縮比和更高的質量……

#5 刪除未使用的圖像

隨著時間的推移，很容易在您的 WordPress 網站中保留許多沒有人在任何地方使用的舊圖像。 如果您想快速刪除它們，Toni 在這篇文章中解釋瞭如何刪除它們。

#6 啟用延遲加載

那麼，圖像會減慢您的網站速度，對嗎？ 為什麼我們不簡單地告訴網站不要加載圖像，除非它是絕對必要的？ 那會加快速度，不是嗎？ 進入延遲加載。

延遲加載是一個非常簡單的想法：直到它應該在訪問者的瀏覽器中可見時才會加載圖像。 例如，如果我們的網站在頁腳中有某個圖像，為什麼我們需要在用戶到達我們網站的末尾之前加載它？ 等到他們到達那裡，一旦他們到達，加載圖像（如果他們沒有，保存圖像加載！）

WordPress 有許多延遲加載插件。 一些託管服務提供商（如 SiteGround 活動）在其安裝中包含此選項。 只需在儀表板中查找該選項並啟用它。

我希望今天的帖子可以幫助您稍微提高 Web 加載速度。 很少有事情可以這麼容易修復並呈現如此好的結果。 乾杯和好運！

Unsplash 上 Icons8 團隊的特色圖片。