如何為 WordPress 優化圖像 [終極指南]

如果您有一個 WordPress 網站，您就會意識到維護它的困難。 有時，您可能會花費數小時在只需幾分鐘即可完成的事情上。 如果您的網站由於圖像太大或優化不佳而變得緩慢且臃腫，則可能會發生這種情況。

此外，使用搜索引擎優化技術將幫助訪問者找到您並將其保留在您的網站上。 為網絡優化圖像就是其中一種做法。

每當您設計或編輯圖像時，將每個像素視為可能的優化區域。 將像素視為單獨的部分需要時間和精力，但值得付出努力。

但是，有幾種方法可以優化 WordPress 中的圖像。 請記住，目標是在不影響圖像質量的情況下減小文件大小。

這篇文章將教您如何優化您的 WordPress 圖片並為其他活動騰出更多時間。

什麼是圖像優化？

這是在不影響其質量和應用適當的圖像 SEO 技術的情況下減小圖像文件大小的過程。 優化後的圖像更容易存儲在硬盤上或上傳到 Internet。 此外，由於下載速度慢，它的潛在問題更少。

圖片的大小對網站的加載時間有重大影響。 通常，圖像越大，訪問者的瀏覽器加載所需的時間就越長。 這可能會讓您的訪問者感到沮喪，並可能導致他們離開您的網站。

您應該遵循一些基本的優化提示，以確保您的圖像針對性能進行了優化。

圖像優化的好處

要成為一名成功的網站管理員，您需要了解圖像在網站上的工作原理。 您可能還需要不時優化某些圖像。

圖像優化的好處是：

• 更快的頁面加載時間：優化的圖像加載速度快，轉化為加載速度更快的網站。 這對於移動用戶來說尤其重要，他們更有可能放棄加載時間過長的網站。
• 改進的 SEO 排名：優化的圖像也有助於您網站的 SEO 排名。 谷歌使用頁面加載速度作為排名因素，因此優化圖片可以幫助您在搜索結果中排名更高。
• 減少帶寬使用：優化的圖像使用更少的帶寬，這可以節省您的託管費用。
• 改進的用戶體驗：優化良好的網站可提供更好的用戶體驗，更快的頁面加載和更好的搜索引擎性能。
• 減少移動下載時間：優化的圖像還有助於使您的網站適合移動設備，這對於谷歌在移動搜索中的排名至關重要。
• 客戶滿意度：更好的用戶體驗可以提高客戶滿意度，從而帶來更高的銷售額和更多的回頭客。

為 Web 優化圖像的 14 個基本要素

在優化圖像以供 Web 使用時，最好考慮許多因素。 有許多不同的文件類型和幾種不同的方法來優化它們。 以下是優化 Web 圖像時需要考慮的一些事項。

質量與尺寸：

圖像的質量始終很重要，但在針對 Web 使用進行優化時，您還應該考慮文件大小。 最好在不犧牲質量的情況下將圖像的文件大小保持盡可能小，以加快網頁的加載時間。

網絡上圖像的標準分辨率是72 DPI（每英寸點數）。 因此，建議將圖像保存為JPG 而不是 PNG，因為這種文件類型較小。

此外，最好在不影響圖像質量的情況下使用盡可能低的顏色深度。 標準顏色深度是 24-bit ，可以在文件的屬性中更改。

圖像文件格式：

要確定選擇哪種圖像格式，有必要了解不同的圖像及其用途。 您應該將文件另存為JPG格式，但在優化Web 圖像時，請選擇 PNG-8 或 PNG-24。

通常，PNG 文件最適合具有大量顏色和透明背景的圖像，而 JPEG 文件最適合具有大量細節的圖像。

因此，您應該對具有透明背景的圖像使用 PNG 格式，對具有大量細節的圖像使用 JPEG 格式，以優化 Web 圖像文件。

文件大小和尺寸：

在為 Web 優化圖像時，要考慮的兩個主要因素是文件大小和尺寸。 最好先嘗試其中一個因素，然後再更改另一個因素，這樣您就可以看到哪些因素有助於您實現更小文件大小或更大圖像的目標。

較大的圖片文件可能會導致網站運行緩慢，因此在上傳圖片之前需要調整圖片大小。 網頁上圖像的推薦尺寸為600-800 像素寬和 500-600 像素高。

任何比這更重要的東西很可能會導致瀏覽器調整圖像大小，從而導致質量下降。

Rank Math非常適合自動調整圖像的分辨率。 它將為您添加圖像尺寸，因此您不必擔心它的尺寸。

改善圖像搜索引擎優化：

您上傳到網站的每張圖片都應作為搜索引擎的信息來源。 具有更多細節的圖像文件更適合搜索引擎優化。

最引人注目的圖像 SEO 做法是：

• 優化圖片標題文本：保存圖片時，一定要給它們提供信息豐富的標題。 當光標懸停在圖像上時，它將顯示為工具提示。 此外，有利於搜索引擎學習圖像。
• 使用 Alt 標籤：搜索引擎在索引圖像時也使用 alt 標籤。 alt 標籤文本應針對每張圖片進行定制，並儘可能準確地描述圖片中的內容。
• 使用正確的圖像文件名：如果可能，您的圖像文件名也應該是描述性的並包含關鍵字。 使用圖像編輯軟件時，請使用描述性文件名保存圖像。

注意-如果您使用 Rank Math WordPress 插件，您的圖像將針對 SEO 進行優化，並且圖像文件名和 alt 標籤將自動包含關鍵字。

適當的壓縮：

這是優化圖像時要考慮的另一個關鍵因素。 在將圖像上傳到服務器之前，您應該盡可能地壓縮它們。

您需要使用 Photoshop 或 GIMP 等壓縮工具來執行此操作。 或者，您可以使用TinyJPG和ImageOptim等免費工具。 始終建議在您的網站上使用壓縮圖像以加快加載時間。

或者，您可以使用 ShortPixel 或 WP-Optimize 等插件在將圖像上傳到您的網站時自動壓縮它們。 建議任何尋求優化其網站上圖像的人使用這些插件。

壓縮圖像時應牢記以下事實：

• 有損：有損壓縮是一種從圖像中刪除一些數據以使文件更小的壓縮類型。 這種類型的壓縮通常用於不會有任何明顯質量損失的圖像。
• 無損：無損壓縮是一種在不降低內容質量的情況下刪除一些冗餘信息的壓縮形式。 這種壓縮類型通常用於壓縮後需要保持其質量的圖像，例如無損 JPEG 圖像。

您可以從 ShortPixel 的博客中了解有關有損廣告無損壓縮的更多詳細信息。

以下一代格式提供圖像：

默認情況下，瀏覽器會嘗試以與保存時相同的格式加載圖像。 例如，當 URL 包含 .jpg 時加載 JPEG 圖像。 但是，您可以強制瀏覽器使用正確的文件擴展名加載不同的圖像格式。

例如，如果您有一個 JPEG 圖像，您可以將擴展名更改為 .png，然後瀏覽器將加載該圖像。

您可以使用 JPG to PNG WordPress 插件來做到這一點。 使用此插件，您將自動將所有 JPG 圖像轉換為 PNG 文件。 您可以按照如何在 WordPress 中將 PNG 圖像轉換為 JPG 的指南進行操作。

您可以使用 GtMatrix 或 Google 頁面速度洞察工具輕鬆找到下一代格式的服務圖像。

注意 -通常，將圖像保存為兩種類型的文件以供識別不同文件擴展名的瀏覽器查看是明智的。 通過這樣做，如果文件無法加載，您可以用 PNG 替換損壞的 JPEG，而無需重新上傳圖像。

使用 CSS Sprite 組合圖像：

圖像的組合傳統上是使用圖像編輯軟件進行的。 但是，現在發現CSS sprites 方法也可以用於組合圖像。

該過程涉及創建一個空圖像並在不同位置加載您希望組合到其中的圖像。 然後，使用 CSS，這些單獨的圖像中的每一個都可以定位在新圖像的相同區域上。

因此，瀏覽器可以下載單個圖像文件而不是多個圖像。 這對於移動設備尤其重要，因為它們的互聯網連接速度通常較慢。 您可以使用 CSS 精靈生成器來完成此操作。

禁用圖片盜鏈：

熱鏈接圖像意味著任何人都可以獲取您的圖像並將其發佈在他們的網站上。 結果，您將遇到令人討厭的帶寬損失，因為圖像將從您的服務器下載到另一台服務器。 您可以通過對圖像使用熱鏈接保護來防止這種情況。

您可以通過您的 cPanel 帳戶配置圖像盜鏈保護。 這個過程非常簡單。

• 您將在“安全”選項卡下看到一個標有“熱鏈接保護”的圖標。
• 單擊此圖標可訪問以下窗口。
• 單擊啟用按鈕以防止您的圖像被熱鏈接。

注意 -如果您是 Cloudflare 用戶，您可以通過啟用“熱鏈接保護”選項來防止您的圖像被熱鏈接。

緩存圖像：

對於任何網站，這都是必不可少的。 您應該緩存您的圖像，以便人們可以更快地查看它們。 在大多數情況下，現有網站訪問者會將其緩存在他們的瀏覽器中，但如果您的主機出現問題，您可能需要單獨設置它。

每當您使用託管服務安裝 WordPress 時，託管服務提供商都會為您處理所有緩存。 您還可以安裝緩存插件。

WP Rocket 是緩存圖像的理想插件，因為它易於使用和安裝。 您只需安裝並激活它，然後您就可以開始了。 當然，還有其他緩存插件，但 WP Rocket 是此目的的首選。

緩存頭像：

gravatar 是一個小圖標，在網絡上跟隨您的電子郵件地址。 例如，當您在另一個 WordPress 博客上發表評論時，您的 Gravatar 會顯示在它旁邊。

Gravatar 服務生成 Gravatar，將它們緩存在其服務器上。 因此，如果你評論了大量的博客，甚至是一些高流量的博客，你的 Gravatar 就會被緩存在 Gravatar 的服務器上。

因此，您的 Gravatar 將在所有這些博客上快速加載。 但是，另一方面，它也可能是一個缺點，因為如果 Gravatar 服務不可用，或者您的 Gravatar 從您評論過的博客中刪除，您的 Gravatar 將從所有這些博客中消失。

用一張全面的圖片來定制一個 Gravatar 是非常沒有吸引力的。 這是因為如果您的自定義 Gravatar 未顯示在這些博客上，則將使用默認 gravatar，這可能不合適。

這個問題有兩種可能的解決方案：

• 使您的 Gravatar 盡可能小。 較小的圖像將比較大的圖像加載更快並且消耗更少的帶寬。
• 您應該在您控制的域上託管您自己版本的 Gravatar 服務。 這將需要 Apache Web 服務器、PHP 和 MySQL 數據庫來在本地存儲 Gravatar，而不是將它們緩存在 Gravatar 服務器上。

從 CDN 提供圖像：

如果您的圖像由內容交付網絡 (CDN) 提供，請務必啟用緩存。 因此，瀏覽器和其他設備不必多次下載相同的圖像。

最好在設置 CDN 時考慮如何顯示您的圖像。 此外，應在您的圖像上啟用 CDN 重寫。 您可以使用 Perfmatters 插件來做到這一點

使用此插件，您可以輕鬆地將您的站點連接到 CDN 網絡。 因此，如果您的站點可以通過內容交付網絡提供內容，則您的圖像將由 CDN 服務器執行。

您可以使用以下任何 CDN 網絡。

• CloudFlare
• 兔子CDN

為您的網站優化圖像時不應該做的事情

避免圖像 URL 重定向：

如果您在網站上使用 URL 重定向，則會延遲圖像的出現。 此外，瀏覽器不會緩存圖像，這可能會導致頁面加載延遲。

因此，在為 Web 優化圖像時，應避免使用任何 URL 重定向。

避免過期標題：

如果您在圖像上使用過期標頭，瀏覽器可能不會緩存它們。 它還會導致瀏覽器在每次將圖像加載到頁面時重新請求圖像。

如果您想優化它們，您應該避免在您的網站圖像上設置任何過期的標題。

避免嵌入圖像：

在為 Web 優化圖像時，不要在頁面上嵌入圖像，這一點很重要。 這是因為當您嵌入圖像時，瀏覽器會在顯示之前下載整個圖像。

這可能會導致您的網站加載緩慢並使訪問者感到沮喪。 相反，請使用<img> 標記或 <object> 標記來包含指向服務器上圖像的鏈接。 因此，瀏覽器只能下載圖像文件，而不是整個頁面。

最佳圖像優化工具：

高質量的內容對於開發專業博客至關重要。 此外，高質量的圖像對於博客看起來有吸引力是必要的。 但是，很難找到免費的工具來優化圖像而不損失分辨率和設計精美的圖像。

因此，我整理了一些最有效的圖像優化工具列表，以方便我們的工作。

• TinyJPG：TinyJPG 是一款方便的在線壓縮 JPEG 圖像的工具。 這個工具的壓縮率很高，畫質還是很優秀的。
• Toolur：Toolur 是一個有用的在線工具，用於優化網絡圖像。 它通過減小文件大小而不影響圖像質量來優化圖像。
• ImageOptim：ImageOptim 是頂級的圖像優化工具之一。 該工具通過優化網頁上的圖像來幫助您提高網站加載速度。 它甚至可以優化已經壓縮的圖像。
• GIMP：GIMP 是一款出色的圖像編輯器，可讓您在保持圖像質量的同時減小圖像文件大小。 它是 Adob​​e Photoshop 的一個有價值的替代品。

WordPress 的最佳圖像優化插件

有幾種不同的圖像優化插件可用於 WordPress。 選擇最適合您需求的產品可能很困難。 這是頂級插件的列表。

• EWWW 圖像優化器
• 由 WP 火箭隊想像
• 短像素圖像優化器
• WP Smush
• reSmush.it

您可以使用上面列表中的EWWW Image Optimizer 、WP Rocket Team 的 Imagify 和ShortPixel Image Optimizer 插件。

您應該使用高級插件進行圖像優化以獲得最佳結果。 如果您想節省一些錢，請嘗試EWWW Image Optimizer 。

常見問題

如何在 WordPress 中創建 WebP 圖像？

當您使用 WP Rocket 優化站點上的圖像時，它會自動將它們保存為 WebP。 相反，如果您希望將 JPG 或 PNG 圖像轉換為 WebP 圖像，您可以使用插件來實現。

您可以為此使用以下任何插件。

• 用於媒體的 WebP 轉換器
• WebP快遞

我用於 WebP 的一個很棒的插件是 WP Speed Matters 的 Flying Images。 它適用於任何主題並處理一切。 此外，它允許您創建所需的任何大小的 WebP 圖像，並提供免費的圖像 CDN 服務，這是一個顯著的好處。

如何延遲屏幕外圖像？

在 JavaScript 中可以使用 defer 屬性來加載屏幕外圖像，從而允許瀏覽器更快地呈現初始頁面加載。 這需要開始和結束標籤。 例如：

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Some tooltip text” data-defer=”offscreen-image.jpg” />

注意 - Defer僅支持 HTML5，不支持 XHTML。

通過使用諸如 Perfmatters 之類的 JavaScript 插件，您可以延遲圖像的加載。 因此，您可以將 img 標籤更改為您想要的任何元素，例如 div。

<div data-defer=”offscreen-image.jpg”></div>

如何修復延遲離屏圖像？

• 延遲加載圖像。
• 延遲加載背景圖像。

首屏上方的圖像應從延遲加載中排除，以確保用戶快速注意到它們。 但是，要解決 WordPress 站點上的延遲離屏或延遲加載圖像，您可以使用 Perfmatters 插件。 該插件允許您通過延遲加載屏幕外圖像來提高 WordPress 網站的加載速度。

注意-您可以使用 WP Rocket 插件啟用圖像延遲加載。 所以你可以使用它們中的任何一個。

綜上所述

WordPress 是一個功能強大的內容管理系統，可讓您創建和管理自己的網站。 但是，如果沒有適當的工具，為 WordPress 優化圖像可能會很困難。

為 WordPress 優化圖像的問題在於有很多不同的方法可用。 例如，您可以使用插件、在線工具，甚至您自己的軟件。

為 WordPress 優化圖像的最有效方法是結合所有這些技術。 此外，您可以使用一個插件來識別哪些圖像需要調整大小，您也可以手動調整它們的大小。

除了優化 WordPress 的圖像大小外，您還應該優化每個帖子的文件數量。 嘗試使用高級插件來優化圖像和網站速度。 因此，您將能夠開發一個用戶友好、快速、高效的網站。