WebP、JPG、PNG 圖片格式深度比較：選對格式同時提升畫質與網站速度
WebP、JPG、PNG 三種格式的差別落在「壓縮技術」與「使用情境」的組合上，與畫質絕對高低沒有直接關係。WebP 由 Google 開發，用最小檔案換可接受畫質，適合上網；JP…
WebP JPG PNG 差異：一張表看懂三種格式怎麼選
WebP、JPG、PNG 三種格式的差別落在「壓縮技術」與「使用情境」的組合上，與畫質絕對高低沒有直接關係。WebP 由 Google 開發，用最小檔案換可接受畫質，適合上網；JPG 用失真壓縮塞最多細節，適合照片；PNG 用無損壓縮換透明背景與銳利邊緣，適合圖示。一句話決策：要快選 WebP，要照片選 JPG，要透明背景選 PNG。Google 官方公布 WebP 在同等畫質下平均可比 JPG 小 25 到 35% [來源：Google 〈WebP〉 https://developers.google.com/speed/webp 2026]。選錯格式，再貴的主機也救不回載入速度與排名。
圖片格式看似是技術細節，卻直接牽動 網站速度優化全攻略 裡最關鍵的檔案大小，連帶影響使用者停留與搜尋排名，也會回頭考驗 虛擬主機類型比較 與主機空間是否夠用。
| 比較維度 | WebP | JPG / JPEG | PNG |
|---|---|---|---|
| 壓縮方式 | 失真＋無損兩種 | 失真 | 無損 |
| 檔案大小相對排序 | 最小 | 中等 | 最大 |
| 透明背景 | 支援（2011 年起） | 不支援 | 支援（Alpha 色版） |
| 動畫 | 支援 | 不支援 | 不支援（另有 APNG） |
| 色彩模式 | RGB | RGB | 僅 RGB，不支援 CMYK |
| 瀏覽器支援度（2026） | 主流全支援 [來源：Can I use 〈WebP image format〉 https://caniuse.com/webp 2026] | 全部支援 | 全部支援 |
| 典型用途 | 網頁、Hero、商品圖 | 攝影作品、人物風景 | Logo、Icon、插圖、UI 元素 |
這張表只回答「三者差在哪」，但真正該問的其實是「這張圖要在哪裡被誰載入」。常見的實務陷阱是站長把所有圖全面換成 WebP，結果主機空間反而變大，因為同時留了 JPG 原檔與轉檔後的 WebP 各一份。說到底，格式是按情境混用的工程問題，把它當單選題反而會製造新的成本。
WebP：用最小檔案換可接受畫質的現代格式
WebP 是 Google 為了加快網頁載入而開發的現代圖片格式，能在接近相同畫質下把檔案壓得比 JPG 與 PNG 都小，是追求網站速度時的主流選擇。但它不是完美無缺，部分舊版影像編輯軟體與少數平台仍不支援，實務上常需同時保留原檔，會多佔主機空間。
WebP 最大的特色是同時支援失真與無損兩種壓縮模式，彈性比 JPG 與 PNG 都高。失真模式用來壓照片、換取更小檔案；無損模式則用在需要保留細節的圖檔。它在 2011 年新增了透明背景功能 [來源：Google 〈WebP〉 https://developers.google.com/speed/webp 2026]，也能取代 GIF 做動畫，而且檔案通常小得多。這代表一種格式就能同時吃下 PNG 與 GIF 的部分用途，這是 JPG 完全做不到的事。
失真 WebP 與無損 WebP 的差別值得拆開來看，因為兩者背後的演算法與適用場景完全不同。失真 WebP 採用預測編碼，會把人眼較不敏感的高頻細節犧牲掉，換來大幅縮小的檔案，這跟 JPG 的思路接近但效率更高，適合放在網頁上的攝影照片、商品主圖、Hero 大圖。無損 WebP 則保留每一個像素的原始資訊，體積比失真版大上好幾倍，但對於需要精確重現邊緣與文字的圖示、含有大量純色區塊的插圖，能以更小的體積取代 PNG。把同一張複雜照片存成無損 WebP 是常見的誤用，結果檔案反而比失真版大很多，卻沒有肉眼可見的畫質提升。
目前 Chrome、Safari、Microsoft Edge、Firefox 等主流瀏覽器都已原生支援 WebP [來源：Can I use 〈WebP image format〉 https://caniuse.com/webp 2026]。換句話說，2026 年的今天，舊裝置相容性已經不再是主要顧慮，多數站長真正該煩惱的反而是「怎麼批次轉、要不要留原檔」。如果你還在猶豫要不要換，可以先看 網站速度測試工具比較 量一下首頁載入時間，再決定是否值得動工。
這裡要講一個容易被忽略的實務代價。主機端通常建議 JPG 原檔與轉檔後的 WebP 各留一份：日後要重新編輯或換格式時得回頭找原檔，而且部分 WordPress 佈景主題推薦 與外掛仍以 JPG 為主要縮圖來源。於是空間成本跟著上升，量大時尤其有感。務實的做法是高用量內容網站才全面上 WebP，少量頁面維持 JPG，這比一刀切全部轉檔合理得多。WebP 真正發揮價值是搭配 Lazy Loading 延遲載入教學 與快取機制，對 Core Web Vitals 核心指標解析 裡的 LCP 改善最明顯。
JPG／JPEG：照片格式的長青王者
JPG 是失真壓縮的照片專用格式，能在保留大量色彩與細節的同時把檔案壓小，幾乎所有瀏覽器、相機、修圖軟體都支援，是攝影與社群分享的事實標準。它的代價是不支援透明背景，而且重複編輯存檔會持續損失畫質。
JPG 由聯合圖像專家小組（Joint Photographic Experts Group）制定，副檔名.jpg 與.jpeg 通用，兩者是完全相同的格式。會有兩種名稱純粹是早期 DOS 系統限制副檔名只能用三個字元，今日這個限制早已消失，兩種寫法都通用。很多人問「JPG 與 JPEG 差別在哪」，答案就是：沒有差別。
JPG 採用失真壓縮，這是一把雙面刃。壓越兇檔案越小，但細節流失也越明顯，而且每次重新存檔都會再損失一次畫質，不適合反覆編輯。攝影師的工作流程多半是從 RAW 檔拍攝、最終以 JPG 輸出上傳，這是業界慣例，因為 RAW 保留最多資訊用於後製，JPG 則兼顧大小與相容性。純粹放網頁、沒有透明背景需求時，JPG 因為相容性最高仍是安全牌，這點對 免費商用圖庫網站 下載的素材尤其成立。
JPG 不支援透明背景與動畫，這是相對 WebP 與 PNG 的硬傷。Logo 需要疊在彩色背景上、或要做去背商品圖，JPG 直接出局。但反過來說，只要圖是「一張完整的照片、要放到內容裡」，JPG 幾乎沒有對手，它的色彩層次與細節密度比同檔案的 WebP 更穩定，這也是為什麼攝影作品集到現在還是以 JPG 為主力。要把這些照片展示得好看，網頁設計完整入門指南 與 RWD 響應式網頁設計 的排版觀念會派上用場。
挑選 JPG 的壓縮品質時，常見的判斷依據是「看得到瑕疵的最後一級」。多數照片在品質 75 到 85 之間就能達到肉眼難以察覺失真的甜蜜點，繼續拉到 95 或 100 檔案會膨脹數倍，卻換不到對應的視覺收益。把壓縮品質調到最高並不等於最好，因為高品質 JPG 的體積逼近無損 PNG，卻仍背負失真格式的先天限制。對於膚色、漸層天空這類容易出現色階斷層的題材，建議保留較高的品質設定；對於細節豐富、本身就充滿雜訊的場景，例如樹葉、岩石、人群，中等品質已經足夠，肉眼幾乎分辨不出差異。
JPG 的漸進式編碼（progressive JPEG）是另一個常被忽略的最佳化點。標準 JPG 從上到下逐行載入，網頁剛開啟時會看到一塊空白再慢慢填滿；漸進式 JPG 則先送出低解析度的整張模糊影像，再逐步補上細節，使用者能在第一瞬間就掌握圖片的整體樣貌，感受上的等待時間大幅縮短。多數壓縮工具與 WordPress 外掛都能一鍵轉成漸進式，額外成本幾乎為零，這個細節與 WordPress 圖片優化完整流程 裡的「上傳即最佳化」觀念可以疊加使用。
PNG：透明背景與銳利邊緣的首選
PNG 是無損壓縮的點陣圖格式，最大優勢是支援透明背景、能保留 1,600 萬色與銳利邊緣，因此成為圖示、Logo、插圖的主力格式。但因為不犧牲畫質，檔案通常明顯比 JPG 與 WebP 大，不適合大量放照片。
PNG 在 1995 年推出，原本取名 PING，之後縮短為 PNG。它採用無損壓縮，意思是圖片在存成 PNG 時不會失去任何細節，可以保存與原始檔一致的品質。對設計師來說這很重要，因為 Logo 與 UI 元素邊緣只要糊一點點就會被看出來。PNG 支援 Alpha 色版做透明背景，也具備處理 1,600 萬種色彩的能力，這讓它在需要疊圖、去背的場景裡幾乎沒有替代品。如果你常需要 AI 去背工具實測比較 處理後的素材，最終多半也會存成 PNG，而素材的整理可以交給 Eagle 素材管理工具評測 來分類。涉及 網站 Logo 設計與配色 時，PNG 的透明特性更是不可或缺。
為什麼 PNG 檔案特別大？因為它不犧牲畫質。同一張照片存成 PNG 可能是 JPG 的五到十倍大，這對大量放圖的網站來說是災難。圖片上傳網站前務必先用 免費圖片壓縮工具推薦 壓過，否則頻寬與主機空間會被吃光。
還有一個常被忽略的限制：PNG 只支援 RGB、不支援 CMYK 色彩模式，無法直接用於印刷輸出，得改存 JPG 或其他支援 CMYK 的格式，可對照 RGB 與 CMYK 色彩模式差異 來理解為什麼螢幕與印刷的色彩處理是兩套邏輯。PNG 也不支援動畫，要做動態圖得改用 APNG 或 WebP。
PNG 旗下還有兩個變體值得認識：PNG-8 與 PNG-24。PNG-8 最多只記錄 256 色，搭配索引色盤運作，對顏色單純的 Icon、線稿、扁平插圖已經綽綽有餘，檔案體積比 PNG-24 小非常多。PNG-24 則能記錄完整的 1,600 萬色與 8 位元 Alpha 色版，適合需要細緻半透明漸層的素材，例如帶有柔邊陰影的浮水印、毛玻璃 UI 元件。把只有幾個純色的 Logo 存成 PNG-24 是常見的浪費，這類圖檔存成 PNG-8 或直接交給 WebP 處理會更省空間。判斷標準很直觀：圖裡的色彩數量少、邊緣銳利、不需要半透明柔邊，就選 PNG-8；色彩豐富或需要柔順的透明漸層，才用 PNG-24。
依情境分配三種格式：實務選擇的取捨順序
按情境決定格式，比記住「哪個最好」更實用。與其糾結哪個格式最強，不如依序確認三件事：這張圖要不要透明背景、要不要動態、是不是照片。三個條件逐一過濾完，答案通常就會浮現，這比把所有圖無腦換成同一種格式穩當得多。圖片類型本來就會混雜，尤其在經營 WordPress 部落格架站教學 或 WooCommerce 購物網站架設 時更是如此。
- 追求最快載入、圖量大的內容網站 → 優先 WebP（並保留 JPG 原檔），首頁 Hero、商品列表圖、文章配圖都適合，搭配 CDN 網站加速原理 效果加倍。
- 純照片展示、攝影作品集 → JPG，相容性與細節最佳，色彩過渡最自然。
- Logo、Icon、需要去背的素材 → PNG 無損加透明，邊緣銳利不糊。
- 簡單動畫 → WebP 取代 GIF，檔案更小，載入更快。
盲目把所有圖統一存成 WebP 並不划算。主機端通常得同時保留 JPG 原檔與轉檔後的 WebP 各一份，空間成本會跟著上升。務實的做法是，針對「會被大量載入、且對 LCP 有直接影響」的圖才上 WebP，例如首頁 Hero 與商品主圖；至於內文裡那種一篇文章才出現一次的配圖，JPG 就夠了，轉檔的工與空間都不划算。這個取捨順序在 網站載入太慢的診斷與解法 裡也能找到對應邏輯。
附帶一提，如果你做的是 餐飲品牌網站設計教學 或 3C 產品購物網站架設，商品圖通常需要去背加大量展示，這時 PNG 原檔、JPG 預覽、WebP 上線三種並存是業界常見做法，不要被「只選一種」的說法綁住。挑 電商平台完整比較 時也要留意它對 WebP 的原生支援程度。
二維決策矩陣：用檔案大小與透明需求鎖定格式
「該選哪一種格式」這個問題，本質上是一個二維的取捨。把兩個最關鍵的變數擺成座標軸：橫軸是「這張圖需不需要透明背景或半透明柔邊」，縱軸是「能不能接受失真壓縮換取更小檔案」。四個象限各自對應一個明確的格式選擇，比死背規則更不容易出錯。
| 可接受失真壓縮（求小檔） | 必須無損（求細節） | |
|---|---|---|
| 需要透明背景 | 失真 WebP（支援透明，檔案最小） | 無損 WebP 或 PNG-24（保留半透明柔邊） |
| 不需要透明背景 | JPG 或失真 WebP（照片類首選） | 無損 WebP（取代過大的 PNG 存照片） |
把這個矩陣套到實際素材上，判斷會變快很多。一張去背商品照落在「需要透明背景、可接受失真」象限，答案是失真 WebP；同一張商品照若要保留極致細節放在高階品牌站，就移到「需要透明背景、必須無損」象限，答案是無損 WebP 或 PNG-24。一張風景照落在「不需要透明、可接受失真」象限，JPG 與失真 WebP 都成立，再依主機空間與編輯流程二選一。把每張圖在心裡過一次這個矩陣，比記住一堆零散規則更能避免選錯格式。
以一個月流量約數萬到十來萬頁次的內容站為例，常見的狀況是首頁同時擺了一張 Hero 大圖、商品列表縮圖，以及文章內的配圖，三類圖各自落在不同象限。這類站點最常遇到的麻煩，是把全部圖一次轉成失真 WebP，卻發現主機空間反而變大，原因是 JPG 原檔與轉檔後的 WebP 同時各留一份，而且有些用 PNG 存的去背素材也被強制轉成 WebP，邊緣出現光暈。依這類站的典型表現幅度，未壓縮的 PNG Hero 圖大小常落在約 2 到 4 MB，轉成失真 WebP 後通常可縮到約 200 到 600 KB；首頁 LCP 在換圖前若約落在 3 到 5 秒，換圖後多數能往 2 到 3 秒靠近，但前提是這張圖真的是被瀏覽器判定為最大內容元素，否則換了也看不到效果。一個務實的取捨順序是：先只對首頁 Hero 與商品主圖做失真 WebP，文章配圖沿用 JPG，Logo 與需要去背的 Icon 維持 PNG，三類圖分開處理，比全面轉檔更省事，也更不容易踩到「轉完才發現主機空間反而吃緊」的雷。依這類站的常見素材結構，Hero 大圖與商品主圖通常佔整站圖片流量的大頭，卻只佔圖檔總數的一小部分，把轉檔工先投在這一成不到的圖上，往往就能拿下 LCP 改善的大部分效益；而文章配圖雖然張數多，但單張被載入次數有限，沿用 JPG 對總體速度的拖累其實有限。若站點已套用 CDN，還可進一步在邊緣節點做格式協商，讓支援 AVIF 或 WebP 的瀏覽器自動拿到對應版本，回退到 JPG 給舊裝置，這套機制能把矩陣裡「同一張圖在不同象限」的判斷交給伺服器端自動完成，省下手動維護多版本的負擔。這個範圍是依公開工具與典型內容站的普遍表現推估，實際數字仍會因圖片複雜度、壓縮參數與主機設定而不同，不該當成固定值。
WebP 不適用的場景：印刷、舊軟體與電子報
WebP 雖然是 2026 年網頁圖片的主流選擇，但它並非萬用解。它的價值來自「被大量載入時省下的頻寬與速度」，當一張圖既不會被大量載入、又會在 WebP 不擅長的環境裡使用，硬轉檔只會增加複雜度。以下幾種情況保留原本的格式會更穩當。
- 要送印刷或專業後製的素材：印刷端普遍只吃 JPG、TIFF、PDF，WebP 在專業印刷工作流程裡支援度仍不足。把素材轉成 WebP 再送印，往往得再轉回 JPG，等於繞一圈又回到起點，還可能因為多次轉檔而損失畫質。
- 需要在舊版影像編輯軟體反覆開啟的素材：少數老舊版本的 Photoshop、Illustrator 或企業內部工具不認得 WebP，開檔時會報錯或要求外掛。這類素材保留 JPG 或 PNG 原檔，能避免協作流程中斷。
- 要透過 EDM 電子報寄出的圖片：多數郵件客戶端對 WebP 的支援仍不完整，部分收件者會看到破圖。電子報內的圖片維持 JPG 或 PNG，相容性最保險。
- 極少量、載入頻率極低的頁面：一個月只有幾十次瀏覽的關於頁面，把裡頭僅有的一兩張配圖轉成 WebP，省下的頻寬微乎其微，卻得額外維護一份原檔與轉檔流程，投入產出不成比例。
進階技巧：用 picture 標籤與 srcset 兼顧新舊裝置
真正追求零死角的網站，會進一步用 HTML 的 picture 標籤做格式回退（fallback）。原理是瀏覽器依序讀取 source 標籤，遇到自己支援的格式就採用，支援度較高的優先放前面，最後用一個 img 標籤收尾作為所有瀏覽器都能讀的保險。常見的寫法是先放 AVIF、再放 WebP、最後放 JPG，讓新裝置吃到最先進的格式、舊裝置退回 JPG 也能正常顯示，整張圖永遠不會破。
搭配 srcset 與 sizes 屬性，還能做到響應式圖片：同一張圖準備多個解析度版本，瀏覽器根據螢幕寬度與裝置像素比自動挑選最合適的那一份下載。手機載小圖、桌機載大圖，頻寬不浪費，畫質不打折。這套機制跟 RWD 響應式網頁設計 的斷點觀念一致，對行動裝置流量特別有感。Statista 資料顯示，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]，超過半數的訪客來自手機，圖片響應式與格式回退已經是基本盤，不是進階選項。
實作上有一個常見錯誤值得避開：只放一個 picture 卻忘記在最後的 img 標籤寫 alt 文字與寬高屬性。搜尋引擎與螢幕閱讀器實際讀的是 img 標籤，source 只是給瀏覽器選格式用的。少了 alt 會傷圖片 SEO 與無障礙，少了寬高屬性會讓版面在圖片載入時跳動，拖累 CLS（累計版面位移）這項 Core Web Vitals 指標。把 alt、width、height 三個屬性補齊，是 picture 標籤能否真正發揮價值的關鍵細節，可對照 圖片 SEO 優化指南 的完整檢查清單。
AVIF 與 HEIC：下一代格式的現況與定位
WebP 之外，近年討論度最高的兩個現代格式是 AVIF 與 HEIC。AVIF 建立在 AV1 影片編碼技術上，壓縮率比 WebP 更高，對 HDR、寬色域、電影感的細節保留能力也更強，是新世代圖片格式的領跑者。HEIC 則由蘋果主推，iPhone 預設拍出的照片就是 HEIC，檔案比同等畫質的 JPG 小很多，但它的專利授權相對封閉，在網頁環境的支援度遠不如 AVIF 與 WebP。
對一般站長來說，AVIF 目前卡在三個現實限制。第一是編碼時間長，同一張圖轉 AVIF 比 WebP 慢好幾倍，量大時的轉檔成本會浮現。第二是部分伺服器與外掛還沒原生支援 AVIF 輸出，要在 WordPress 上線 AVIF 通常得自己改 MIME 型別設定，否則上傳會被擋下。第三是少數舊瀏覽器與編輯軟體仍讀不動 AVIF，需要搭配 picture 標籤做回退。短期內務實的做法是 AVIF 放在 picture 標籤的第一順位當前鋒，WebP 與 JPG 接在後面當保險，讓支援的裝置吃到更好的壓縮率、不支援的裝置也不會破圖。
HEIC 在網頁端的角色更邊緣。它的優勢幾乎只限於蘋果生態系內部的儲存與傳輸，到了網頁這個開放環境，相容性遠不如 AVIF 與 WebP。實務上幾乎沒有站長會把圖片上線格式選成 HEIC，多半是在 iPhone 拍完照、素材還在本地階段時維持 HEIC，等要進網站前再統一轉成 JPG 或 WebP。把 HEIC 留給裝置端儲存、把 AVIF 與 WebP 留給網頁端展示，是目前最合理的分工。
免費圖片轉檔工具：PNG 轉 JPG、JPG 轉 WebP 一次搞定
要批次把 PNG 轉 JPG、或把 JPG 轉 WebP，現有多款免費線上工具能拖曳即轉、支援雲端上傳與批次處理。小量用瀏覽器工具即可，量大或要進 WordPress 再考慮批次外掛或桌面軟體。
選工具時可以看三件事：支不支援 WebP、能不能批次、單次或每日上限多少。這幾款是各有明確定位的選擇，數字以各工具官網公告為準，避免日後過時。如果你之後想全站自動化，WordPress 圖片優化完整流程、WP Rocket 速度優化設定 與 必裝 WordPress 外掛清單 都有結合轉檔外掛的做法。
| 工具 | 支援格式 | 批次上限 | 特色 |
|---|---|---|---|
| Shutterstock Converter | JPG、PNG、TIFF（不支援 WebP） | 單張拖曳 | 不到一秒轉完，免費 |
| PicWish | WebP、PNG、JPEG、HEIC 轉 JPG | App 可批次 | 一鍵轉 JPG，去背強項 |
| MyEdit | JPG、PNG、GIF、WebP、BMP 互轉 | 單次最多 30 張 | 同時有 AI 編輯功能 |
| FreeConvert | 支援 WebP，格式最廣 | 免費版每日 25 張 | 可從 URL、Google 雲端、Dropbox 匯入 |
| iLoveIMG | 多格式轉 JPG，JPG 也能轉 PNG／GIF | 免費單次 30 張，付費上百張 | 支援雲端上傳 |
幾個使用提醒。Shutterstock Converter 雖然快，但目前不支援 WebP，要轉現代格式得換 FreeConvert 或 iLoveIMG。PicWish 只能輸出 JPG，方向是單向的，如果你的目標是批次產 WebP 給網站用，它反而不是首選。MyEdit 勝在單次能處理 30 張、又支援 WebP 互轉，對中等數量的批次需求最均衡，WordPress 架站新手教學 完成後的站長多半會選它。轉檔只是技術動作，真正的考驗在於格式選擇能不能配合整體內容策略，這時 SEO 排名攻略學的產業分析方法 能幫你把格式決策接回流量目標。各工具的批次上限與每日張數以官網公告為準，付費方案與免費方案的落差也值得先查清楚再決定要不要升級。
如果量大到要全站自動轉，會建議直接走 WordPress 外掛路線。例如搭配 WordPress 快取外掛推薦 與壓縮外掛，能在圖片上傳時自動產生 WebP 版本，省下手動批次轉檔的工。這對 部落格從主機到主題設定 完成後、開始大量寫文的站長特別有用，搭配 Astra Pro 主題完整教學 這類輕量主題整體效果更穩定。
圖片格式如何透過載入速度影響 SEO
圖片格式本身不是直接的 Google 排名因素，但它決定檔案大小，檔案大小直接影響載入速度，而載入速度是 Core Web Vitals 與排名的明確訊號 [來源：web.dev 〈Vitals〉 https://web.dev/articles/vitals 2026]。選對格式是透過「更快的網站」間接拉升 SEO 與使用者體驗，這條因果鏈才是重點，也是 品牌形象網站設計全攻略 在做技術評估時繞不開的一環，背後的基礎指標可對照 網頁速度 Page speed 到底是什麼。
Core Web Vitals 裡的 LCP（最大內容繪製）經常被首頁大圖拖慢 [來源：web.dev 〈Optimize LCP〉 https://web.dev/articles/lcp 2026]。一張未壓縮的 PNG Hero 圖動輒 2、3 MB，載入時間直接墊高 LCP 數值，而把這張圖換成 WebP 通常能再壓掉三成以上大小 [來源：Google 〈WebP〉 https://developers.google.com/speed/webp 2026]，這是最直接的解法。延遲載入、WebP、壓縮這三件套是公認的圖片優化組合，可對照 圖片 SEO 優化指南 與 技術性 SEO 完整指南。
Google 對網頁體驗訊號的看重是有公開時間軸的。2020 年 5 月 Google 宣布將 Core Web Vitals 與既有訊號（行動裝置相容性、HTTPS、侵入式插頁廣告）整合成新的網頁體驗排名訊號 [來源：Google Search Central Blog 〈Evaluating page experience〉 https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]，並於 2021 年 5 月正式納入排名。到了 2023 年 10 月，Google 宣告行動優先索引（mobile-first indexing）全面完成，所有能在行動裝置運作的網站都改由行動版檢索器優先檢索 [來源：Google Search Central Blog 〈Mobile-first indexing is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]。這兩個里程碑加起來的意思是：行動版的圖片格式、檔案大小、載入速度，現在直接影響整站的檢索與排名，再也不是桌機版本的附屬品。把首頁 Hero 圖換成 WebP 這種動作，回頭看就是在回應這條已經落地五年的排名訊號。
把圖片格式調整與 Core Web Vitals 改善串接起來，效益會一路傳導到實際營收，這不是推論而是有公開案例佐證。Vodafone 把 LCP 改善 31% 後，銷售額提升了 8% [來源：web.dev 〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]；同份資料也記錄 Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13% [來源：web.dev 〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。換句話說，前面提到的「換 WebP 壓掉三成大小」這類格式層面的動作，最終會在 LCP 與營收上反映，這也是把圖片格式當成 SEO 與營運課題而非單純技術選擇的原因。
但也要提醒一件事：不要為了追求極小檔而過度壓縮。壓過頭會讓畫質崩壞、出現色塊與雜訊，反而傷使用者體驗與信任感，使用者看了一眼就跳出，排名反而往下掉。實務做法是先用 WordPress 網站加速外掛實測 量出基準，再逐張調整壓縮參數，找到「檔案小但肉眼幾乎看不出差異」的甜蜜點，這比一刀切設成最高壓縮率安全得多，搭配 排版設計實戰技巧 與 色彩學配色技巧指南 一起檢視，較容易抓到畫質與檔案的平衡。
圖片 SEO 還包含檔名、alt 文字、結構化資料，格式只是其中一環。一份完整的 站內 SEO 優化攻略 不會只看格式，但格式選錯會讓其他努力事倍功半，WordPress 自架網站費用 也會因為頻寬與空間吃緊而墊高。PNG 過大會吃主機空間與頻寬，長期拖累整站速度，這也是照片不該用 PNG 存的根本原因。
圖片格式疑難排解：六個常見問題的判斷與修復
實際操作中，格式相關的問題往往不是出在「選錯」，而是出在「轉檔後看起來怪怪的」。下面六個是高頻出現的疑難情境，附上判斷方向與修復步驟，省下逐一試錯的時間。
- 轉成 WebP 後照片邊緣出現光暈或色塊：通常是失真壓縮品質設太低，或是原圖帶有複雜的漸層背景被過度簡化。把 WebP 壓縮品質往上一級調，再比較轉檔前後的局部放大圖，找到肉眼可接受的最低設定即可。
- PNG 透明背景在網頁上變成黑色或白色底：多數是上傳時被轉檔工具或外掛強制填了背景色。檢查轉檔設定裡是否勾選「保留透明」，或改用支援 Alpha 色版的工具重新輸出。
- WebP 在舊版手機瀏覽器顯示破圖：這是格式回退沒做完整。改用 picture 標籤，把 WebP 放在 source、JPG 放在最後的 img，舊裝置會自動退回 JPG。
- 同一張 JPG 重新存檔後越來越糊：失真格式的世代流失（generation loss）。把原檔固定保留在 RAW 或無損版本，每次需要 JPG 時都從原檔重新輸出，避免對 JPG 反覆編輯。
- WordPress 上傳 WebP 被擋下或顯示不允許的檔案類型：伺服器或外掛尚未把 WebP 加入允許的 MIME 型別。在伺服器設定或外掛選項裡加入 image/webp 即可，部分主機商也提供一鍵開啟的選項。
- 圖片已經換成 WebP，LCP 仍沒改善：檢查這張圖是不是真的被當成首頁最大內容元素。有時 LCP 元素其實是文字區塊或另一張沒最佳化的背景圖，換錯圖自然看不到效果。用 網站速度測試工具比較 指認真正的 LCP 元素再對症下藥。
圖片格式上線前檢查清單
把上面的判斷邏輯收斂成一張可逐項打勾的檢查清單，在每張圖上線前快速過一遍，能避免大多數的格式相關事故。這張清單按照「先確認用途、再確認技術」的順序排列，前面幾項沒過就不必往後做。
- 確認這張圖的主要展示環境：網頁、電子報、還是印刷？網頁以外通常不用 WebP。
- 確認需不需要透明背景或半透明柔邊：需要就排除 JPG。
- 確認是不是照片類：照片優先失真壓縮，圖示類優先無損。
- 確認檔案大小是否在合理範圍：首頁 Hero 建議壓到能接受的最小體積，內文配圖可放寬。
- 確認有沒有寫 alt 文字與寬高屬性：影響圖片 SEO 與 CLS。
- 確認有沒有做格式回退：重要頁面的 WebP 建議搭配 picture 標籤退回 JPG。
- 確認有沒有保留可重新編輯的原檔：避免未來要改格式時找不到來源。
常見問題：格式選擇的快速解答
以下是實務上反覆被問到的幾題，已剔除本文正文詳述過的基礎差異，只留下需要快速判斷的情境題；若你正在處理 Logo 或品牌視覺，免費 Logo 設計工具 與 品牌色彩挑選指南 可搭配 PNG 章節一起看。
經營部落格該用哪種圖檔格式？
圖多追求速度選 WebP，少量照片用 JPG，圖示與 Logo 用 PNG。多數部落格三者混用最務實，WordPress 架站全攻略 完成後即可開始套用。
攝影師作品網站適合用哪種格式？
以 JPG 為主力，相容性與細節最佳。需要無損保留局部細節或透明素材時，再局部搭配 PNG，Astra 作品集教學 也採用相同策略。
圖片格式會影響 Google 排名嗎？
間接會。格式決定檔案大小，檔案大小影響載入速度，載入速度是 Core Web Vitals 的明確訊號 [來源：web.dev 〈Vitals〉 https://web.dev/articles/vitals 2026]，詳見 WordPress SEO 外掛完整評測。
怎麼把 PNG 批次轉成 JPG 或 WebP？
小量用 MyEdit、FreeConvert、iLoveIMG 等線上工具批次轉；量大或要進 WordPress，改用壓縮外掛在上傳時自動產 WebP 版本。
AVIF 會取代 WebP 嗎？
AVIF 壓縮率比 WebP 更高，但編輯軟體與轉檔工具支援度仍跟不上 WebP。短期內兩者會並存，AVIF 尚未全面取代，建議以 WebP 為主、AVIF 為輔。
回到最核心的一句話：WebP、JPG、PNG 的真正差別落在「壓縮技術 × 使用情境」的組合上，與畫質絕對高低沒有直接關係。要快選 WebP，要照片選 JPG，要透明背景選 PNG，混用才是實務常態。真正值得花時間的是把「這張圖要在哪裡被誰載入」當成每次選格式時的第一個檢查項；後續若要延伸到 中文字體設計與挑選、英文字體推薦下載 與 Logo 標準字設計技巧，這套按情境選格式的思維一樣適用。