在 WordPress 上使用什麼尺寸的圖片（關鍵因素和提示）

您是否遇到網站載入速度緩慢的情況？網站速度低可能是由多種因素造成的，大圖像就是其中之一。如果您的網站包含大量內容，圖像大小可能是網站速度緩慢的因素之一。因此，優化您的 WordPress 圖像非常重要，這樣它們就不會妨礙您的網站。本指南將向您概述如何確定 WordPress 網站的最佳圖片大小。這將有助於增強客戶互動並提高生產力。

了解 WordPress 中的圖片尺寸

WordPress 中的圖片大小由圖片檔案的尺寸（以像素為單位）和大小（以千位元組 (KB) 或兆位元組 (MB) 為單位）決定。在 WordPress 網站上顯示圖片時，重要的是要知道圖片大小不僅僅是美觀 - 它直接影響網站效能、使用者體驗和搜尋引擎優化 (SEO)。 WordPress 將透過在上傳時自動建立縮放版本來幫助保護使用者免於使用極大的圖片。另外，您上傳的每張圖片都會有不同的變體或尺寸，具體顯示方式或尺寸取決於該圖片在您網站上的使用位置。下面詳細介紹一下。

SRCSet 功能

當您將圖像上傳到 WordPress 時，平台會自動建立該圖像的多種尺寸（縮圖、中型、大型等）。 SRCset 屬性可讓瀏覽器根據裝置的螢幕尺寸和像素密度選擇最合適的影像尺寸。

例如，如果您的部落格文章包含圖像，且使用者從大螢幕桌面造訪您的網站，則瀏覽器可能會載入大版本（例如，1024px）。另一方面，如果使用者從手機瀏覽，瀏覽器會選擇較小的版本（例如300px），載入速度更快。

以下是您在 WordPress 中上傳的每張圖片的預設尺寸：

• 縮圖： 150 x 150 像素
• 中： 300 x 300 像素（可能會根據您的設定而有所不同）
• 大： 1024 x 1024 像素（可能會根據您的設定而有所不同）
• 全尺寸：原始尺寸

如果您想要更改預設圖片大小，可以在 WordPress 儀表板的「設定」→「媒體」中找到它們：

在 WordPress 上使用什麼尺寸的圖片

在大多數情況下，影像檔案大小不應超過 200kb。大多數影像應該接近 50kb-100kb 或更小。為了將圖像檔案保持在該範圍內，您需要考慮尺寸等其他因素。

以下是 WordPress 的一些常見推薦圖片尺寸：

• 部落格文章圖片： 1200 x 630 像素
• 特色圖片（貼文縮圖）： 1200 x 800 像素
• 標題圖片/英雄圖片： 1600 x 900 像素或 1920 x 1080 像素
• 背景圖片： 1920 x 1080 像素
• 滑桿與橫幅： 1200 x 600 像素或 1920 x 800 像素
• 產品圖片 (WooCommerce)： 800 x 800 像素或 1000 x 1000 像素
• 標誌圖片： 200 x 100 像素或 250 x 100 像素

除非您有特定原因這樣做，否則不應上傳 5mb、寬 5000 像素的圖像。 WordPress 將透過創建更多可供您使用的網站友善版本來提供協助。但如果您顯示原始大小，您的頁面載入速度將會受到影響。

選擇要在 WordPress 中上傳的正確圖像尺寸對於優化網站效能並確保圖像在所有裝置上看起來清晰至關重要。理想的圖像大小取決於圖像的使用環境（例如，部落格文章、縮圖、滑桿等），以及回應能力、檔案大小和品質考量。

WordPress 圖片大小要考慮的關鍵因素

在為 WordPress 選擇或建立圖像時，應考慮幾個關鍵因素，以確保它們針對效能和設計進行最佳化。這些因素包括圖像大小、檔案類型、尺寸等。以下是詳細的細分：

影像尺寸

圖像尺寸直接影響圖像在網站不同部分的顯示方式。使用太大的圖像會減慢載入時間，對用戶體驗和搜尋引擎優化產生負面影響。太小的圖像可能會顯得像素化或模糊，從而降低網站的整體視覺品質。

您的 WordPress 主題通常規定了不同部分的理想圖像尺寸，例如標題、部落格文章或圖庫。檢查主題的文檔以取得建議的尺寸。

文件大小

較大的檔案大小會導致載入時間變慢，這會損害使用者體驗（尤其是在行動裝置上）和搜尋引擎排名。緩慢的網站會導致更高的跳出率，這意味著訪客更有可能在網站完全加載之前離開您的網站。

理想情況下，將圖像檔案大小保持在 500KB 以下。但是，如果影像突出顯示，您可能最多允許 1MB 以獲得更好的品質。使用影像壓縮工具來減小檔案大小，同時保持視覺品質。對於手動壓縮，TinyPNG 或 JPEG-Optimizer 等工具效果很好。壓縮後，使用 Google PageSpeed Insights 或 GTmetrix 等工具測試頁面的載入時間。如果載入時間很慢，請進一步減小圖片尺寸。

文件格式

不同的文件格式有不同的用途，選擇正確的文件格式可以平衡品質和效能。使用錯誤的格式可能會導致不必要的大檔案大小或影像品質差，特別是在涉及透明度或銳邊時。

JPEG (JPG) 最適合具有多種顏色和漸層的照片或影像。它支援有損壓縮，這意味著它透過消除一些細節來減小檔案大小，但它非常適合減小複雜影像的檔案大小。另一方面，PNG 非常適合具有透明度的徽標、圖標或圖像。 PNG 提供無損壓縮，以較大的檔案大小為代價保留影像品質。

縱橫比

一致的寬高比可確保您的影像在不同裝置和螢幕尺寸上正確顯示。使用不一致的寬高比可能會導致影像被裁剪、扭曲或對齊不良，從而影響網站的視覺連貫性。

對於固定佈局的圖像（如滑桿或橫幅），請始終遵循主題或外掛文件中建議的寬高比（例如，橫幅的比例為 16:9）。對於畫廊或網格，選擇單一縱橫比（例如，方形縮圖為 4:3 或 1:1），並將所有圖像裁剪為該比例以實現均勻性。如果您使用響應式影像設置，請在不同的裝置和螢幕尺寸上測試您的網站，以確保寬高比在各種視窗中都能正常運作。

WordPress 圖片尺寸的最佳實踐

網站速度對於使用者體驗和 SEO 至關重要，過大的圖像會顯著降低 WordPress 網站的速度。優化影像尺寸對於在不犧牲品質的情況下保持快速加載時間非常重要。以下是有關有效減小圖片尺寸和提高網站效能的快速指南。

將影像調整為適當的尺寸

上傳尺寸適合您網站顯示需求的圖像。避免上傳 WordPress 自動調整大小的大圖像，因為這會消耗儲存和頻寬。上傳圖片之前，請根據您的主題佈局確定所需的最大尺寸。例如，如果您的內容區域寬度為 800 像素，那麼寬度超過該寬度的影像將無法正確顯示，並且會降低頁面速度。

在 WordPress 上調整圖片大小

如果您已經上傳了超大圖像，則可以直接在 WordPress 中調整其大小。前往 WordPress 儀表板上的媒體 > 庫。

點擊現有圖像或上傳新圖像檔案。在我們的例子中，我們選擇上傳新的圖像檔案。

點擊新增的圖像後，您將看到其所有詳細資訊。點擊右下角的“編輯更多詳細資訊”以存取新增的設定。

在圖像詳細資料中，按一下編輯圖像按鈕。

在「縮放影像」下，輸入新的尺寸（寬度或高度），WordPress 將按比例縮放影像。按一下“縮放”以套用變更。

注意：您無法將影像縮放得比原始版本更大。如果您這樣做，WordPress 會通知您。

使用影像壓縮工具

如前所述，壓縮圖像有助於減小檔案大小。可使用各種影像壓縮工具，包括 Adob​​e Photoshop 或 Microsoft Photos 等編輯軟體。

或者，您可以使用 TinyPNG 等線上工具來實現此目的。

此工具喜歡有損壓縮，以最大限度地減少 WEBP、JPEG 和 PNG 檔案的大小。只需上傳您的映像，TinyPNG 就會為您處理壓縮。

或者，您可以使用強大的圖像優化插件，例如 Imagify。在安裝和啟用之前，從 WordPress 儀表板的「外掛」部分新增外掛程式。

在 WordPress 網站上安裝並啟動 Imagify 後，導覽至「設定」>「Imagify」以配置您的壓縮首選項：

設定完成後，按一下「儲存變更」。然後，Imagify 會自動壓縮您上傳到網站的所有圖片。

更改最大上傳限制

WordPress 設定最大檔案上傳大小，該大小可能因託管提供者施加的限製而異。前往 WordPress 儀表板中的媒體 > 新增內容以確定目前的文件上傳限制。上傳大小限制將顯示在此頁面。

一般來說，除非您打算上傳較大的文件，否則無需調整此限制。但是，降低檔案大小限制可能很有用，特別是當您管理多作者部落格時，可以防止其他人上傳不必要的大圖像。您可以聯絡您的託管提供者來修改最大上傳大小或透過編輯 php.ini 檔案來更新限制。

使用延遲載入

延遲加載是一種效能提陞技術，可以延遲網頁上圖片的加載，直到真正需要它們為止。延遲加載不是在訪問頁面時強制所有圖像立即加載，而是僅在用戶向下滾動並進入視圖時加載圖像。這減少了頁面的初始載入時間，節省了頻寬，並改善了使用者體驗。

如今，大多數 WordPress 主題和外掛程式都提供了延遲載入的內建支援。自版本 5.5 起，WordPress 本身甚至包含本機延遲載入。此外，WP Rocket、WP Rocket 的 Lazy Load 和 a3 Lazy Load 等各種外掛程式提供了對延遲載入過程的更高級的控制和自訂，使得無需太多技術專業知識即可輕鬆在任何 WordPress 網站上實施。

所有這些實踐都是在 WordPress 上保持專業圖片尺寸的基礎。然而，我們多產的 WordPress 主題和建構器 Divi 透過其響應式屬性進一步提升了它們。

如何使用 Divi 創建完美的圖像尺寸

如果您想更好地控制圖像設計和尺寸選項，可以使用 Divi 等頁面建立器。 Divi 配備了先進的回應功能。該工具將多種功能整合到您的 WordPress 網站中，包括調整圖片大小。在這裡，我們將深入研究 Divi 如何在保持影像品質的同時提高影像尺寸。

1.下載並安裝Divi

Divi 可以透過 Elegant Themes 購買，提供兩種定價選項：年度許可證89 美元或終身許可證249 美元。購買後，您可以按照以下步驟輕鬆在 WordPress 網站上下載並安裝主題：

1. 在 WordPress 儀表板中，前往外觀 > 主題。
2. 點擊“新增主題”，然後選擇“上傳主題”。
3. 選擇下載的 Divi .zip 檔案並點擊立即安裝。
4. 安裝完成後，按一下「啟動」以使 Divi 成為您的活動主題。

如需詳細指南，請觀看下面的影片。

完成設定後，您可以開始建立您的網站。要預先熟悉流程，請查看我們的 Divi Builder 使用教學課程。

開始使用 Divi

2. 建立您的網站，打開 Divi Builder 並選擇您的圖像

在WordPress上安裝Divi主題後，您可以快速建立您的網站。 Divi 為您提供了多種建立網站的選項。您可以從頭開始建立您的網站，利用我們預製的佈局，或使用 Divi AI 建立您的網站。

此外，您還可以使用Divi Quick Sites在一兩分鐘內建立一個專業的網站。

建立網站並添加各自的圖像後，您可以訪問 Divi Builder 並配置 WordPress 圖像大小。首先，前往您已建立的 Divi 網站，然後按一下「啟用 Visual Builder」。

點擊任何新增的圖像以調整大小。點擊滾輪圖示以開啟 Divi 圖像模組。

3. 使用 Divi 回應設定調整 WordPress 上新增的圖片的大小

Divi 的響應式設定可讓您輕鬆在 WordPress 上針對不同裝置（桌上型電腦、平板電腦和行動裝置）調整圖片大小。在影像模組設定中，導覽至「設計」標籤。這是大多數自訂（包括響應式設定）發生的地方。在“設計”標籤中，向下捲動以找到“尺寸調整”部分。

在這裡，您可以調整所選影像的多個尺寸，例如：

1. 寬度
2. 最大寬度
3. 模組對齊
4. 最低高度
5. 高度
6. 最大高度

注意：您也可以透過啟用提供的選項來強制全寬。但是，這將使寬度和最大寬度無法變更。

在每個屬性旁邊，您會看到一個類似於智慧型手機或平板電腦的小圖示（響應式設定圖示）。按一下此圖示可啟用不同的桌面、平板電腦和行動裝置視圖設定。

在本例中，我們將平板電腦版本的最大寬度設定為 85%。減小的寬度和居中定位將節省主頁空間，使影像在較小的裝置上更具視覺吸引力。點擊綠色勾號按鈕以套用已儲存的變更。

SRCSet 功能

Divi 為所有影像帶來原生 SRCSET 支持，讓主體可讓您的影像自動回應。它確保將適當大小的圖像傳送到每個設備，透過向較小的設備提供較小的圖像來提高加載速度。最重要的是，它會自動發生，無需您做任何額外的努力。

獲取迪維

其他影像優化工具

儘管 Divi 的響應式設定為在 WordPress 中調整圖片大小提供了一個很好的解決方案，但您可能需要 Divi 目前缺乏的其他優化工具。以下是一些您可以使用的外部影像優化工具：

1. EWWW 圖像優化器：一個功能強大的 WordPress 插件，可在上傳時自動壓縮新圖像，並為現有媒體提供大量優化器。它允許調整圖片大小和刪除元數據，並支援延遲載入和轉換為 WebP 格式以實現更好的壓縮。免費版本直接在您的伺服器上運行，沒有檔案大小限制，而進階版本則利用雲端服務來增強最佳化和更高的壓縮比。
2. ShortPixel Image Optimizer：外掛程式可優化圖片和 PDF 文件，同時自動調整圖片大小。它提供靈活的壓縮選項（有損、無損和光澤），為使用者提供平衡的選擇。該外掛程式備份原始影像，刪除元數據，並將 PNG 轉換為 JPEG，優化 Retina 影像和縮圖。但是，您必須共用您的電子郵件以取得 API 金鑰。
3. Optimole：一款免費的一體化影像最佳化插件，可透過基於雲端的伺服器即時處理影像。它的獨特之處在於根據訪客的視窗選擇最佳圖像尺寸並實現延遲加載以實現高效顯示。升級至高級方案可提供無限的影像轉換和高級功能，包括保留原始清晰度的高品質壓縮，同時減少檔案大小以及自動建立 Retina 和 WebP 版本。
4. WP Smush：該外掛程式是 WPMU DEV 外掛程式套件的一部分。它會在圖片上傳到您的 WordPress 網站後自動優化圖片。 WP Smush 具有大量最佳化選項，可讓您一次壓縮最多 50 張影像，從而輕鬆增強現有媒體。該插件還包括圖像調整大小和延遲載入的選項，您可以將其配置為在上傳時從圖像中刪除元資料。它支援最大 5 MB 的圖像，但您需要升級到高級版本才能優化更大的檔案。

無論採用哪種方法，您都可以提高網站的效能。影像優化有助於縮短載入時間並提供更好的使用者體驗。

結論

2024 年，在 WordPress 上建立一個成功的網站將超越基本功能；為您的客戶提供無縫且引人入勝的體驗至關重要。優化圖片尺寸對於實現這一目標至關重要，因為它有助於確保快速加載時間和反映您品牌形象的視覺吸引力佈局。透過利用智慧插件和自訂選項，您可以增強網站的效能，並將其轉變為吸引訪客的誘人店面。

如果您正在尋找更多自訂選項來使用視覺生成器調整影像大小，Divi 可以輕鬆進行即時調整，以確保您的影像在所有裝置上看起來都很完美。

獲取迪維

想要提升您的 WordPress 網站嗎？發現理想的圖像尺寸以增強網站的性能和視覺吸引力。探索我們精選的工具和技巧列表，它們可以幫助您有效管理圖像尺寸，以獲得更好的用戶體驗。