WordPress 圖片優化終極指南：上傳前必做的 7 個步驟，有效提升網站速度

WordPress 圖片優化的成敗，幾乎全取決於你按下「上傳」之前的那 30 秒。圖片平均佔網頁檔案總重量約兩成，是載入時最吃主機資源的元素 [來源：〈HTTP Archive Web Almanac: Page Weight〉〈https://almanac.httparchive.org/en/2022/page-weight〉〈2022〉]；只要在上傳前先裁到正確尺寸、用 TinyPNG 等工具把檔案壓到 100KB 以內、改好英文檔名，再交給媒體庫與外掛，會比事後才靠 Smush 自動壓縮更省主機資源，也更可控。

重點先看：根據 HTTP Archive 的統計，圖片約佔網頁總重量的 21%；一張 603KB 的原圖經裁切加 TinyPNG 壓縮可降到約 56KB，體積縮到原本的不到十分之一，同一張圖佔用的頻寬只剩一成。

為什麼網站圖片優化是 WordPress 速度與 SEO 的第一戰線

圖片優化之所以重要，是因為圖片平均佔網頁檔案總重量的兩成以上，而且通常比 HTML、CSS、JavaScript 這些程式碼還要大，是網頁載入時最消耗主機資源的元素 [來源：〈HTTP Archive Web Almanac: Page Weight〉〈https://almanac.httparchive.org/en/2022/page-weight〉〈2022〉]。把圖片在上傳前先壓小，是投資報酬率最高的速度優化動作，沒有之一。

這背後牽涉到一個很多人忽略的事實：速度直接寫進了搜尋引擎的評分。Google 的 Core Web Vitals 指標把載入體驗量化成 LCP、INP、CLS 三個分數，而首圖往往是拖垮 LCP 的頭號嫌犯。你把首圖從 2MB 壓到 100KB，LCP 常常直接快上一截，這對 SEO 搜尋引擎優化排名有實質影響。所以圖片優化不只是「讓網站好看一點」，而是直接掛在 技術性 SEO 的成績單上，和 結構化資料 Schema 標記、Canonical URL 重複內容處理這類基礎工程屬於同一層。

說到底，優化圖片不是要你把畫質砍到見不得人。它是在「最小的檔案容量」與「你肉眼可接受的畫質」之間找平衡。這個平衡點其實比想像中寬鬆：多數網頁顯示寬度頂多 1200 到 2000 像素，你根本不需要上傳一張 5000 像素、5MB 的單眼相機原檔。這也是為什麼很多站長裝了一堆 WordPress 必裝外掛、網站還是慢，因為他們在處理症狀，沒處理病因。反過來看，選對 WordPress 佈景主題、用對 頁面編輯器，從硬體與架構先打好底，圖片優化的效果才會被放大。

這裡要先破除一個迷思。多數教學把「裝圖片壓縮外掛」當萬靈丹，好像掛上去就沒事了。但外掛只能在原檔的基礎上再壓一次，救不回一張 5MB 的原始相片。真正的瓶頸在上傳前：尺寸、格式、檔名這三件事沒先做，外掛只是幫你把錯誤的起點壓小一點。這也是這套做法把重心放在「上傳前的 7 個動作」的原因，至於 Smush 圖片壓縮外掛這類工具則留作上傳後的輔助保險。

這張表，把圖片優化在速度鏈路上的位置整理出來，方便你先建立全貌。如果你連現在的網站速度都不確定，建議先跑一次 網站速度測試工具，拿到基準值再回來動手。要弄懂這些數字背後的意義，也可以先回頭看 網頁速度（Page speed）是什麼，理解搜尋引擎怎麼看待網站速度，再回來對照自己的報告會更有感。

優化階段	發生時機	對檔案大小影響	常見工具
尺寸裁切	上傳前	最大（可砍掉 70% 以上像素）	Photoshop、Canva
格式選擇	上傳前	中等（JPG 比 PNG 小很多）	Photoshop、免費轉檔
手動壓縮	上傳前	中等（再砍 50% 到 80%）	TinyPNG、Squoosh
外掛自動壓縮	上傳後	小（只能在原檔再壓）	Smush、ShortPixel
延遲載入	執行時	不影響檔案，影響載入順序	瀏覽器原生、外掛

從這張表可以看出一個關鍵的取捨邏輯：離上傳時間點越遠的動作，對檔案大小的影響越大，成本卻越低。尺寸裁切一行指令就能砍掉七成像素，外掛再怎麼努力也擠不出同樣的幅度。把心力投資在最源頭，是這整套做法之所以能省主機資源的根本原因。

用一張決策矩陣判斷每張圖該怎麼處理

不同類型的圖片，最佳處理路徑並不一樣。把所有圖一視同仁全部丟進同一個壓縮工具，往往會得到「Logo 變糊、相片還是太大」的尷尬結果。在進入七個步驟的細節之前，先用一張決策矩陣把圖片分類，後面的動作會明確很多。

圖片類型	建議格式	建議尺寸（長邊）	處理重點
文章內文實景相片	JPG 或 WebP	1200 到 1600 像素	裁比例、降品質到 8、TinyPNG 再壓一次
首圖與全寬橫幅	JPG 或 WebP	2000 像素以內	留意 LCP、務必延遲載入以外的首屏圖
Logo 與圖示	PNG 或 SVG	實際顯示兩倍	透明背景優先，向量檔更輕
產品圖（白底）	WebP 或 JPG	1000 到 1500 像素	背景單純壓縮率特別高
圖表與截圖	PNG	顯示寬度的兩倍	文字清晰度優先，避免破壞性壓縮抹平字元
背景裝飾大圖	WebP	2560 像素以內	可接受較高壓縮、務必延遲載入或改成純色

判斷的兩個維度很直觀：第一個維度是「色彩複雜度」，相片與漸層屬於複雜，JPG 與 WebP 處理得最好；色塊單純的圖示與文字截圖屬於單純，PNG 的無損壓縮反而更小更清晰。第二個維度是「是否需要放大檢視」，產品圖和圖表常被讀者放大看細節，壓縮就保守一點；純裝飾用途的圖永遠不會被放大，可以放手壓到極限。把這兩個維度想清楚，遇到任何一張新圖都能在十秒內決定格式與壓縮力道。

第 1 步：從 CC0 圖庫找沒有版權爭議的圖片

找可商用的圖片，最穩的做法是鎖定 CC0 授權的圖庫，例如 Pexels、Unsplash、Pixabay。CC0 代表免費商用、免標記作者，使用上的爭議最小，下載前再花三秒鐘確認一次授權標記就好。比起擔心哪天收到存證信函，一開始就選對來源最省事。

為什麼要這麼計較授權？因為放錯一張圖，最壞的情況是吃上官司，得不償失。創用 CC（Creative Commons）有一整套授權條款，從「姓名標示」到「非商業性」都有，但對站長來說，CC0 是使用上最沒有爭議的一種：你不用記作者是誰、不用放連結、也不用擔心商業用途被卡。如果你常常需要大量素材，可以直接把 30 個商用免費圖庫總整理存起來，省下每次重新搜尋的時間。

以 Pexels 為例，它的圖片資訊會標在頁面下方，往下滑就能看到授權狀態與下載選項 [來源：〈Pexels License〉〈https://www.pexels.com/license/〉〈2026〉]。Pexels 在 2014 年成立，目前收錄的免授權圖片超過數百萬張，量級夠你找到幾乎任何主題的素材。Unsplash 和 Pixabay 也都有各自的資訊欄可以檢視授權，使用邏輯差不多。三者的差別主要在風格：Pexels 偏生活攝影、Unsplash 偏藝術感、Pixabay 還多了向量圖與音樂素材。

• 下載時優先選長寬不超過約 2000 像素的尺寸，方便後續裁切（這是業界常見的建議值）。
• Pexels 下載頁往下滑，可看到圖片詳細資訊與授權，下載前再確認一次。
• Unsplash、Pixabay 同樣在圖片頁提供授權資訊欄，記得點開看清楚。
• 需要更多風格選擇時，可到商用免費圖庫對照不同來源的特色。
• 若要做去背或合成，下載後可再搭配 AI 去背工具處理。

一個小提醒：很多人會把「免費」直接等同於「可商用」，這兩件事不一樣。有些圖庫標的是「免費個人使用」，商用得另行取得授權。所以下載前花三秒看授權，比之後補救便宜太多。

裁切：先決定版面比例再動刀

裁切要對齊網頁設計的顯示比例，例如 4:3 對應 800x600 像素。先決定比例再裁，能避免圖片在版面上變形、留白或被硬撐大。這一步的重點是「比例對」，尺寸大小反而是次要考量。

示範用 Photoshop：選左側的裁切工具，在最上方的欄位直接輸入比例（例如 4:3）或實際像素尺寸（800x600），畫面會出現可調整的白色框。移動這個框框住你想保留的主體，按下 Enter 或打勾，就完成裁切。如果你還不熟悉整個 Elementor 頁面編輯器、Elementor Pro 進階功能或佈景主題的圖片欄位規格，可以先回到後台看看圖片區塊的設計是幾比幾，再回頭決定裁切比例。這能避免「裁好才發現版面是 16:9」的尷尬。

裁切的重點其實是兩階段處理：先裁比例，再縮尺寸。很多人會把這兩步混在一起，直接把原圖硬縮，結果主體被壓扁或裁掉。先決定比例、把主體放進框裡，再去縮小整體尺寸，畫面才會自然。這個觀念也適用 Canva 新手設計、Illustrator 商品圖後製或任何你順手的工具，流程是通的，差別只在按鈕位置。

• 先決定版面比例（4:3、16:9、1:1 等），再裁切。
• 用 Photoshop 裁切工具輸入比例或像素，移動白框框住主體。
• Canva、Illustrator 流程相同，選熟悉的工具即可。
• 若要做商品輪播素材，比例可參考 Elementor 圖片輪播的規格。
• 版面還沒定下來時，可先讀 網頁版面設計再回頭裁圖。

第 3 步：調整影像尺寸到實際顯示需求

縮尺寸只有一個原則：縮到實際顯示所需的長寬就好，通常長邊不超過約 2000 像素。鎖定長寬比再縮放就不會變形。這一步是壓低檔案體積的第一層動作，也是效果最顯著的一層。

為什麼縮尺寸的威力這麼大？因為檔案大小和像素總數 roughly 是平方關係。一張 4000 像素寬的圖，縮到 2000 像素，像素總數只剩四分之一，檔案自然掉一大截。很多站長上傳原檔是因為「怕放大會糊」，但網頁顯示寬度就那麼大，你的 4000 像素根本用不到，等於是白白把頻寬丟進水裡。

在 Photoshop 操作：到上方選單的「影像」找到「影像尺寸」，彈出視窗後，先點那個鎖鏈圖示把長寬比鎖起來，這樣改寬度時高度會自動跟著動，比例不會跑掉。只有在個別調整比例的特殊需求時，才把鎖鏈解開。輸入目標尺寸（例如 800x600），按確定就完成。這個流程套用到任何 響應式網頁設計 RWD專案都適用。

• 長邊建議不超過約 2000 像素，視版面最大顯示寬度而定。
• Photoshop：影像 > 影像尺寸，點鎖鏈維持長寬比。
• 有個別調整比例需求時，才解開鎖鏈。
• 縮小尺寸是檔案瘦身的第一層，效果最大。
• 搭配 網站速度優化全攻略一起做，效果更完整。

儲存格式：JPG、PNG 還是 WebP

實景相片用 JPG、需要透明背景的圖示或 Logo 用 PNG，這是兩大主力的分工。品質方面，若沒有特殊需求，Photoshop 的中等品質（例如等級 8）就能兼顧畫質與檔案大小。把品質拉太高，檔案會跟著膨脹，肉眼卻幾乎看不出差別。

PNG 和 JPG 之所以是網頁的兩大主力，是因為它們的相容性最高，幾乎所有瀏覽器、編輯器都讀得懂。PNG 是無損壓縮，支援透明背景，適合 Logo、圖示、色塊單純的圖；JPG 是破壞性壓縮，適合色彩豐富的相片，檔案比 PNG 小很多。一個常見的錯誤是把相片存成 PNG，結果檔案是 JPG 的三到五倍大，畫質還沒有比較好。

再往上一層是 WebP 和 AVIF 這些新一代格式。WebP 的壓縮率明顯優於 JPG 與 PNG，Google 官方也推這個格式 [來源：〈WebP Google Developers〉〈https://developers.google.com/speed/webp〉〈2026〉]。不過新格式的前提是瀏覽器與主機都支援，所以一般建議是先存成 JPG 或 PNG 上傳，再讓壓縮外掛或主機端自動產生 WebP 版本，兩邊都顧到。這也是為什麼 WordPress 架站與 SEO流程裡，WebP 轉檔通常放在最後一道。

格式	壓縮類型	適用場景	透明背景	檔案大小
JPG	破壞性	實景相片、色彩豐富圖	不支援	小
PNG	無損	Logo、圖示、需透明	支援	較大
WebP	兩者皆可	新一代通用（需瀏覽器支援）	支援	最小
AVIF	破壞性	新一代、壓縮率最高	支援	最小

• 相片優先 JPG，透明背景與圖示優先 PNG。
• Photoshop 品質設中等（如 8）即可，再高檔案會暴增。
• WebP 壓縮率優於 JPG/PNG，建議上傳後再由外掛產生 [來源：〈WebP Google Developers〉〈https://developers.google.com/speed/webp〉〈2026〉]。
• 想知道更多細節可讀 15 款圖片壓縮工具的橫向實測。
• 格式選擇也會影響 圖片 SEO 優化的整體表現。

Retina 螢幕與 2x 像素的拿捏

很多人會擔心「縮到 800 像素，在手機的高密度螢幕上會不會糊」。這個擔心合理，但常被過度放大。手機的 Retina 螢幕雖然實體像素密度高，顯示一張圖的邏輯寬度其實還是那麼大，你只要把上傳尺寸設成實際顯示寬度的 1.5 到 2 倍，多數情況就夠銳利了。例如版面顯示寬度 800 像素，上傳 1200 到 1600 像素即可，沒有必要為了極致的清晰度上傳 4000 像素的巨檔。更聰明的做法是讓 WordPress 透過 srcset 機制，依裝置寬度自動挑選對應尺寸，等於一支圖片檔同時照顧手機、平板與桌面。

WordPress 從 4.4 版起內建響應式圖片功能，會在上傳時自動產生多個尺寸縮圖，並在 img 標籤加上 srcset 與 sizes 屬性，瀏覽器會自行挑選最合適的版本下載。這代表你只需要上傳一張「夠大但不浪費」的原檔，系統就會幫你做好行動版的分流。要確認這個機制有沒有正常運作，可以在瀏覽器對圖片按右鍵檢查，看 img 標籤裡有沒有 srcset 字樣。如果佈景主題或外掛把它拿掉了，行動版可能會下載到桌面版的超大圖，這時就要回頭檢查主題設定或快取外掛有沒有覆寫圖片輸出邏輯。

這裡的關鍵觀念是：手機螢幕的物理尺寸小，縱使密度高，單張圖實際佔用的版面寬度多半落在 350 到 500 像素之間。為手機準備 800 到 1000 像素的版本已綽綽有餘。統計資料顯示，2026 年第一季手機裝置（不含平板）佔全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]，超過一半的訪客從手機進站，所以「為手機準備對的尺寸」的回報比想像中高很多。能讓手機少下載一張 2MB 的桌面版大圖，等於直接幫過半訪客省下可觀的行動數據與等待時間。

疑難排解：壓縮完圖片還是慢或顯示異常怎麼辦

走完七個步驟，有時還是會遇到「圖明明壓過了，網站還是慢」或「圖片破圖顯示不出來」。這類問題通常出在輸出端的其他環節，與壓縮本身關係不大。最常見的幾個故障點與對應的排查方向整理在表格中，遇到狀況時可以按順序檢查。

症狀	最可能的原因	排查與修復方向
壓過的圖在測速工具上仍顯示偏大	頁面實際載入的是原始備份檔或未壓縮版本	檢查媒體庫是否用了正確檔案、清除快取外掛與 CDN 快取
首圖 LCP 一直居高不下	首圖未設優先載入、或被快取外掛延後	為首圖加上 loading 與 fetchpriority 設定、確認快取外掛排除首屏圖
部分圖片間歇性破圖	中文檔名或特殊字元在伺服器轉碼失敗	把檔名全面改為小寫英文加連字號、重新上傳
WebP 已轉檔但瀏覽器仍載入 JPG	主機未設定正確的 MIME 或 rewrite 規則	確認伺服器送出 picture 標籤或 content negotiation、檢查外掛轉檔狀態
行動版載入桌面版大圖	佈景主題關閉了響應式 srcset	檢查 img 標籤有無 srcset、回頭啟用主題的響應式圖片選項
啟用延遲載入後圖片不出現	外掛延遲載入與主題的捲動監聽衝突	改用 WordPress 原生延遲載入、關閉重複的第三方延遲外掛

排查時把握一個原則：先確認「頁面實際送出的檔案是哪一個」，再談壓縮效率。很多站長在媒體庫把圖換成壓縮版，頁面上卻還是載入舊檔，原因是快取外掛、CDN、或瀏覽器本身都還留著舊版本。養成「改圖之後清一次快取、再用無痕視窗打開頁面」的習慣，可以省下大量排查時間。無痕視窗能排除瀏覽器快取干擾，是驗證優化結果最快又可靠的方法。

七個常見的圖片優化地雷，做對反而更糟

優化圖片有一些動作看起來「很努力」，實際上會把網站越弄越慢或越弄越脆弱。把這些地雷列出來，是因為它們在論壇與社群裡被當成撇步流傳，誤信的人不少。逐一對照自己的網站，避開這些反效果的操作，效益往往比再加裝一個外掛更高。

• 同時安裝多套壓縮外掛：Smush、ShortPixel、Imagify 全開會讓伺服器對同一張圖重複壓縮，CPU 占用暴增、媒體庫還會塞進好幾套版本。留一套主力即可。
• 把所有圖都轉成 PNG 以求「不失真」：相片轉 PNG 後檔案是 JPG 的數倍，畫質沒有提升，體積反而失控。
• 為了極致壓縮把品質拉到 1 或 2：文字與邊緣出現明顯雜訊與色塊，讀者會直接判定網站不專業。
• 只信任外掛、不處理上傳前的原檔：5MB 的相片就算裝滿壓縮外掛，也壓不到 100KB，瓶頸從頭到尾都在原檔。
• 把裝飾用的背景大圖設成首屏優先載入：LCP 會被一張永遠不會被點擊的裝飾圖拖垮，應該延後或改用純色。
• 忽略 alt text 與檔名：壓縮做得再漂亮，搜尋引擎與螢幕閱讀器都讀不懂圖的內容，等於白白放棄圖片搜尋流量。
• 遷移主機或換主題後不重新檢查圖片輸出：舊的縮圖尺寸與新的顯示需求脫節，畫面會自動放大低解析版本而變糊。

這份清單的精神和 5 個常見 SEO 優化地雷是相通的：很多時候破壞排名的，是那些看似「做了總比沒做好」的多餘動作。圖片優化的核心是減法，把不需要的像素、不需要的外掛、不需要的格式都拿掉，剩下的才是真正會被讀者與搜尋引擎看見的價值。

第 5 步：用 TinyPNG 等工具再壓一次檔案

TinyPNG 壓縮效果相當有感。它採用智慧壓縮技術，能在幾乎不影響肉眼畫質的情況下，把檔案再縮一截，而且免安裝外掛、打開網頁就能用，是上傳前的最後一道手動壓縮 [來源：〈TinyPNG Compress WebP, PNG and JPEG images intelligently〉〈https://tinypng.com/〉〈2026〉]。

操作流程很直覺：進到 TinyPNG 網站，把圖片拖曳到上傳區，工具會自動開始壓縮，完成後點 Download 下載。畫面會直接顯示壓縮前後的檔案大小對比，你一眼就能看出省了多少。它同時支援 PNG 和 JPG，一次可以丟好幾張上去批次處理，對內容多的站長來說很省時。如果你常需要處理大量素材，也可以把 TinyPNG 排進 Eagle 素材管理工具的工作流，統一管理再批次壓縮。需要 Icon 或向量素材時，再到 免費 Icon 圖示網站、免費 3D 素材資源補齊。

這裡有一個值得拿出來講的數字。把一張 603KB 的原圖，經過 Photoshop 裁切尺寸、調整品質，再用 TinyPNG 壓一次，最後檔案降到約 56KB，前後差了將近十倍，這也是多數站長實測後常見的縮幅。這代表同一張圖佔用的主機空間與頻寬，只剩原本的不到一成。對一個有幾百篇文章、每篇幾張圖的網站來說，這個差距會把主機負擔壓到完全不同的水位。

處理階段	檔案大小	相對原圖
原始圖片	約 603 KB	100%
Photoshop 裁切與降品質後	約 100 到 150 KB	約 20 到 25%
TinyPNG 再壓縮後	約 56 KB	約 9%

同類的線上壓縮工具還不少，像是 Squoosh、Compressor.io 都能用。如果你在做技術選型，可以參考 圖片壓縮工具實測比較的橫向評測，找出壓縮率與畫質你最滿意的那一個。重點不是工具本身多神奇，而是「你有沒有在上傳前真的做這一步」。老實說，很多人卡在這關，是因為覺得多一道手續很麻煩，但一旦習慣了，前後差別大到你不會想走回頭路。

上傳前的最後檢查：檔案大小與英文檔名

WordPress 上傳圖片前還要注意什麼？兩件事：先檢查檔案大小是不是如預期（確認你上傳的是壓縮後的版本，不是原檔），再把檔名改成英文與關鍵字描述。中文檔名在傳輸過程中可能因為轉碼失敗，導致圖片顯示異常，改英文能從根本避掉這個問題。

為什麼中文檔名會出事？因為瀏覽器與伺服器之間傳輸網址時，非 ASCII 字元要經過 URL 編碼，中文檔名在這一關有機率轉碼失敗，圖片就會掛掉、顯示破圖。這不是 WordPress 本身的 bug，而是整個網路傳輸機制的特性，所以把檔名改成純英文與數字、用連字號分隔，是最保險的做法。

檔名本身也是圖片 SEO 的小小加分項。與其用 IMG_2048.jpg 這種相機預設名，不如改成與圖片內容相關的關鍵字，例如 red-running-shoes.jpg。搜尋引擎會讀檔名當作理解圖片的線索之一，這和圖片 SEO 優化完整做法裡提到的 alt text 是同一套邏輯。命名原則：用小寫英文、單字之間用連字號、不要太長、精準描述內容。

• 上傳前再核對一次檔案大小，確認是壓縮後版本。
• 檔名改成英文小寫、用連字號分隔（如 red-running-shoes.jpg）。
• 避免中文檔名導致轉碼失敗、圖片顯示異常。
• 檔名加入與內容相關的關鍵字，是圖片 SEO 的小加分項。
• 想知道網站整體命名與結構，可讀 網址 SEO 優化。

第 7 步：上傳到 WordPress 並補上替代文字

上傳到媒體庫後，務必填寫替代文字（alt text）與圖片描述，這對 SEO 與無障礙體驗都有實質幫助。之後若想多一道自動壓縮保險，再考慮裝壓縮外掛，但那是錦上添花，不是解藥。

操作分兩種情況。用 Elementor 設計的站長：進到編輯頁面，點你想換的圖片區塊，按「選取圖片」，就會打開媒體庫，把壓好的圖片上傳進去。如果你還不熟這套流程，可以先看 Elementor 完整教學打好基礎。非 Elementor 用戶：直接到後台的媒體庫，選「新增媒體」把圖片上傳，之後編輯文章或頁面時就能選用。整個 WordPress 頁面編輯與圖片上傳的邏輯都圍繞媒體庫運作。

alt text 怎麼寫才對？用一句簡短的文字描述圖片內容就好，不要堆關鍵字、不要複製標題。例如一張紅色跑鞋的圖，alt 可以寫「紅色跑步鞋產品照」，正確寫法是描述內容，像「跑步鞋 跑鞋 紅色 便宜 購買」這種關鍵字堆疊則要避免。alt 的本意是給視障讀者用的螢幕閱讀器，順便讓搜尋引擎理解圖片，所以它要對「人」有意義。這和 站內 SEO 優化攻略、Rank Math SEO 外掛教學與 Rank Math Pro 進階 SEO 功能裡強調的「為使用者寫」是一致的。若你想用外掛幫忙檢查 alt 有沒有漏填，可以參考 WordPress SEO 外掛完整評測；搭配 Google Search Console 實戰技巧還能反查圖片搜尋的曝光狀況。

• Elementor：點圖片區塊 > 選取圖片 > 媒體庫上傳。
• 非 Elementor：後台媒體庫 > 新增媒體上傳。
• alt text 用簡短文字描述內容，別堆關鍵字。
• 想加自動壓縮防線，可參考各款壓縮工具的實測評比。
• 圖片輪播或輪播素材，可搭配 Elementor 圖片輪播功能。

很多人會問：裝了 Smush 還要不要手動壓？要。兩者是不同層次的防線：手動壓縮決定原檔大小，外掛只能在那之上再壓。把手動壓縮當主力、外掛當保險，是最省主機資源的組合。如果你想進一步把外掛設定弄懂，可以看 WordPress 外掛安裝教學的詳細流程。

進階搭配：延遲載入、快取與 WebP 讓速度再上一層

手動壓縮是基礎，再搭配延遲載入、快取外掛與 WebP 轉檔，才能把圖片對速度的影響壓到最低，同時顧到 Core Web Vitals 分數。這三招是圖片優化之上的第二層加速，做完之後整體載入體驗會再升一級。

Lazy Loading（延遲載入）的原理很簡單：讓畫面外的圖片等到使用者滑到才載入，第一屏只載入看得到的圖。這對圖多的長文章、商品列表特別有感，因為它直接砍掉初始載入的圖片數量。WordPress 從 5.4 版起內建原生 lazy loading，多數情況不用再額外裝外掛。想知道完整機制與例外狀況，可讀 Lazy Loading 延遲載入教學。

快取外掛是另一個大項。它把已經產生好的頁面存起來，下次有人來訪就直接送快取版本，省下伺服器重新組裝頁面的負擔。對 WordPress 這種動態產生頁面的系統來說，快取是速度提升 CP 值最高的手段之一。選擇時可以對照 WordPress 快取外掛推薦與 快取 Cache 是什麼，先搞懂原理再挑工具。如果你的主機在國外、想再壓低延遲，還可以加上 CDN 加速網站，把圖片與靜態資源分散到離使用者更近的節點；檔案傳輸量大時，WordPress FTP 檔案上傳與 網站 Sitemap的設定也會連帶受影響。

WebP 與 AVIF 是新一代格式，壓縮率明顯優於 JPG 與 PNG [來源：〈WebP Google Developers〉〈https://developers.google.com/speed/webp〉〈2026〉]。實務上最順的做法是上傳 JPG/PNG 之後，讓外掛或主機自動轉出 WebP 版本，再透過網站速度優化全攻略裡的偵測機制，依瀏覽器支援度送出對應格式。Core Web Vitals 的 LCP 指標常常被首圖拖累，把首圖換成 WebP、再加上前面幾道壓縮，分數通常會直接反映在網站速度測試的報告上。若你的站對行動版體驗要求更高，AMP 加速行動頁面、本機託管字體加速也能進一步降低首次渲染的負擔。

把 LCP 從首圖這裡壓下來，不只是分數好看，還會直接換成業績。第三方案例可以佐證這條鏈路：Vodafone 把 LCP 改善了 31%，銷售額隨之增加 8%。這組數字說明，圖片優化那幾道手續做完之後，LCP 的提升不只是報告上的綠燈，而是會實際回饋到轉換與營收上 [來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。

退一步看整體，圖片優化其實是 網站載入變慢的診斷與解法裡最常見、也最好下手的一塊。很多人卡在「不知道從哪裡開始」，其實順序很單純：先處理圖片（最大宗），再看快取，最後才動主機與程式碼層面。把資源花在報酬率最高的地方，比一味堆外掛有效。這也是為什麼我會把這篇放在整個技術性 SEO 完整指南的起點位置；想再往上下游延伸，可以接著讀 爬取預算優化策略、網站跳出率與 SEO 的關係。

進階手法	作用	是否需要外掛	影響的指標
Lazy Loading	畫面外圖片延後載入	WP 5.4 後原生內建	LCP、總載入時間
快取外掛	減少伺服器重複產生頁面	需要	TTFB、整體速度
WebP 轉檔	檔案再縮一截	需要（或主機端）	頁面總重量、LCP
CDN	縮短資源傳輸距離	需要	延遲、LCP

這裡要承認一個限制：WebP 與 AVIF 的實際壓縮率會因為圖片內容而有差異，色塊單純的圖壓得特別兇，細節複雜的相片壓幅會小一點。所以上面表格講的是「方向」而非「絕對數字」，建議你拿自己網站的圖實測一次，再決定要不要全面轉檔。實測永遠比道聽塗說可靠。

常見問題：圖片優化的 7 個疑問一次答

網站圖片應該壓到多大才合適？

單張圖守住 100KB 以內，首圖或大圖橫幅可略寬到 150 到 200KB。判斷標準是長邊不超過實際顯示寬度的兩倍，再交給 TinyPNG 處理一次。想知道自己網站目前到底慢在哪，先用網站速度測試工具跑一次報告，再回頭對照圖片重量。

圖片壓縮後會失真嗎？

正常壓縮肉眼幾乎無感。智慧壓縮工具會保留視覺上重要的細節，把破壞性處理集中留給人眼不敏感的區域 [來源：〈TinyPNG Compress WebP, PNG and JPEG images intelligently〉〈https://tinypng.com/〉〈2026〉]。除非把品質拉到極端低、或硬把小圖放大檢視，否則在網頁實際顯示尺寸下不會察覺差異。

裝了 Smush 還需要手動壓縮圖片嗎？

需要。兩者不衝突，是不同層次的防線。手動壓縮決定原檔大小，外掛只能在原檔基礎上再壓一次。把手動壓縮當主力、外掛當保險，最省主機資源也最可控。設定細節可看 Smush 圖片壓縮外掛的完整流程。

網站用什麼圖片格式最好？PNG 還是 JPG？

相片用 JPG，透明背景的圖示或 Logo 用 PNG。兩者相容性最高，幾乎所有瀏覽器都支援。WebP 壓縮率更好，但建議上傳 JPG/PNG 後再由外掛轉檔，避免瀏覽器不相容導致破圖。詳細的格式比較可參考各款壓縮工具的實測評比。

去哪裡找可商用的免費圖片？

優先選 CC0 授權的圖庫，例如 Pexels、Unsplash、Pixabay，可免費商用、免標作者 [來源：〈Pexels License〉〈https://www.pexels.com/license/〉〈2026〉]。下載前再確認一次授權標記。需要更多來源與風格選擇，可看商用免費圖庫的總整理。

圖片替代文字怎麼寫對 SEO 有幫助？

用一句簡短文字描述圖片內容，不要堆關鍵字。alt 的本意是給視障讀者的螢幕閱讀器用，所以要先對人有意義，搜尋引擎的理解是附帶效果。這與圖片 SEO 優化和站內 SEO 的原則一致。

WordPress 網站圖片太多導致載入慢怎麼辦？

分三層處理：先把舊圖批次手動壓縮、換成正確尺寸；再開啟 Lazy Loading 讓畫面外圖片延後載入；最後加上快取外掛與 CDN。診斷流程可參考網站載入變慢的診斷方法，搭配網站速度優化全攻略一起做。

首圖 LCP 一直降不下來，問題出在哪裡？

LCP 元素八成就是首圖，排查順序是：先確認首圖已壓縮並轉成 WebP，再檢查它有沒有被設為優先載入，接著看快取外掛或延遲載入有沒有誤把首屏圖一起延後。首圖在 DOM 裡的位置越早出現，瀏覽器越能提早開始下載，這比任何壓縮都更直接影響 LCP。實務上把首圖獨立處理，是 Core Web Vitals 從紅轉綠最快的路徑之一。

舊網站累積了幾百張未壓縮的圖，要怎麼回頭補救？

不必一張一張手動重壓。先用壓縮外掛批次掃描媒體庫，把所有舊圖自動壓縮與轉檔一次；接著評估是否需要重新產生縮圖，讓響應式 srcset 套用新的尺寸。若是早期上傳的圖明顯過大，可以針對體積排行前 10% 的大檔單獨手動處理，因為少數超大檔往往佔了整體頻寬的大宗，集中處理這一批回報最快。補救完之後，務必清空快取並用測速工具驗證改善幅度。

WebP 和 AVIF 到底該選哪一個？

以壓縮率來看 AVIF 略勝 WebP，但相容性仍是 WebP 較成熟，工具鏈支援也更完整。穩健做法是先用 WebP 當主力轉檔格式，等佈景主題與外掛對 AVIF 的支援更普及，再逐步加入 AVIF 版本，並透過 picture 標籤讓瀏覽器自行挑選。對多數 WordPress 站長而言，先把 WebP 做扎實，效益與穩定度都最高。

講了這麼多，圖片優化的核心其實只有一句話：在上傳前把尺寸、格式、檔名三件事做對，剩下的交給外掛當保險就好。這套流程也適用任何內容管理系統，不局限於 WordPress。如果你正在規劃新站，建議從 WordPress 架站新手教學、30 分鐘快速架好 WordPress、WordPress 架站真實成本分析開始，把圖片優化排進標準作業流程，一開始就做對，比之後補救輕鬆太多。日常寫作時，把圖片上傳與 WordPress 文章發佈與寫作流程、WordPress 部落格架站教學綁成同一套 SOP，就不會漏掉任何一張圖。後續若要做更全面的 SEO，可接著讀 WordPress 架站與 SEO 全攻略、5 個常見 SEO 優化地雷、自架網站常見設計錯誤，把整體策略串起來。需要分享到社群時，也別忘了補上 OG 標籤與社群分享圖片設定，讓縮圖與標題在 Facebook、LINE 上呈現得更專業。

把這套流程放進日常營運，還能進一步和其他環節串起來。舉例來說，當你習慣在上傳前把每張圖壓到 100KB 以內，WordPress 後台總覽裡的媒體庫就不會被巨型檔案塞爆，區塊小工具與 Astra Pro 主題的圖片欄位載入也會輕快許多。對一個長期經營、文章數持續累積的網站來說，主機空間、備份時間、流量成本都會被這個小習慣慢慢省下來。先把這七步走順，效益遠勝於花大量時間比較哪一款外掛最強，畢竟外掛只是錦上添花。若你的內容偏長、需要目錄導覽，還可以搭配 WordPress 目錄外掛，把讀者留在頁面更久，讓前面的速度優化轉化成實際的停留時間。

還有一個容易被忽略的角度：圖片優化不是一次性的工程，而是一段持續校正的過程。你今天設的「長邊 2000 像素、品質 8」基準，過半年可能因為換了佈景主題、或導入更大尺寸的首圖橫幅而需要調整。比較務實的做法是定期跑一次速度測試，回頭檢視舊文章的圖片有沒有太肥，再決定要不要批次重新壓縮。把這個檢查排進每月的網站健檢，和 Google Search Console 的資料一起看，圖片搜尋帶來的流量、LCP 分數、跳出率之間的連動關係會慢慢浮現；想掌握 AI 搜尋時代的新曝光管道，還可以研究 Google AI Overview 與 SEO的運作邏輯。把它做扎實，後續不管繼續攻 Core Web Vitals、還是往內容與連結策略推進，都會站在一個穩固的起點上。