WordPress 精選圖片尺寸：1200×630 及查詢方法

簡短回答： 如果你還不知道佈景主題的尺寸，就用 1200 x 630 像素（約 1.91:1）。這是 Facebook 建議的連結預覽尺寸，而 SEO 外掛通常會把精選圖片當作分享圖片。

在文章頁面上，真正重要的是佈景主題顯示的尺寸。WordPress 會把每張上傳的圖片儲存成多種尺寸，顯示哪一種由佈景主題決定。傳統佈景主題用 set_post_thumbnail_size() 或 add_image_size() 設定，區塊佈景主題則在「精選圖片」區塊中設定。如果佈景主題裁成 16:9 或正方形，1200 x 630 的圖片左右兩側可能會被裁掉一部分。先找出佈景主題的尺寸（下文介紹四種方法），再上傳至少一樣大的圖片；為了在高密度螢幕上清晰，寬度最好約為兩倍。

想知道 WordPress 會從某張圖片產生哪些尺寸，把它拖進 WordPress 圖片尺寸工具就能看到。

依圖片顯示位置選擇尺寸

圖片顯示位置	上傳尺寸	說明
你的文章，還不知道佈景主題尺寸	1200 x 630，想更清晰可用 2400 x 1260	在你查出佈景主題尺寸之前，也適用於連結預覽
你的文章，已知佈景主題尺寸	約為佈景主題精選圖片寬度的兩倍，長寬比相同	WordPress 只會為上傳的圖片產生較小的副本，從不產生較大的
Facebook 連結預覽	至少 1200 x 630（約 1.91:1）；1200 x 628 的形狀幾乎相同	出自 Facebook 的分享指南
Google 探索（Discover）	寬度至少 1200px，16:9（例如 1200 x 675）	出自 Google 的探索指南

WordPress 圖片尺寸一覽

你上傳的每張圖片都會為每個已註冊尺寸產生縮放副本。以下是 WordPress 核心註冊的尺寸，預設值來自 Theme Handbook 和核心函式參考：

尺寸名稱	預設尺寸	能在「設定 > 媒體」修改嗎？	說明
thumbnail	150 x 150，裁切	可以	有「裁切至精確尺寸」核取方塊
medium	最大 300 x 300	可以	等比例縮放
medium_large	寬 768，不限高度	不行	主要用於 srcset
large	最大 1024 x 1024	可以	等比例縮放
1536x1536	最大 1536 x 1536	不行	WordPress 5.3 為高密度螢幕新增
2048x2048	最大 2048 x 2048	不行	WordPress 5.3 為高密度螢幕新增
post-thumbnail	由佈景主題設定	不行	只有佈景主題呼叫 set_post_thumbnail_size() 時才存在
full	你上傳的原圖	不行	非常大的圖片會先被縮小（見下文）

「最大」表示 WordPress 會把圖片縮放到能放進這個框內，並保持比例。一張 2000 x 1000 的照片在 large 中會變成 1024 x 512，而不是 1024 x 1024。

佈景主題和外掛常用 add_image_size() 加入更多尺寸。例如 WooCommerce 會加入自己的商品圖片尺寸，我們的 WooCommerce 商品圖片尺寸指南有詳細說明。

還有一條規則會影響大圖。從 WordPress 5.3 開始，如果圖片寬或高超過 2560 像素，WordPress 會把它縮小，並把縮小後的副本當作可用的最大尺寸。這個門檻來自 big_image_size_threshold 篩選器，預設值為 2560。如果你在檔名中看到 -scaled，想知道要不要關閉它，請閱讀如何在 WordPress 停用 scaled 圖片。

精選圖片尺寸到底從哪裡來

精選圖片就是你在文章編輯器「精選圖片」面板中設定的任何一張圖片。訪客看到什麼，取決於佈景主題如何輸出它。

傳統佈景主題

傳統佈景主題會在自己的 functions.php 中開啟精選圖片並註冊尺寸：

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() 會註冊一個名為 post-thumbnail 的尺寸。第三個參數控制裁切。設為 false（預設）時，WordPress 會把圖片縮放到能放進 1200 x 675。設為 true 時，它會從中心把圖片精確裁成 1200 x 675，16:9 框外的部分都會遺失。你也可以傳入 array( 'center', 'top' ) 這類陣列，選擇要保留哪個部分。

許多佈景主題會為不同範本額外註冊具名尺寸：

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

接著範本依名稱選用其中一個：

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

不帶名稱呼叫時，the_post_thumbnail() 會使用 post-thumbnail。所以傳統佈景主題實際的精選圖片尺寸，就是範本中指定名稱的那個尺寸，而部落格彙整頁可能和單篇文章頁使用不同的尺寸。

區塊佈景主題

區塊佈景主題，包括本站的免費佈景主題，用「精選圖片」區塊輸出精選圖片。核心區塊參考列出了它的設定，包括 sizeSlug（載入哪個已註冊尺寸）、aspectRatio、width、height 和 scale。

這改變了你要查看的位置。開啟「外觀 > 編輯器」，編輯「單篇文章」範本，選取「精選圖片」區塊。側邊欄會顯示它載入哪個圖片尺寸，以及是否設定了長寬比。長寬比是在瀏覽器中以 CSS 套用的，所以檔案不變，變的是可見的框。如果區塊要求 16:9 的框而你的圖片是正方形，就會有一部分被隱藏。彙整頁和首頁範本可能使用與單篇文章範本不同的設定，所以每一個都要檢查。

如何找出佈景主題使用的精選圖片尺寸

依序嘗試下列方法，第一個給出答案的就夠了。

1. 查看佈景主題說明文件。 好的佈景主題會寫明建議的精選圖片尺寸。有的話就照著用。

2. 用 WP-CLI 列出已註冊尺寸。 如果你能使用命令列，wp media image-size 會列出每個已註冊尺寸的寬度、高度、裁切設定和比例：

   wp media image-size

3. 搜尋佈景主題檔案。 在傳統佈景主題中，到 functions.php（以及它引入的檔案）搜尋 set_post_thumbnail_size 和 add_image_size，再到 single.php 或範本片段中找傳給 the_post_thumbnail() 的名稱。在區塊佈景主題中，依上文所述在網站編輯器裡檢查「精選圖片」區塊。

4. 檢查線上文章。 在精選圖片上按右鍵，選擇「檢查」，讀取 src 中的檔名。WordPress 會在縮放副本的檔名中加入尺寸，所以 my-photo-1200x675.jpg 代表佈景主題載入的是 1200 x 675 的副本。也請看看 srcset，因為在窄螢幕上瀏覽器可能選擇較小的副本。檔名中沒有尺寸，就表示用的是完整尺寸的檔案。

知道目標尺寸後，在大量上傳前，先用一張範例圖片跑一次圖片尺寸工具，確認每個副本的樣子。

選擇上傳尺寸

知道佈景主題的尺寸後，結果好不好看取決於四個選擇。

• 寬度。 上傳寬度至少要等於佈景主題的顯示寬度。要在高密度的手機和筆電螢幕上清晰，目標約為兩倍寬度。以 1200px 寬的位置來說就是 2400px。WordPress 只會從你的上傳圖片產生較小的副本，從不產生較大的，所以原圖太小是上傳後圖片模糊最常見的原因。
• 長寬比。 與佈景主題的裁切比例一致。如果它裁成 16:9，就給它 16:9 的圖，並把主體放在接近中央的位置，避免硬裁切切掉人頭或文字。
• 檔案大小。 以合理品質存成 JPEG 的 2400px 照片通常只有幾百 KB。上傳 6000px 的相機原檔只會增加負擔：WordPress 反正會縮小所有超過 2560px 的圖片，多出來的像素永遠不會送到訪客面前。
• 檔案格式。 只要伺服器的圖片處理程式庫支援，WordPress 從 5.8 版起支援上傳 WebP，從 6.5 版起支援 AVIF。在品質相近時，兩者產生的檔案通常都比 JPEG 小。

社群分享圖片是另一回事

有人把你的文章分享到 Facebook、LinkedIn 或其他平台時，預覽圖來自 og:image 標籤，SEO 外掛通常會用精選圖片填入它。Facebook 的分享文件建議圖片至少 1200 x 630 像素，並盡量接近 1.91:1 的比例。

你也會看到有人建議 1200 x 628。它幾乎正好是 1.91:1，而 1200 x 630 約為 1.90:1。兩者高度只差 2 像素，用哪一個都可以。

如果你的佈景主題顯示尺寸也接近 1.91:1，一張 1200 x 630（或 2400 x 1260）的圖片兩邊都能用。如果佈景主題裁成 16:9 或正方形，請讓重要內容遠離左右兩側邊緣，或在 SEO 外掛中另外設定社群分享圖片。

Google 探索（Discover）對圖片有自己的建議。Google 的探索指南建議圖片寬度至少 1200px、總像素超過 300,000，並採用 16:9 比例，例如 1200 x 675。大圖還需要 max-image-preview:large 這個 robots 設定，WordPress 從 5.7 版起預設會加入它，除非網站勾選了「阻擋搜尋引擎索引這個網站」。

如何修改精選圖片尺寸

要在哪裡修改，取決於尺寸類型和你的佈景主題。

核心尺寸（thumbnail、medium、large）。 前往「設定 > 媒體」，修改寬度和高度。媒體設定畫面說明文件介紹了這些欄位，包括縮圖的裁切核取方塊。

傳統佈景主題中的佈景主題尺寸。 不要修改上層佈景主題，因為佈景主題更新會覆蓋你的修改。把新數值加到子佈景主題的 functions.php。用相同名稱重新註冊尺寸會取代原本的設定，而子佈景主題的設定必須在上層佈景主題之後執行：

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

優先順序 11 讓這段程式碼在以預設優先順序 10 掛載的上層佈景主題之後執行。請檢查上層佈景主題的程式碼，如果它使用更晚的優先順序，就跟著調整。

區塊佈景主題。 在網站編輯器範本中修改「精選圖片」區塊的圖片尺寸和長寬比。不需要程式碼，修改會套用到使用該範本的所有文章。

單張圖片，不需程式碼。 想決定某一張圖片裁切時保留哪個部分，可以在「媒體 > 媒體庫」中開啟它，點擊「編輯圖片」。依佈景主題的比例裁切（裁切工具可以輸入 16:9 這類長寬比），或是縮放它，然後儲存。WordPress 會把修改套用到這張圖片的所有尺寸，並保留原始檔案，之後可以用「還原原始圖片」復原。

重新產生現有縮圖

修改後的尺寸只會套用到新上傳的圖片。媒體庫中已有的圖片會保留舊副本，直到你重建它們。wp media regenerate 指令可以做到：

wp media regenerate --yes

WP-CLI 說明文件中幾個實用的選項：

• --image_size=hero-wide 只重建這個尺寸。需要多個尺寸時重複這個參數。
• --only-missing 只產生還不存在的尺寸，不動既有檔案，新增尺寸後使用會更快。
• --skip-delete 保留舊的縮圖檔案。如果其他網站、電子報或訂閱來源直接連結這些檔案，就使用它。

沒有命令列時，WordPress.org 外掛目錄中的 Regenerate Thumbnails 外掛可以在控制台完成同樣的工作。媒體庫很大時請先備份，因為重新產生會改寫大量檔案。

常見錯誤

• 只停留在 1200 x 630。它是不錯的起點，也適合連結預覽，但如果你的佈景主題裁成 16:9 或正方形，圖片會被切掉一部分。大量上傳前請先確認佈景主題的尺寸。
• 為了「保留原圖」而關閉產生的尺寸。如果佈景主題沒有較小的副本，它可能在所有螢幕上都載入完整檔案，讓手機上的頁面變慢。縮放副本正是為了避免這種情況。
• 改了圖片尺寸程式碼卻沒有重新產生。程式碼是有效的，但只對新上傳的圖片有效。很多人覺得改尺寸「沒有用」，原因就在這裡。
• 在上層佈景主題中修改尺寸。下一次佈景主題更新就會把它移除。請使用子佈景主題或網站編輯器。

如果尺寸和比例都已對應、也重新產生過，圖片看起來仍然不對，請把瀏覽器載入的檔名與圖片尺寸工具顯示 WordPress 應產生的尺寸互相比對。兩者不同時，往往是 WordPress 和訪客之間的最佳化外掛或 CDN 圖片縮放服務在提供它自己的版本。