WordPress 圖片尺寸怎麼設才對？帶你理解原生設定與不靠外掛的優化方法

你在經營 WordPress 網站的時候，可能也遇過這樣的情況：
圖片顯示模糊、載入太慢、甚至影響整個網站的 SEO 排名，卻不太確定問題到底出在哪裡。
其實，圖片往往是網站速度的隱藏殺手，尤其當尺寸沒設好、上傳前沒有壓縮，或格式選錯時，累積下來就變成一場效能的災難。

你可能也發現了，很多人一開始都沒有特別留意 WordPress 圖片尺寸的設定，結果網站上就出現了好多超大圖片。
有些人會以為：「裝個外掛就能補救吧？」但其實，很多問題都能靠 WordPress 本身的圖片處理邏輯，搭配前期的正確準備，你完全可以「不靠外掛」就輕鬆解決。
從上傳前的準備、尺寸挑選，到後台的設定與編輯器的運用，當你了解圖片的處理機制，很多看似複雜的問題，其實都能迎刃而解。

這篇文章會一步步陪妳整理好 WordPress 圖片尺寸怎麼設定、不同情境下該用什麼尺寸、還有格式怎麼選擇，以及 WordPress 內建的 lazy load 和響應式圖片功能怎麼善用。
當你學會用對的方法，圖片不只能更清晰，整個網站也會更快、更穩定，使用者體驗也能隨之升級。

---

為什麼 WordPress 圖片沒設好會拖累整個網站？

圖片在網站裡看似只是視覺輔助，卻常常是網頁載入最重的元件。
尤其在 WordPress 中，如果沒有調整圖片尺寸和格式，系統可能會直接載入幾MB大的原圖，結果就發生以下這些問題：

• 載入速度變慢，影響 SEO：Google 的 Core Web Vitals 指標（像是 LCP，最大內容繪製時間）會評估圖片和大區塊的載入速度。如果圖片太大、載入太慢，網站的排名自然就被拉下來。
• 使用者體驗受影響，跳出率升高：手機上圖片打不開、等太久才看到內容，是很多人關掉網頁的原因。尤其在行動裝置上，圖片顯示不當更容易出錯。
• 伺服器空間被吃光：WordPress 預設會幫每張圖片生成多種尺寸的縮圖。如果圖片尺寸太大，儲存空間很快就被塞滿，也會讓備份變得更慢。
• 網站搬家困難：圖片多、檔案大，搬家或轉主機時就成了一場漫長的等待。特別是縮圖膨脹（thumbnail bloat）問題沒處理時，成千上萬個圖片檔案根本讓人無從下手。

最常見的情況是：上傳一張 3000 像素寬的圖片，只為了放在文章裡顯示 800px，卻載入了完整的原圖。這不只是資源浪費，也是網站卡頓的主因。這些問題，其實都能透過理解圖片尺寸邏輯、設定得當來預防。

---

WordPress 自動幫你產生哪些圖片尺寸？（縮圖機制解析）

每次你上傳一張圖片到 WordPress，系統可不是只保留一份原始圖，它還會自動生成好幾種不同尺寸的縮圖版本，讓你在不同地方（像是文章縮圖、側邊欄小圖）可以自由選用。但這個設計，其實也潛藏不少效能上的陷阱。

WordPress 預設會建立這些尺寸：

• 縮圖 (Thumbnail)： 150x150px，通常是正方形、裁切過的版本，用在圖片集或文章預覽。
• 中型 (Medium)： 最長邊不超過 300px，會依比例縮小。
• 大型 (Large)： 最長邊不超過 1024px，一樣是按比例縮放。
• medium_large： 幾乎沒人知道，但它默默地存在，寬度 768px，主要給 srcset 響應式圖片用。
• 完整尺寸 (Full)： 就是你上傳的原始圖，未經處理。

這些尺寸會自動儲存在 wp-content/uploads/ 資料夾中，每張圖都會多出一套。如果你的主題或外掛還自訂了額外的圖片尺寸（很多主題都會這樣做），一張圖可能就被切成八個版本也不稀奇。

問題來了：WordPress 不會判斷哪些尺寸你真的會用

WordPress 的邏輯很貼心，也很直接：只要圖片一上傳，就會同時幫你產生多種尺寸的縮圖。這原本是為了方便你在不同區塊中靈活使用圖片，但它不會知道你真正會用到哪些尺寸。

久而久之，這種「先生成再說」的機制，就很容易造成縮圖膨脹（thumbnail bloat）。如果你的主題或外掛並沒有使用到某些尺寸，這些縮圖就會安靜地佔據你的伺服器空間，也可能讓備份與網站搬家變得更複雜、更耗時。

該怎麼做？

其實，很多縮圖問題並不是無解的，只要稍微花點心力，就能溫柔地解決。
首先，你可以從兩個方向著手：

• 檢查目前主題實際用到的圖片尺寸，有的話記得保留，沒用到的就考慮從後台調整設定（下一段會講）。
• 如果主題需要特別尺寸，建議用程式碼自訂需要的大小，這樣可以更精準控制圖片的裁切與比例（之後我們也會教怎麼做）。

WordPress 的預設邏輯雖然夠用，但對追求效能或設計一致性的使用者來說，就顯得不夠靈活了。了解這些基礎，是圖片優化的第一步。

---

圖片上傳前：什麼尺寸最剛好？（用途對照尺寸表）

很多人上傳圖片時，習慣直接用手機拍的、設計師給的高解析原圖，動輒三四千像素寬，但其實網站根本用不到這麼大的尺寸。圖片尺寸太大，不但佔空間，也會拖慢載入速度。

正確做法是：圖片上傳前先調整到「剛剛好」的大小，既能保持清晰，也不會浪費資源。那麼，什麼是「剛剛好」的尺寸？其實要看你要用圖片放在哪裡。

常見圖片用途 × 建議尺寸（像素）

以下是幾種常見用途的建議尺寸，你可以在編輯圖片時參考這些數值：

📌 小提醒： 若不確定內容區寬度，可以打開你網站的文章頁面，右鍵檢查圖片區塊的實際寬度（或問設計師／開發者），這樣可以更精準地決定圖片該調整到幾像素寬。

上傳前的尺寸調整怎麼做？

其實，你不需要一定要用 Photoshop，像是 Mac 的預覽工具、Windows 的畫圖程式，或者免費線上工具（例如 Squoosh），都能輕鬆把圖片調整到最適合的尺寸。

記得，圖片不是越大越好，而是「剛好就好」。這樣 WordPress 才能順利幫你產生適合的縮圖，也能避免圖片模糊或拖累網站速度。

---

後台媒體設定怎麼調整比較適合你的版型？

WordPress 其實有提供一個很實用但常被忽略的功能：你可以進後台修改「圖片尺寸預設值」，不讓它每次都自動生出一堆你根本沒用到的縮圖。

你可以這樣做：

1. 到後台左側選單點進 「設定」→「媒體」。
2. 會看到三組可以調整的尺寸：
   • 縮圖大小（Thumbnail）： 這是最小的方形圖片。你可以選擇是否「裁切成這個尺寸」。
   • 中型（Medium）： 通常用在小圖顯示，最大寬高預設是 300px。
   • 大型（Large）： 預設最大寬高是 1024px，通常用在文章中段或主圖區塊。
3. 根據你網站的設計需求，把不需要的尺寸設為 0（代表不產生），或者把尺寸調整成你實際需要的大小，就能避免 WordPress 產生太多縮圖，讓媒體資料夾更清爽，也幫助網站維持輕盈。

什麼時候該改這些設定？

• 如果你常常在文章裡選不到剛好合適的圖片大小，只好硬拉圖片尺寸，那就表示預設尺寸設得不對。
• 如果你只用一種圖片尺寸（例如只用 800px 寬的橫圖），那麼就把中型、大型都關掉，只留下你會用的那組。
• 如果你有換過主題，記得檢查新主題有沒有特定需要的尺寸，並依據它的設計需求重新設定。

📌 補充建議： 無論你怎麼調，記得上傳的圖片原始寬度一定要大於你設定的最大尺寸，不然 WordPress 會沒辦法產生清晰的縮圖。

比如你設了大型圖片寬度為 1200px，但你只上傳了一張 1000px 的圖片，那這張圖在某些版位就會被放大顯示，結果就是模糊或鋸齒。

---

想要更精準：如何自己加一組圖片尺寸？

如果你用的主題對圖片有特別要求，像是橫幅要 1600 寬、側欄要小尺寸、幻燈片需要特定比例，那 WordPress 預設的三個尺寸很可能就不夠用了。這時候你可以透過程式碼，自己定義圖片尺寸，這樣更符合實際版型需求，也能避免拉圖片變形或顯示模糊。

怎麼新增自訂圖片尺寸？

這功能需要你動到 functions.php 檔案，建議操作時搭配子主題（Child Theme），或用安全的程式碼外掛（如 WPCode）來編輯。

步驟一：確認主題支援圖片縮圖

add_theme_support( 'post-thumbnails' );

這行可以放在 functions.php 的開頭一次就好，大多數主題已經內建支援。

步驟二：加入你需要的尺寸

// 加一組首頁橫圖（寬 1200，高度不限）
add_image_size( 'homepage-banner', 1200, 9999 );

// 加一組側邊欄小縮圖（120x120，強制裁切成正方形）
add_image_size( 'sidebar-thumb', 120, 120, true );

參數說明：

• 第一個是尺寸名稱（用英文命名，不要有空格）
• 第二、三個是寬度與高度
• 第四個是要不要裁切成剛好那個尺寸（true = 硬裁切，false = 按比例縮）

額外技巧：加進編輯器尺寸選單

如果你希望這些新尺寸能在編輯文章時從「圖片大小」選單中選到，也可以加上這段：

function add_custom_sizes_to_editor( $sizes ) {
  return array_merge( $sizes, array(
    'homepage-banner' => '首頁橫圖',
    'sidebar-thumb' => '側欄小縮圖',
  ));
}
add_filter( 'image_size_names_choose', 'add_custom_sizes_to_editor' );

這樣以後你在 Gutenberg 編輯器裡選圖片，就能看到這些新尺寸的選項了，方便又直覺。

你可能有個疑問：新增了這些自訂圖片尺寸，那不就是每一張圖都會生成這些尺寸，那佔的空間不就更多了嗎？

你說的沒錯——只要你在 functions.php 裡用 add_image_size() 新增了圖片尺寸，那 WordPress 就會為每一張新上傳的圖片，產生這些額外尺寸的縮圖。如果你定義了很多尺寸，又上傳了大量圖片，確實會增加儲存空間的使用量，這就是「縮圖膨脹（thumbnail bloat）」的根本原因。

那為什麼還是有人會新增自訂尺寸？

因為對「排版精準度」要求比較高的網站（例如雜誌風、電商、客製化主題），需要在不同版位呈現一致大小的圖片，這時候只能透過自訂尺寸來做到「每張圖都一樣寬高、不會變形」，否則靠內建尺寸或手動拉大小，常常會出現一堆比例不一致的畫面。

怎麼平衡「圖片精準顯示」與「儲存空間」？

這裡提供幾個建議讓你取捨更有依據：

建議一：只新增「真的會用到」的尺寸

不要手滑就定義一堆尺寸。你可以觀察：

• 目前主題哪些區塊圖片尺寸固定？
• 哪些圖片會在多個地方重複出現？

只定義必要的、會在多篇文章共用的版位（例如：封面圖、側欄縮圖）。

建議二：圖片上傳前就手動壓縮＆調整尺寸

這樣 WordPress 雖然還是會產出縮圖，但原始檔案本身就小了，衍生出來的尺寸也不會大到哪裡去。

建議三：搭配 disable_unused_image_sizes 方法（進階）

可以用外掛（或寫法）來禁用主題或外掛自動加進來的額外尺寸，只留下你自己定義的那幾個。例如很多主題或編輯器（像是 Elementor）會偷偷加一堆尺寸，但其實你根本沒用到。

建議四：清理沒用到的縮圖檔案（可手動）

如果你發現媒體資料夾堆了超多沒被用到的縮圖，可以用 FTP 或媒體管理外掛，搭配圖片使用追蹤工具，批次清掉那些「從來沒出現在文章裡」的圖片副本。

總結一句話：

新增自訂尺寸的前提，是你「真的會用到它」，且圖片呈現需要固定尺寸。否則只會增加硬碟負擔，還可能拖累搬家或備份速度。

你如果希望更精簡、省空間，那也可以不加新的尺寸，只是編輯時要自己選最適合的大小使用，或手動裁切圖片。

---

壓縮？格式？上傳前該注意的圖片準備原則

WordPress 雖然會幫你產生縮圖，但「圖片本身的檔案大小」和「檔案格式」還是掌握在你自己手上。如果上傳的原始圖就太大或格式不對，網站效能再怎麼調也會被圖片拖垮。

這一段，我們就來談談在不上外掛的情況下，圖片上傳前應該怎麼準備才最理想。

先縮小尺寸，再考慮壓縮

上傳圖片前，尺寸要先處理好，原則就是：「圖片寬度 ≧ 預計顯示的最大寬度」。例如：

• 文章區寬 800px，那圖片就上傳 800～1000px 寬就夠了
• 頁首大圖會全寬顯示，那就抓 1280～1920px 的解析度

不用太追求 3000px 原圖，因為：

• 顯示時會被縮小
• 載入時增加檔案體積
• WordPress 可能無法正確產生清晰的縮圖

手動壓縮圖片怎麼做？

不用靠外掛也能壓縮圖片，重點是在上傳前就先把圖片「變輕」又不失真。這裡最推薦的工具就是：

Squoosh —— Google 開發的線上壓縮神器

Squoosh 是一款免費又強大的圖片壓縮工具，可以：

• 即時預覽壓縮後的畫質與檔案大小
• 支援多種格式：JPEG、PNG、WebP、AVIF 通通可以轉
• 可調整解析度、壓縮比例，還能移除多餘的 metadata

操作方式也很簡單：

1. 拖進圖片
2. 選擇格式與壓縮方式（建議選 WebP + MozJPEG）
3. 即時預覽畫質
4. 按「Download」就能取得壓縮後的圖片

除此之外，也可以搭配這兩個工具視情況使用：

• TinyPNG：快速壓縮 JPEG 和 PNG，不需帳號
• Mac 使用者： 用「預覽 Preview」另存新檔時可調整品質

📌 建議壓縮後的圖片控制在 100–300KB 之間，文章內圖甚至可以更輕（70KB 也能清楚），只有封面大圖或頁首橫幅才需要保留較高畫質。

圖片格式怎麼選？

不同格式各有優勢，選對格式，就等於自動省下一半的載入時間：

📌 建議： 如果你願意手動轉檔，可以考慮用 Squoosh 或 Photoshop 另存為 WebP。WordPress 5.8 之後就支援上傳 WebP 圖片了。

---

WordPress 的原生優化功能有哪些能用？

很多人一遇到圖片載入慢，就直覺去找外掛處理。但其實 WordPress 本身就有不少圖片優化功能，若善加利用，在不裝任何外掛的情況下，也能大幅提升效能與載入速度。

1. 響應式圖片（srcset 和 sizes）

從 WordPress 4.4 開始，系統就會自動在圖片的 <img> 標籤中加入 srcset 和 sizes 屬性。簡單來說，這個功能會根據使用者的裝置螢幕大小，自動選擇最適合的圖片尺寸載入。

這能帶來什麼好處？

• 行動裝置就載小圖，桌機才載大圖，節省頻寬。
• 不用手動調整圖片大小，瀏覽器會幫你挑最佳版本。
• 對於 Retina 螢幕，也會選解析度更高的縮圖。

例如：

<img src="image-medium.jpg"
     srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="範例圖片">

這段標籤的邏輯是：螢幕越小，載越小的圖片；螢幕越大，才載高畫質版本，讓畫面清楚又不拖速。

2. 原生 Lazy Load（延遲載入）

從 WordPress 5.5 開始，圖片自動會加上 loading="lazy" 屬性。這個設定告訴瀏覽器：只有當圖片即將進入畫面時再去載入它。

這樣的延遲載入方式有幾個好處：

• 首屏載入速度大幅提升
• 節省不必要的圖片流量
• 使用者滑動到哪，再載入到哪，體感更流暢

使用條件：
這功能預設啟用，只要圖片的 <img> 標籤內有寬高（width/height），就會生效。不需任何設定或額外外掛。

3. 支援 WebP 與 AVIF 圖片上傳

• WebP： 從 WordPress 5.8 起可直接上傳，會像 JPG 一樣產生縮圖與尺寸。
• AVIF： 從 WordPress 6.5 起支援，但前提是伺服器端的 PHP 圖片處理函式庫（ImageMagick 或 GD）有開啟 AVIF 支援。

不過要注意一件事：

WordPress 雖然支援上傳 WebP / AVIF，但不會自動轉換格式或做 fallback 相容處理。如果你要自己手動轉換，記得確認圖片格式支援度，並避開過舊的瀏覽器。

---

如果圖片還是顯示不對：幾個常見錯誤排查方法

即使你圖片都有壓縮、尺寸也設對了，有時候圖片在 WordPress 上還是會「看起來不太對勁」——模糊、變形、載入特別慢。這段整理幾個常見問題與排查方式，幫你對症下藥。

1. 圖片模糊、糊成一團？

這種情況大多是因為顯示尺寸大於實際圖片尺寸，或是誤用了過小的縮圖。常見錯誤有：

• 在編輯器中選了「縮圖（150×150）」或「中型（300px）」，卻想顯示一張 800px 寬的圖片，結果就是被放大後模糊。
• 上傳的圖片本身解析度太低，不足以應付全寬顯示需求。

解法：

• 檢查圖片實際大小是否小於顯示寬度，必要時換成更大的圖片。
• 確保使用「圖片大小」選單選的是「大型」或「完整尺寸」，而不是用拖拉方式放大小圖。

2. 載入速度很慢？

圖片載入慢，很可能是因為：

• 上傳的是原圖（動輒數 MB），而不是壓縮後版本。
• 插入的圖片選擇了「完整尺寸」，但顯示寬度其實只有一半。
• 未使用 WebP / AVIF 等新格式。

解法：

• 改用壓縮過的圖片（可參考前述的 Squoosh 工具）。
• 在文章中選擇「中型」、「大型」這類尺寸，而不是一律用「完整尺寸」。
• 適當使用 WebP 格式圖片並測試相容性。

3. 圖片尺寸選單找不到自訂尺寸？

如果你已經用 add_image_size() 定義了新尺寸，卻在編輯器內看不到選項，可能是漏加了這段設定：

add_filter( 'image_size_names_choose', function($sizes) {
  return array_merge($sizes, array(
    '你的尺寸名稱' => '前台顯示名稱',
  ));
});

加上這段後，重新整理編輯器，就會出現在圖片大小下拉選單中。

4. 換了主題或調整尺寸後，圖片看起來怪怪的？

這時很可能是舊圖片沒有套用新的縮圖尺寸。WordPress 在改變圖片尺寸設定後，不會自動幫你重生縮圖。

解法：

• 使用 Regenerate Thumbnails 外掛（如你不想裝外掛，也可以跳過這步，手動上傳重製過的圖）。
• 或是刪除舊圖重上新的圖片，讓系統重新套用尺寸。

---

結語：不靠外掛也能優化圖片的工作流程

圖片優化其實不用搞得太複雜。很多時候，只要掌握正確的觀念與 WordPress 原生功能，就已經能解決大部分網站變慢、圖片模糊、檔案膨脹的問題。

這裡幫你整理一套不靠外掛的圖片處理流程，只要照這幾步做，圖片效能自然會越來越好：

圖片優化工作流程（不靠外掛版）：

1. 上傳前先處理圖片：
   • 調整為剛好顯示需要的尺寸（如文章區 800px 就別傳 3000px）
   • 使用 Squoosh 壓縮成 WebP 或 JPEG，控制檔案在 100–300KB 內
2. 選對格式：
   • 照片選 JPEG、背景透明選 PNG
   • 想效能更好則轉成 WebP（WordPress 5.8 起可直接上傳）
3. 設定好 WordPress 媒體尺寸：
   • 到「設定 → 媒體」調整縮圖、中型、大型的大小
   • 把用不到的尺寸設為 0，避免生成多餘縮圖
4. 必要時新增自訂尺寸（使用程式碼）：
   • 讓特定版位圖片能剛好對齊顯示，避免被放大或裁切
5. 善用原生功能：
   • WordPress 自動加上 srcset 和 lazy load，讓圖片載入更聰明、速度更快
6. 發佈前確認：
   • 插入圖片時選擇「圖片大小」下拉選單中最接近需求的尺寸
   • 避免一律用「完整尺寸」＋手動縮放

這些步驟看起來多，但熟悉後，其實只要幾分鐘就能完成。而且最大的好處是：不需要再裝一堆外掛，也能讓圖片清楚、載得快，網站體驗也更穩定。

記得，圖片的關鍵不是越大越好，而是剛剛好、剛剛美。
一步步把圖片處理好，網站自然就能更快、更美，也更貼近你心中的理想樣子。

願每一次的優化，都是一次對自己與使用者的溫柔照顧。
當你用心處理每一張圖片，也就為自己累積了一份更穩定、更持久的網站基礎。