如何為 WordPress 優化圖像

您願意（並且應該）在您的 WordPress 內容中包含圖片的原因有很多。 圖片有助於保持讀者的參與度。 它們也是分解長篇內容和改進搜索引擎優化 (SEO) 的一種方式。 但是，它們也會降低您網站的速度。

幸運的是，有很多資源可以幫助您優化圖像。 這意味著您將更有可能克服可能不利於網站整體成功的緩慢頁面速度。

在本文中，我們將探討大圖片為何會拖累您的網站。 然後我們將探討如何有效地壓縮您的媒體文件，以及一些可以改善您網站的 SEO 的基本圖像優化技巧。

為什麼你應該為 WordPress 優化你的圖像

圖片是任何內容策略中有價值且重要的一部分。 但是，它們也可能是導致頁面加載時間緩慢的主要原因之一。

一個緩慢的網站是一個問題，因為它可以趕走用戶。 事實上，加載時間為 5 秒或更長時間的頁面平均會增加 90% 的用戶跳出率（僅查看一個頁面後離開）。

雖然有多種因素會降低您的網站速度，但圖像和媒體文件在現代網站上佔用了高達 63% 的帶寬。 因此，優化您上傳到站點的圖像非常重要。

還值得注意的是，網站速度是谷歌排名的一個因素。 這意味著您的頁面加載速度的快慢在某種程度上決定了它在搜索結果中的排名。 影響您的 PageRank 的因素有很多，圖像屬於“網頁的可用性”類別。

圖像優化實際上是關於改進兩件事：

• 用於編碼每個圖像像素的字節數
• 使用的像素總數。

換句話說，優化意味著您可以從最少的像素和字節中獲得最好的質量。 這會減小您的媒體文件大小，並且會對您網站的整體速度產生重大影響。

在上傳到 WordPress 之前優化您的圖像

最終，您網站的最佳情況是在上傳圖像之前優化圖像。 這樣您就不會得到一張圖像的重複或多個版本。 這將破壞通過圖像優化減輕網站負載的目的。

考慮到這一點，讓我們看看在決定如何優化網站媒體時需要考慮的一些因素。

圖像文件格式

首先，讓我們看一下現有的各種圖像格式。 了解它們各自的不同之處以及何時最好使用它們可以幫助您更簡化地使用圖像。

在線使用的兩種最常見的圖像格式是 JPEG 和 PNG。 這兩種格式都是由像素組成的。 當您更改圖像大小時，像素會拉伸，這有時會使圖像變得模糊。 但是，這些圖像類型具有不同的優點和缺點。

何時使用 JPEG

JPEG 文件是印刷和網絡內容的不錯選擇。 這種圖像文件使用所謂的“有損”格式。 將較大的圖像轉換為 JPEG 時，其文件中包含的某些信息會丟失。

僅顯示圖像不需要該信息。 然而，它的意思是轉換為 JPEG 會導致文件大小更小，但整體圖像質量可能會有所犧牲。 幸運的是，質量下降不太明顯，尤其是對於較小的圖像。

何時使用 PNG

PNG 文件也可用於 Web 內容，就像 JPEG 一樣，但方式不同。 例如，由於 PNG 可以具有透明背景，因此它們在設計 Web 圖形時更加通用和方便。

PNG 使用“無損”文件格式。 這意味著壓縮文件時會保留有關圖像的所有信息。 因此，它們往往具有更高的質量，但在文件大小和頁面速度方面提供的改進較小。 它們是圖形和圖標以及非常高質量圖像的不錯選擇。

圖片大小

是時候消腫了。 提供縮放圖像是優化圖像的最簡單和最有效的方法之一。 為什麼這麼有效？ 圖像縮放將確保您傳送的像素不會超過在瀏覽器中以預期大小顯示資產所需的像素。

許多站點試圖提供大的、未縮放的圖像並依賴瀏覽器調整它們的大小，這導致使用額外的資源和站點速度變慢。 如果圖像的自然大小是 820×820 像素，而瀏覽器顯示為 400×400 像素……那是 32,400 個不必要的像素！

頁面加載的清晰度和速度與顯示圖像的設備（移動設備、桌面設備等）有很大關係。 例如，4k 圖像在 27 英寸顯示器上可能看起來不錯。

然而，當訪問者加載帶有該圖像的頁面時，瀏覽器將首先以全分辨率呈現文件，然後將其縮小以適合他們的屏幕。 如果他們使用的移動設備不能大於 400 像素，他們很可能會錯過您的內容。

考慮到這一點，導出圖像時的一些最佳實踐包括：

• 通過將圖像保存為“網絡優化”JPEG 或 PNG，將圖像的文件大小保持在幾百 KB 以下。
• 圖像的 Web 標準是每英寸 72 點 (dpi)，這可以通過以上述格式保存圖像來實現。

您可以使用 Photoshop、Lightroom 或類似的編輯器將圖像大小縮小到大約 1,500 像素或更小的寬度。 在 Photoshop 中，只需轉到“圖像”>“圖像大小”即可手動調整圖像的尺寸和分辨率。 您還可以轉到“文件”>“導出”>“為網絡保存”以優化您的圖像以用於網絡上傳：

如果您不打算在更大的顯示器上顯示清晰生動的照片，則可以進一步縮小圖像尺寸。

如果使用 Lightroom，請轉到“文件”>“導出”以在導出時手動調整圖像大小：

圖像大小和分辨率只是難題的一部分。 在優化圖像時，您還需要了解壓縮並有效地使用它。

圖像壓縮

簡而言之，圖像壓縮是一種最小化圖形文件大小（以字節為單位）的方法，同時不會將圖像質量降低到不可接受的水平。 正如我們所討論的，文件大小過大的高分辨率圖像會顯著影響頁面速度。

另一方面，優化後的圖像平均比未優化的圖像亮 40%。 作為一般規則，您需要在上傳過程之前或期間優化您上傳到網站的所有圖像和其他媒體。

有損與無損壓縮

正如我們之前提到的，JPEG 和 PNG 使用兩種不同類型的圖像壓縮。 無損壓縮保留原始文件中的所有數據，而不會犧牲質量。

使用無損壓縮，您通常會將文件分解為“更小”的形式以供傳輸或存儲。 然後信息會在另一端重新組合在一起，以便再次使用。

另一方面，有損壓縮會刪除圖像文件中包含的一些數據。 這可能會導致質量下降幅度更大，但頁面速度也會有更顯著的提高。 您甚至可以自定義壓縮量，以達到質量和性能之間的平衡。

圖像壓縮插件

快速加載的圖像意味著更快的網站和更好的 SEO。 這裡有一些各種圖像優化插件可以幫助您進行圖像壓縮。

Smush 圖像壓縮和優化

Smush 的圖像壓縮插件可以調整大小、優化和壓縮您的所有網絡圖像，因此它們的加載速度比以前更快。 如果您的網站照片豐富，那麼這個插件是必備的。

短像素圖像優化器

ShortPixel 的圖像優化器插件壓縮所有過去和未來上傳到您的媒體庫的圖像和 PDF。 該插件為大多數文件類型提供有損和無損壓縮。 如果您是一名攝影師，您可能會選擇使用高質量有損優化算法的光澤 JPEG 壓縮。

壓縮 JPEG 和 PNG 圖像

只想優化 JPEG 和 PNG？ 此插件使用圖像壓縮服務 TinyJPG 和 TinyPNG 來幫助您進行圖像壓縮。 JPEG 圖像平均壓縮 40-60%，PNG 圖像壓縮 50-80%，質量沒有明顯損失。

EWWW 圖像優化器

EWWW Image Optimizer 具有雙重功能。 它既可以優化您網站上的現有圖像，也可以處理您上傳的新圖像。 此外，它還為您提供了對圖像壓縮方式（以及壓縮量）的大量控制。

Kraken.io 圖像優化器

最後但同樣重要的是，Kraken.io Image Optimizer 還可以方便地優化新媒體和現有媒體。 它支持無損和“智能”有損壓縮，可以更輕鬆地以較小的文件大小獲得高質量的圖像。

特色圖片

特色圖片不會插入到 WordPress 帖子的正文中，而是在整個主題中結構化地使用。 例如，它可能顯示為帖子標題旁邊的縮略圖，或者在查看特定帖子時顯示在標題中。

大多數主題和小部件都依賴特色圖片，因此您不想跳過它。 特色圖片允許更大的定制； 您將能夠為特定的帖子和頁面顯示獨特的自定義標題圖像，或為主題的特殊功能設置縮略圖。

一旦您決定了您想要的特色圖片的尺寸，該尺寸將對所有未來的特色圖片保持不變。 您應該選擇的大小取決於您的 WordPress 網站的主題和帖子的佈局。

特色圖像通常比高度寬，範圍從 500 到 900 像素寬。 最好選擇高分辨率圖像，而不是像素化圖像。

專業提示：要控制在將帖子或頁面分享到 Facebook 或 Twitter 時顯示的媒體，請安裝 Yoast SEO 插件。 您不僅可以自定義標題和描述，還可以為每個社交渠道上傳正確的圖片尺寸。

上傳到 WordPress 後優化圖像

我們建議您在上傳圖片之前對其進行優化。 但是，如果那不可能，或者您想優化網站上已有的圖像，您仍然可以這樣做。 有幾種方法可以幫助您優化直播內容。

延遲加載圖像

通常，當有人訪問網頁時，其所有內容都會開始加載。 這意味著，對於內容豐富的頁面，可能需要一段時間才能顯示所有內容。

“延遲加載”涉及調整網站加載內容的方式。 它指示您的站點首先專注於加載立即可見的文本、圖像和其他元素。 只有在那之後，它才會開始加載只能通過向下滾動頁面才能訪問的內容。 這是加快網站速度和改善訪問者體驗的好方法。

向您的站點添加延遲加載的最簡單方法是通過諸如延遲加載之類的插件。

這是 WP Rocket 的一款工具，可幫助減少一次發送到您站點的 Web 服務器的請求量。 它甚至用佔位符圖像代替 YouTube 視頻，這樣實際視頻只會在需要時加載。

緩存圖像

另一種提高網站速度的方法是通過“緩存”。 這涉及將您網站的一些數據保存在訪問者訪問起來更容易、更快捷的地方，通常是在離他們所在位置更近的第三方服務器上，或者在他們的瀏覽器中。

有很多方法可以通過編碼、插件和其他工具來實現緩存。 在 WP Engine，我們默認在所有網站上實施強大的緩存。 這有利於減少所有內容對頁面速度的影響，而不僅僅是圖像。

刪除 EXIF 數據

EXIF 數據存儲為圖像文件的一部分，並包含有關照片拍攝地點和方式的信息。 它由相機自動添加到圖像中，通常對於您的網絡文件來說不是必需的。

因此，從圖像中刪除這些數據可以加快頁面速度，儘管影響不大。 不幸的是，目前沒有更新的插件可以幫助您做到這一點。 因此，如果您在自己的網站上使用了大量照片並且擔心 EXIF 數據，則需要向開發人員尋求幫助。

避免圖像 URL 重定向

最後，另一個會降低頁面速度的因素是圖片導致重定向。 這最常發生在他們鏈接到其他地方時。

因此，您應該避免在您的網站上嵌入來自外部來源的圖像。 相反，如果可能的話，將每張圖片或媒體直接保存並上傳到您的網站。 您可能還想確保您的圖像不會鏈接到任何內容，例如單獨的媒體頁面。

為搜索引擎優化圖片

格式化圖像標題是圖像優化的另一個重要步驟。 這意味著圖像文件名與其內容相關。 當您這樣做時，它們更有可能通過搜索引擎出現在相關圖像搜索結果中。

這將提高您品牌的知名度和可訪問性，並通過在 Google 圖片搜索中更頻繁地列出您網站的圖片來增加您網站的訪問量。 圖像優化只需要很少的時間，並且可以對您網站的流量產生巨大影響。

這裡有一些額外的提示，可以幫助您的圖片排名更高。

替代文字

替代文本，也稱為“替代文本”或“替代標籤”，是一種添加到 HTML 圖像中的屬性。 替代文字通過描述圖像包含的內容及其目的，幫助搜索引擎了解您的圖像的含義。

Google 依靠替代文本來確定圖像是什麼，因為它“看到”的只是 HTML 標記中的內容。 當您為圖像使用強有力的描述性替代文本時，您更有可能在搜索結果中看到您的網站被適當地列出。

在 WordPress 中，您可以通過兩種方式向圖像添加替代文本。 首先，您可以將其添加到已放置在帖子中的圖像中，方法是單擊圖像並使用屏幕右側的“圖像設置”選項。

或者，您也可以通過訪問“媒體”>“資料庫”並選擇您想要的圖像來向圖像添加替代文本。 然後，只需將您的替代文本添加到該圖像的替代文本字段。

標題標籤

標題標籤類似於 alt 標籤，但它們適用於人類讀者，而不是搜索引擎機器人。 良好的標題標籤優化可以幫助視障用戶訪問您的網站。

創建 XML 圖像站點地圖

讓 Google 注意到您的圖片的另一種方法是創建站點地圖並提交。 對於搜索引擎無法抓取的圖像，這是一個不錯的選擇。

例如，我們正在談論由 JavaScript 加載的圖像。 站點地圖為搜索引擎提供有關您網站上可用圖像的更多信息，以便他們可以更準確地理解和索引您的內容。

在 WordPress 中，以下插件可以幫助您創建站點地圖：

• 谷歌 XML 站點地圖
• 酵母搜索引擎優化
• 多合一 SEO 包
• Udinra 所有圖像站點地圖

對於非 WordPress 網站，還有一些工具可以幫助創建站點地圖，包括 Screaming Frog、Dynomapper 等。 創建站點地圖後，您將希望通過 Google 的網站管理員工具提交它。

圖像放置和標題

最後但同樣重要的是，讓我們看看視覺效果在博客文章或網頁中的位置。 您將圖片放在帖子中的位置會對帖子在 Google 上的排名產生重大影響。

例如，如果您將圖片放在更靠近關鍵字詞組的位置，它的排名可能會更好。 另外，請注意，在圖像中添加關鍵字豐富的說明也算作搜索文本，有助於更好地進行圖像搜索引擎優化。

使用 WP Engine 優化您的 WordPress 網站

在改進您的網站時，圖像優化涵蓋了很多方面。 優化可以幫助提升用戶體驗，並將您的加載時間保持在 5 秒以內。 在 WP Engine，我們了解圖像優化為您的網站帶來的價值。 這就是我們提供專門託管的 WordPress 託管環境的原因。 這意味著您將獲得專家支持以及觸手可及的綜合優化工具和資源！