【WebP JPG PNG】圖片格式完整比較｜5 步決策樹選對格式加速網站

WebP 是 Google 開發的新一代圖片格式，同畫質下比 JPG 小 25–34%、比 PNG 小 26%，已成為網站速度優化的首選格式。這篇文章用對照表、決策樹和實測數據，幫你搞懂 WebP、JPG、PNG 的差異，並推薦最實用的轉換工具與主機端自動優化方案。

WebP、JPG、PNG 三種格式快速對照表

在深入每種格式之前，先用一張表讓你掌握全局。我們團隊在測試多個網站的圖片優化方案時，整理出以下核心差異：

一句話總結每種格式的定位：

• WebP：網站圖片的最佳選擇，兼顧畫質與檔案大小
• JPG：攝影和印刷領域的老將，相容性最廣
• PNG：需要透明背景時的不二選擇

Google 的 Core Web Vitals 把 LCP（最大內容繪製）列為排名因素之一，而圖片往往是頁面上最大的元素。選對格式，直接影響你的網站速度和搜尋排名。

WebP 是什麼？為什麼 Google 要發明它？

WebP 是 Google 在 2010 年發布的圖片格式，基於 VP8 視訊壓縮技術開發。Google 的目標很明確：讓網頁圖片更小、載入更快，同時維持肉眼幾乎無法分辨的畫質。

WebP 最強大的地方在於它「什麼都支援」：

• 有損壓縮（lossy）：像 JPG 一樣壓縮照片，但同畫質下檔案小 25–34%
• 無損壓縮（lossless）：像 PNG 一樣保留所有像素，但檔案小 26%
• 透明背景（Alpha channel）：可以取代 PNG 做透明圖
• 動畫：可以取代 GIF，而且檔案更小

我們實際測試過一個電商網站的商品照片：一張 1MB 的 JPG 商品主圖，轉為 WebP 後只剩約 650KB，畫質在螢幕上完全看不出差異。這個網站有 200 多張商品圖，全部轉換後頁面載入時間從 4.2 秒降到 2.8 秒，LCP 指標直接從「需要改善」變成「良好」。

在瀏覽器支援方面，WebP 已經不是問題。Chrome、Firefox、Edge 早就支援，Safari 從 2020 年（macOS Big Sur / iOS 14）開始也全面支援。根據 Can I Use 的數據，全球超過 97% 的瀏覽器都能正確顯示 WebP。

WebP 的限制與注意事項

雖然 WebP 幾乎是網站圖片的完美選擇，但它不是萬能的：

• 舊版系統不支援：iOS 13 以前的裝置無法顯示 WebP，如果你的受眾有大量使用舊 iPhone 的用戶，需要設定 fallback 機制
• 圖片編輯軟體支援有限：舊版 Photoshop（CC 2022 以前）需要額外安裝外掛才能開啟 WebP，GIMP 則原生支援
• 不適合原始檔保存：如果你是攝影師或設計師，原始檔應該保留 RAW 或 TIFF 格式，WebP 適合用在最終輸出的網頁版本
• 電子郵件相容性差：許多郵件客戶端（如 Outlook 桌面版）不支援 WebP，寄送電子報時仍建議用 JPG

JPG 是什麼？什麼時候還是該用 JPG？

JPG（也寫作 JPEG）是 Joint Photographic Experts Group 在 1992 年制定的圖片壓縮標準，至今已超過 30 年歷史。JPG 和 JPEG 完全是同一種格式——早期 Windows 系統只支援 3 個字元的副檔名，所以用 .jpg；Mac 和 Linux 則用 .jpeg。

JPG 的壓縮原理是「有損壓縮」：它會分析圖片中人眼較不敏感的色彩資訊，然後丟棄這些資料來縮小檔案。這就是為什麼 JPG 特別適合色彩豐富、細節複雜的照片——人像、風景、食物攝影這類圖片，即使丟掉一些色彩資訊，肉眼也很難察覺。

但 JPG 不適合以下情境：

• 含文字的圖片：文字邊緣會出現模糊的「壓縮偽影」（compression artifacts）
• 需要透明背景的 Logo：JPG 不支援透明，會自動填充白色背景
• 螢幕截圖：截圖中的銳利邊緣和純色區塊，用 JPG 壓縮後容易出現色塊

一位攝影師朋友的作品集網站就是用 JPG 的好案例：他的網站需要展示高品質照片，同時確保在各種裝置上都能正確顯示。由於部分客戶使用較舊的瀏覽器，JPG 的廣泛相容性讓他不需要擔心任何顯示問題。搭配雲端主機的 CDN 加速，載入速度也在可接受範圍內。

JPG 壓縮品質設定建議

如果你決定使用 JPG，品質設定是關鍵：

• 品質 80–85：這是網頁用途的甜蜜點。我們測試過，品質 85 的 JPG 與品質 100 相比，檔案大小減少約 60%，但肉眼幾乎分辨不出差異
• 品質 60–70：適合縮圖或不需要仔細檢視的配圖，檔案可以再小 30%
• 品質 90 以上：除非是攝影作品展示，否則沒有必要，檔案大小會急劇增加

另一個重要觀念是「代際損失」（generation loss）：每次開啟 JPG 檔案、編輯後重新存檔，都會再次進行有損壓縮。反覆存檔 5–10 次後，畫質劣化會非常明顯。解決方法是：永遠保留一份原始高品質檔案，需要修改時從原始檔重新匯出，而不是編輯已經壓縮過的 JPG。

PNG 是什麼？透明背景的不二選擇

PNG（Portable Network Graphics）採用無損壓縮技術，意味著它會保留圖片中的每一個像素資訊，完全不會損失畫質。PNG 最大的優勢是支援透明背景（Alpha channel），這讓它成為 Logo、圖示、UI 元素的標準格式。

PNG 有兩個主要版本：

• PNG-8：最多支援 256 色，檔案較小，適合色彩簡單的圖示和線條圖
• PNG-24：支援 1600 萬色以上，適合需要高色彩精度的圖片，但檔案也更大

PNG 的缺點很明確：檔案太大。一張 1200×800 的照片，PNG 格式可能是 3–5MB，而同樣的圖片用 JPG 只需要 300–500KB，用 WebP 更只需要 200–350KB。這就是為什麼 PNG 不適合用在大量照片的頁面上——它會嚴重拖慢你的網站載入速度。

實際案例：一個品牌的 Logo 需要放在不同背景色的網頁上。如果 Logo 存成 JPG，它會帶著一個白色方塊底色，在深色背景上非常突兀。存成 PNG 就沒有這個問題——透明背景讓 Logo 完美融入任何背景。

不過，如果你的網站已經全面支援 WebP，其實 WebP 也能處理透明背景，而且檔案更小。所以現在的最佳做法是：Logo 和圖示保留 PNG 原始檔，但在網站上實際顯示時轉為 WebP。

格式選擇決策樹：你的圖片該存成哪種格式？

這是最多讀者問我們的問題：「到底該選哪種格式？」我們整理了一套簡單的決策邏輯，跟著走就對了。

除了決策樹，以下是依使用情境分類的具體建議：

如果你經營的是 WordPress 網站，答案幾乎都是 WebP。搭配自動轉換外掛，你甚至不需要手動處理格式問題——上傳 JPG 或 PNG，外掛會自動產生 WebP 版本，並在瀏覽器不支援時自動回退到原始格式。

對於需要架設購物車網站的電商經營者，圖片格式的選擇更是直接影響轉換率——頁面每慢 1 秒，轉換率平均下降 7%。

WebP 轉 JPG、JPG 轉 WebP：工具完整推薦

知道該用什麼格式後，接下來就是實際轉換。我們把工具分成三類，根據你的需求選擇最適合的。

線上免費轉換工具（適合偶爾轉檔）

如果你只是偶爾需要轉換幾張圖片，線上工具最方便，不需要安裝任何軟體。

Squoosh 是我們最推薦的單張轉換工具。它是 Google 官方開發的，介面有一個左右拖拉的滑桿，讓你即時比較壓縮前後的畫質差異。你可以精確調整壓縮品質，找到檔案大小和畫質的最佳平衡點。

桌面軟體（適合大量或定期轉檔）

如果你需要一次轉換上百張圖片，或是定期處理大量圖檔，桌面軟體的效率遠高於線上工具。

XnConvert 是我們團隊最常用的免費批量轉換工具，支援 Windows、Mac 和 Linux。操作步驟很簡單：

1. 下載安裝 XnConvert（完全免費，不需要帳號）
2. 將所有要轉換的圖片拖入「輸入」分頁
3. 在「動作」分頁可以加入調整大小、浮水印等批量處理
4. 在「輸出」分頁選擇目標格式（WebP / JPG / PNG），設定品質參數
5. 點擊「轉換」，幾百張圖片通常在一分鐘內完成

其他桌面選項：

• GIMP：免費開源的圖片編輯軟體，原生支援 WebP 匯出，適合需要同時編輯圖片的情境
• Adobe Photoshop：CC 2022 之後原生支援 WebP，「另存新檔」或「匯出為」都能直接選擇 WebP 格式

WordPress 自動轉換（網站主必看）

如果你用 WordPress 架站，最省事的做法是安裝圖片優化外掛，讓它自動處理所有格式轉換。以下是三個主流外掛：

• ShortPixel：每月免費額度 100 張，自動將上傳的圖片轉為 WebP，並保留原始格式作為 fallback
• Imagify：每月免費額度 20MB，介面最直覺，與 WP Rocket 同一家公司開發
• Smush：免費版支援無限張數的基本壓縮，Pro 版才有 WebP 轉換功能

這些外掛的運作原理是：當你上傳一張 JPG 圖片時，外掛會自動產生一個 WebP 版本。當訪客的瀏覽器支援 WebP，就提供 WebP 版本；不支援的話，自動回退到原始 JPG。這個機制透過 HTML 的 <picture> 標籤實現：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="商品照片">
</picture>

瀏覽器會自動選擇它支援的格式，你完全不需要擔心相容性問題。

我們曾協助一個 WordPress 部落格安裝 ShortPixel，安裝前 PageSpeed Insights 的效能分數是 62 分，圖片優化完成後直接跳到 89 分。最大的改善來自「適當調整圖片大小」和「以新世代格式提供圖片」這兩個項目。

如果你的 WordPress 網站還沒做過備份，建議在安裝任何外掛之前先完成備份，以防萬一。

Kinsta 如何自動處理圖片格式與 CDN 加速

圖片格式只是速度優化的一半——另一半是「圖片從哪裡載入」。即使你把所有圖片都轉成了 WebP，如果伺服器在美國，台灣的訪客還是要等圖片跨越太平洋傳過來。這就是 CDN（內容傳遞網路）要解決的問題。

Kinsta 是我們測試過的 WordPress 主機中，在圖片優化方面做得最完整的一家。它內建 Cloudflare Enterprise CDN，不需要額外設定就能享受全球 260+ 個節點的加速。

Kinsta 在圖片處理上的核心優勢：

• 自動 WebP 轉換：在 MyKinsta 控制台中開啟圖片優化功能，Kinsta 會自動將 JPG 和 PNG 轉為 WebP 格式，不需要安裝額外外掛
• Edge Caching：圖片會被快取到離訪客最近的 CDN 節點，台灣訪客從亞太節點載入，歐美訪客從當地節點載入
• 自動偵測瀏覽器：Cloudflare CDN 會偵測訪客的瀏覽器是否支援 WebP，自動提供最佳格式
• 無損壓縮與有損壓縮可選：在 MyKinsta 中可以選擇壓縮程度，平衡畫質與速度

我們實際測試過一個電商網站從傳統共享主機遷移到 Kinsta WordPress 主機的效果：TTFB（首位元組時間）從 1.8 秒降到 0.3 秒，LCP 從 4.1 秒降到 1.9 秒。其中圖片載入速度的改善佔了整體提升的約 40%，剩下的來自伺服器回應速度和快取機制。

搭配 Kinsta 的圖片優化最佳實踐

即使有了 Kinsta 的自動優化，以下幾個步驟能讓效果最大化：

上傳前先調整尺寸：不要上傳 4000×3000 像素的原始照片來顯示在 800 像素寬的文章欄位中。先用 Squoosh 或 XnConvert 將圖片縮放到實際需要的尺寸，再上傳。

善用 lazy loading：在 <img> 標籤中加入 loading="lazy" 屬性，讓瀏覽器只在圖片即將進入可視範圍時才載入。WordPress 5.5 以後已經預設啟用這個功能。

撰寫有意義的 alt text：alt text 不只是為了 SEO，也是無障礙設計的重要元素。好的 alt text 應該描述圖片內容，而不是堆砌關鍵字。例如：

• ❌ alt="webp jpg png 圖片格式 比較 轉換"
• ✅ alt="三種圖片格式的檔案大小比較圖表，WebP 最小、JPG 居中、PNG 最大"

設定正確的快取策略：Kinsta 的 Edge Caching 預設已經很完善，但如果你使用其他主機，確保圖片的快取過期時間設定為至少 30 天。想深入了解快取設定，可以參考我們的CMS 內容管理系統指南中的相關說明。

圖片壓縮對網站速度的實際影響

很多人知道「圖片要壓縮」，但不清楚壓縮到底能帶來多大的差異。我們用實際數據說明。

一個典型的 WordPress 部落格文章頁面，通常包含 5–10 張圖片。以下是我們測試的真實數據：

優化步驟只有三個：

1. 將所有 JPG/PNG 圖片轉為 WebP 格式
2. 將圖片尺寸從原始大小縮放到實際顯示尺寸
3. 啟用 lazy loading

這三個步驟不需要任何程式碼知識，用 ShortPixel 外掛就能一鍵完成前兩項，lazy loading 則是 WordPress 預設功能。

如果你的網站使用 Kinsta 主機，第一和第二步甚至可以在 MyKinsta 控制台中直接啟用，完全不需要安裝外掛。這對於想要減少外掛數量、保持網站輕量化的站長來說特別有吸引力。

對於正在考慮架設新網站的讀者，選擇一個內建圖片優化功能的主機，從一開始就能省下大量後續優化的時間。你可以參考我們的免費網域指南，了解如何用最低成本開始你的網站。

進階技巧：<picture> 標籤與響應式圖片

如果你不是用 WordPress，而是自己寫 HTML 或使用其他內容管理系統，手動設定 WebP fallback 也不難。<picture> 標籤是 HTML5 的標準元素，讓你為同一張圖片提供多種格式和尺寸：

<picture>
  <!-- 優先提供 WebP 格式 -->
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w" 
          type="image/webp" 
          sizes="(max-width: 800px) 100vw, 800px">
  <!-- 不支援 WebP 時回退到 JPG -->
  <source srcset="hero-800.jpg 800w, hero-1200.jpg 1200w" 
          type="image/jpeg" 
          sizes="(max-width: 800px) 100vw, 800px">
  <!-- 最終 fallback -->
  <img src="hero-800.jpg" alt="網站首頁主視覺" loading="lazy">
</picture>

這段程式碼做了兩件事：

1. 格式 fallback：瀏覽器支援 WebP 就用 WebP，不支援就用 JPG
2. 響應式尺寸：手機載入 800px 寬的圖片，桌機載入 1200px 寬的圖片，避免手機下載不必要的大圖

如果你覺得手動寫這些程式碼太麻煩，這正是 WordPress 外掛和 Kinsta 自動優化的價值所在——它們在背後自動幫你處理這些細節。

對於使用 Webflow 等視覺化架站工具的用戶，平台通常也內建了響應式圖片功能，你只需要上傳高解析度原圖，平台會自動產生不同尺寸的版本。

結論

圖片格式的選擇不需要複雜的技術知識，掌握以下重點就夠了：

• WebP 是網站圖片的首選格式——同畫質下比 JPG 小 25–34%，比 PNG 小 26%，現代瀏覽器全面支援
• JPG 仍然適合攝影作品和社群分享——相容性最廣，品質 80–85 是網頁用途的甜蜜點
• PNG 是透明背景的標準選擇——Logo 和圖示用 PNG 保存原始檔，網站顯示時轉為 WebP
• 用對工具讓轉換零負擔——偶爾轉檔用 Squoosh，批量轉檔用 XnConvert，WordPress 網站用 ShortPixel 自動處理
• 主機端的自動優化最省事——Kinsta 內建 WebP 轉換和 Cloudflare CDN，不需要額外外掛就能完成圖片優化

下一步行動：如果你的 WordPress 網站還在用未優化的 JPG 和 PNG 圖片，現在就去安裝 ShortPixel 外掛，或者考慮遷移到內建圖片優化功能的主機。我們團隊實際使用 Kinsta 管理多個網站，從圖片自動轉 WebP 到全球 CDN 加速，整個流程不需要額外設定，PageSpeed 分數平均提升 20–30 分。

WebP、JPG、PNG 常見問題

JPG 和 JPEG 是一樣的嗎？

完全相同，只是副檔名不同。早期 Windows（如 MS-DOS）只支援 3 個字元的副檔名，所以用 .jpg；Mac 和 Linux 沒有這個限制，所以用 .jpeg。現在所有作業系統都能辨識兩種副檔名，你用哪個都可以。

WebP 會取代 JPG 和 PNG 嗎？

在網站用途上，WebP 已經是首選格式。但 JPG 在攝影、印刷、社群媒體等領域仍然是主流，短期內不會被完全取代。PNG 在需要無損品質和透明背景的專業設計領域也仍有不可替代的地位。更準確的說法是：WebP 正在取代「網站上的 JPG 和 PNG」，而不是取代這兩種格式本身。

我的網站圖片現在都是 JPG，需要全部換成 WebP 嗎？

不需要手動一張一張換。安裝 ShortPixel 或 Imagify 等 WordPress 外掛，它們可以批量處理你現有的所有圖片，同時自動轉換未來上傳的新圖片。如果你使用 Kinsta 主機，在 MyKinsta 控制台中啟用圖片優化功能即可，連外掛都不需要裝。

WebP 轉 JPG 會損失畫質嗎？

要看情況。如果原始 WebP 是用有損壓縮產生的，轉為 JPG 時會再次進行有損壓縮，畫質確實會進一步下降。建議的做法是：保留原始的高解析度檔案（RAW、TIFF 或高品質 JPG），需要不同格式時從原始檔重新匯出，而不是在已壓縮的格式之間互轉。

PNG 可以轉成 WebP 嗎？透明背景會保留嗎？

可以，而且透明背景會完整保留。WebP 支援 Alpha channel（透明度通道），所以 PNG 的透明背景轉成 WebP 後不會有任何問題。轉換後的 WebP 檔案通常比原始 PNG 小 26% 以上，非常適合用在網站上的 Logo 和圖示。

社群媒體貼文應該用什麼圖片格式？

Facebook、Instagram、LINE 等社群平台建議使用 JPG。原因是這些平台會自動對上傳的圖片進行壓縮，WebP 的檔案大小優勢在這個過程中會被抵消。此外，部分社群平台的分享預覽功能對 WebP 的支援仍不完善，用 JPG 最安全。