短答——2026 年網站最佳的影像格式
2026 年，多數網站最佳的影像格式是 WebP。照片、商品圖、縮圖、部落格圖，以及許多透明圖形的實用預設都是它——通常比 JPEG 或 PNG 更小，同時能在現代瀏覽器中正常運作。
但這不代表「把所有圖都轉成 WebP」是一份好的遷移計畫。大型視覺素材上，AVIF 的檔案可能贏過 WebP；舊瀏覽器、電子郵件、CMS 匯入和第三方上傳表單，JPEG 依然是最穩的後援；截圖、示意圖，以及邊緣或透明必須精確的點陣素材，PNG 仍是對的選擇；標誌與圖示只要來源是向量，SVG 就勝過上述所有格式。
2026 年真正的答案是：
| 情境 | 首選格式 | 原因 |
|---|---|---|
| 網站上大多數的照片 | WebP | 現代瀏覽器廣泛支援，體積節省明顯 |
| 大幅英雄圖或藝廊圖 | AVIF，搭配 WebP／JPEG 後援 | LCP 與頻寬敏感時位元組最省 |
| 電子郵件、舊 CMS、原生 App 匯入 | JPEG | 相容性最高，上傳意外最少 |
| 截圖或介面圖 | PNG 或無損 WebP | 保持文字與硬邊乾淨 |
| 標誌或圖示 | SVG，若需要點陣再退回 PNG／WebP | 縮放乾淨、體積極小 |
| 含透明的商品去背 | 帶 Alpha 的 WebP；工作流需要時用 PNG | 保留透明又不肥大 |
| iPhone 上傳的 HEIC | 發布前先轉成 JPEG 或 WebP | HEIC 不是安全的公開網頁格式 |
這件事為什麼仍然重要
影像格式決定訪客要下載多少位元組，會影響頁面速度、行動流量與 Largest Contentful Paint，尤其當圖片位於首屏之上時。Chrome 的 Lighthouse 指南仍把 AVIF 和 WebP 視為現代格式，認為它們在許多網頁圖片上，壓縮和品質特性都優於舊的 JPEG 和 PNG。
不過格式只是影像 SEO 的一部分。編碼再完美的 AVIF，如果寬 4000 px 卻塞在 700 px 的位置，還是會拖垮效能；一張迷你的 WebP，如果圖片沒有實用的 alt、頁面內容也單薄，也無助於排名。先選格式，然後縮圖、壓縮、設定 width 與 height、寫有意義的 alt、提供響應式來源。
有個簡單好用的心智模型：先選對像素，再選對格式。
把 WebP 當作日常預設
對 2026 年多數的網頁影像工作而言，WebP 是最好的預設。它同時支援照片的有損壓縮、圖形的無損壓縮、透明與動畫。Google 表示，無損 WebP 比 PNG 小 26 %，在同等品質下有損 WebP 比 JPEG 小 25–34 %。
WebP 適合：
- 部落格與說明中心的照片。
- 商品列表圖與縮圖。
- 分類頁圖片。
- 團隊合照與作者頭像。
- 不需要 AVIF 節省幅度的背景圖。
- CMS 與目標瀏覽器都能穩定處理 WebP 時的透明圖形。
從營運面看，WebP 也很省事。多數影像編輯器、建置工具、CMS 外掛、CDN 與瀏覽器端轉檔工具都能產出。小團隊想以單一現代格式為主、又不想為每張圖維護多套後援時，WebP 就是最省事的答案。
節省抵得上流水線成本時才上 AVIF
只有當影像重量真的成為業務問題時，AVIF 才值得試：一張大型英雄圖、一個高流量落地頁、一份全寬攝影作品集，或行動端會全數載入的商品藝廊。MDN 把 AVIF 描述為高效能、免版稅，支援透明、動畫、更高色彩深度、HDR 與廣色域的格式。實務上最大的日常好處，是在很多攝影素材上檔案更小。
問題在於工作流。AVIF 編碼可能較慢，某些舊瀏覽器、App 內 Webview、CMS 工具或上傳入口對它的支援，未必像 JPEG 或 WebP 那麼順。因此 AVIF 通常是後援鏈的第一位，而不是唯一保存的檔案。
以下情況才用 AVIF：
- 圖片大到位元組節省真的有意義。
- 資產在建置時或透過 CDN 產生。
- 你能在發布前先目視檢查品質。
- 你能提供 WebP 或 JPEG 後援。
- 分析顯示訪客大多使用現代瀏覽器。
不要每張小縮圖都盲目上 AVIF。若一張 14 KB 的 WebP 變成 10 KB 的 AVIF，但產出更慢、流水線更複雜，這樣的收益未必划算。
保留 JPEG 應付相容性、後援與非網頁工作流
JPEG 沒有死，只是不再是效能導向網頁配送的最佳預設。
當相容性比「最強壓縮」更重要時，就繼續用 JPEG：
- 電子報與電子郵件附件。
- 檔案檢查嚴格的舊 CMS 匯入或素材庫。
- 只接受 JPEG 的原生 App 或上傳入口。
- 反正會再壓一次所有圖片的社群工具。
- 舊瀏覽器、App 內瀏覽器、公用終端、嵌入式裝置。
<picture>元素裡的後援圖。
若頁面本身圖不多、效能也還有餘裕，用 JPEG 也沒問題。經過合理縮放、合理品質的 JPEG，比尺寸不對的巨型 WebP 更好。糟糕的圖像效能，多半來自過大的像素尺寸，而不是 JPEG 本身。
需要像素保持精確時用 PNG
PNG 不是現代的照片配送格式，而是精度格式。當無損邊緣、文字或透明比檔案大小更重要時才用。
PNG 適合的情境：
- 含小字級的 UI 截圖。
- 圖表、示意圖、線稿。
- 沒有 SVG 可用時的標誌。
- 設計工作流中的透明點陣素材。
- 會被反覆編輯的檔案。
PNG 不適合的情境：
- 相機照片。
- 英雄圖背景。
- 沒有透明的大幅商品照。
- 換成 WebP 或 AVIF 也沒差的裝飾圖。
照片型 PNG 的檔案，可能比視覺相近的 JPEG／WebP／AVIF 大好幾倍。若圖片是攝影素材、又不需要透明或嚴格的像素保留，PNG 通常就是錯的匯出。
標誌與圖示別忘了 SVG
大多數「最佳格式」文章只比較 JPG、PNG、WebP、AVIF，但網站的標誌與圖示，往往更適合 SVG。SVG 是向量的，任何尺寸下都保持銳利，通常也比點陣版標誌小很多。
SVG 適合：
- 網站標誌。
- 簡單圖示。
- 介面符號。
- 本來就是向量的平面插畫。
需要改用 PNG 或 WebP 的情況：素材是複雜的點陣圖、平台會移除 SVG、SVG 來源不可信。SVG 可能含類似程式碼的標記，只用來自可信流程的 SVG。
依頁面型態決定格式
不同頁面配得上不同的格式選擇。首頁英雄圖與說明文章裡的截圖，不應該被同等看待。
| 頁面或素材 | 建議設定 | 說明 |
|---|---|---|
| 首頁英雄圖 | AVIF 先、WebP 次、JPEG 後援 | 若為 LCP 圖，請預先載入或提升優先度 |
| 部落格文章圖 | WebP，必要時加 JPEG 後援 | 縮至實際顯示的內容寬度 |
| 商品列表網格 | WebP 縮圖 | 保持尺寸一致，避免版面位移 |
| 商品詳情藝廊 | 大圖用 AVIF／WebP，後援用 JPEG | 發布前先測試放大細節 |
| 文件中的截圖 | PNG 或無損 WebP | 避免文字周圍出現有損雜訊 |
| 標誌 | SVG | 只有真的需要時再加 PNG 後援 |
| 作者頭像 | WebP | 若 CMS 不支援 WebP，JPEG 也可以 |
| 電子郵件圖片 | JPEG 或 PNG | 電子郵件工作流通常比瀏覽器嚴格 |
| 可下載的媒體宣傳圖 | JPEG 加可選的高解析度原檔 | 使用者往往更需要相容性而非最小體積 |
如果本週只能改一件事，從首屏之上最大的圖片，以及最多人瀏覽、圖片密集的模板開始。先把每一顆小圖示都換掉看起來很有進展，實際上很少推動效能指標。
正確的後援模式
正式站台上的頁面，<picture> 元素會讓瀏覽器挑第一個它支援的格式。web.dev 推薦 AVIF 先、WebP 次、JPEG 後援的組合。內嵌的 img 繼續承載 alt、width、height 與後援的 src。
<picture>
<source
type="image/avif"
srcset="/images/hero-1200.avif 1200w, /images/hero-2400.avif 2400w"
sizes="100vw"
/>
<source
type="image/webp"
srcset="/images/hero-1200.webp 1200w, /images/hero-2400.webp 2400w"
sizes="100vw"
/>
<img
src="/images/hero-1200.jpg"
width="1200"
height="800"
alt="以胡桃木櫥櫃搭配自然採光的整修完工廚房"
/>
</picture>
把 JPEG 後援放在 img 元素裡，有意義的 alt 文字也放在這裡。不要把唯一有意義的描述藏在 source 標籤——瀏覽器不會從 source 讀 alt。
若是 LCP 英雄圖，也要考慮載入優先度。主英雄圖不要延遲載入；首屏以下的圖片則可以用延遲載入。
真正有用的品質設定
品質數值並不通用。WebP 的 80、AVIF 的 50、JPEG 的 85 並不是同一件事，不同編碼器的行為也不同。
請把下面的值視為起點，不是規則。
| 格式 | 起始品質 | 用途 |
|---|---|---|
| JPEG | 80–88 | 相容後援或電子郵件裡的照片 |
| WebP | 78–85 | 內容照片與英雄圖備選 |
| WebP | 70–78 | 縮圖與網格 |
| AVIF | 45–65 | 需要減重的大幅照片 |
| PNG | 沒有有損品質滑桿 | 截圖、示意圖、透明、精確素材 |
匯出的圖片一定要在它實際出現在頁面上的尺寸下比較。若一張圖顯示寬度只有 600 px，卻在 4000 px 全放大下判斷，會把訪客其實看不到的無害壓縮放大成缺陷。也記得測試暗色漸層、膚色、商品紋理與文字疊層——比一片藍天更早顯露壓縮問題。
實務可行的遷移計畫
若你在整理一個已上線的站點，別一開始就把整個素材庫全部轉檔。從能量化影響的地方著手。
- 匯出瀏覽量最高頁面上最大的圖片清單。
- 標記出哪些位於首屏之上或可能是 LCP 圖。
- 把每張圖縮到它實際顯示的最大尺寸。
- 先把照片轉成 WebP。
- 在最重的英雄圖或藝廊上測試 AVIF。
- 需要相容舊瀏覽器、電子郵件或 CMS 的模板保留 JPEG 後援。
- 截圖、示意圖與精確圖形保持 PNG 或無損 WebP。
- 補齊
width、height、srcset、sizes與具描述性的alt。 - 在變更前後各跑一次 Lighthouse 或你的效能監控。
這套流程沒有「AVIF 最好」那句口號響亮，但在真實站點上更容易見效。
用 PhotoTools 轉換格式
PhotoTools 可以在瀏覽器裡轉換 JPG、PNG、WebP、AVIF 與 HEIC 檔案。拖入圖片、選擇目標格式、若是有損輸出調整品質，然後轉換、下載結果。批次轉換在遷移一整批商品圖或部落格圖時很好用。
大批轉換前的簡單測試：
- 挑一張明亮的、一張昏暗的、一張有人臉的、一張細節豐富的照片。
- 匯出 WebP 與 AVIF 版本。
- 按實際顯示尺寸比較。
- 檢查檔案大小的節省。
- 上傳其中一份到 CMS，確認平台接受。
iPhone 的 HEIC 檔案在發布前先轉為 JPEG 或 WebP。HEIC 作為拍攝與儲存格式很有用，但不是可直接對外提供的安全網頁格式。
2026 年建議的來源說明
本建議依據當前的瀏覽器與效能文件，以及實務的網頁發布工作流：
- MDN 影像檔案類型指南介紹 AVIF、WebP、JPEG、PNG、SVG、瀏覽器支援與何時應加上後援。
- Chrome Lighthouse 文件說明 AVIF 與 WebP 為何能相對舊的 JPEG 與 PNG 減輕影像重量。
- Google WebP 文件公布無損與有損 WebP 相對 PNG、JPEG 的節省幅度。
- web.dev 關於影像效能解釋現代格式與
<picture>元素如何嵌入影像載入與 LCP。
一句話總結：日常網頁格式用 WebP，影像重量真正影響效能的地方補上 AVIF，相容性場景保留 JPEG，真的需要 PNG 或 SVG 的素材就讓它保留。