AVIF 圖片審核

轉換 JPEG 為 AVIF：只在頁面加速時使用

AVIF 最有用的方式是當作圖片審核，而非一刀切的匯出設定。本指南協助您找出適合 AVIF 的 JPEG 照片，選擇審核流程，避免發布檔案較小但視覺品質較差的圖片。

快速判斷

只轉換例外檔案，不是整個媒體資料夾

最佳 JPEG 轉 AVIF 決策從頁面影響開始。轉換調整尺寸後仍拖慢頁面的大片照片，常規縮圖、UI 截圖、圖表及已小資產則走簡單路徑。

強力候選 大型照片 LCP 圖片

當主視覺或著陸頁照片在調整尺寸與 WebP 匯出後仍佔較大檔案時，使用 AVIF。

可能 重要但非主導

僅在目前檔案仍明顯過大或頁面有明顯速度問題時測試 AVIF。

避免 微小、圖形或未審核資產

圖片較小、主要是 UI、文字多或無法發佈前檢查結果時，跳過 AVIF。

先進行圖片審核

選擇 AVIF 前請先問自己這些問題

AVIF 效果可能很好，但不是萬能修復。格式重要性在於圖片尺寸正確、角色分配妥當，且在訪客實際看到的版面中經過審核後才顯現。

問題 重要原因 操作
渲染尺寸是否已正確？ AVIF 無法修正 4000px 圖片在 900px 顯示時的問題。 先調整尺寸，再比較格式。
這張圖片會影響 LCP 或第一印象嗎？ 大型首屏照片比深層頁面裝飾更具影響力。 優先處理主視覺、著陸頁與活動圖片。
內容是照片類型嗎？ AVIF 通常適合照片，較不適合平面 UI 或標誌風格圖形。 邊緣銳利更重要時，使用 PNG、SVG 或 WebP。
您能在實際情境中審核結果嗎？ AVIF 可能會隱藏壓縮痕跡，直到圖片置入實際版面中才會顯現。 檢查手機寬度、漸層、人臉與裁切。
您有備援方案嗎？ 並非所有環境對現代格式的支援都相同。 使用圖片標記或框架等效方式發布。

候選圖片篩選

哪些 JPEG 圖片適合轉成 AVIF？

尋找檔案變小能改變頁面表現的圖片，而非僅在檔案管理器中。最佳候選通常是照片類、視覺重要且足夠大以影響載入速度。

最佳候選

LCP 主視覺照片

定義首屏且經過調整後仍然檔案較大的大型照片，通常是 AVIF 最佳的應用場景。

良好候選

著陸頁活動圖片

當活動或產品照片位於頁面上方且需保持視覺精緻時，額外的審核是合理的。

選擇性候選

編輯專題圖片

當圖片夠大且重要時使用 AVIF，而非僅因每張文章圖片都重新匯出。

不佳候選

文字密集截圖

截圖、UI 擷取、圖表與圖示在文字清晰度上常不理想，AVIF 壓縮前需注意。

品質審核

不要在不同 AVIF 工具間複製品質數值

AVIF 品質滑桿並非通用，不同編碼器中相同數值可能過軟或過重。建議從工具預設或中等品質開始，並在實際頁面上評估輸出效果。

目標不是最小的 AVIF 檔案，而是最小且仍能支援頁面的檔案：細節足夠清晰、漸層可接受、無干擾紋理損失及無明顯色偏。

審核順序
  1. 比較調整尺寸後的 JPEG 或 WebP，而非原始相機檔案。
  2. 檢視圖片在桌面渲染尺寸與手機寬度下的效果。
  3. 檢查人臉、天空、漸層、陰影、小紋理與品牌色彩。
  4. 確認檔案確實能在您計劃發佈的頁面載入。

視覺失敗模式

發布前值得檢查的 AVIF 壓縮痕跡

優質的 AVIF 輸出效果極佳，劣質的則可能悄悄失敗：檔案較小，但影像在使用者最先注意的頁面區域看起來平淡、模糊或有雜訊。

天空或漸層的色帶現象 背景漸層過度壓縮時可能出現階梯狀。
蠟狀皮膚或產品質感 人像與產品表面即使檔案初看銳利，也可能失去自然細節。
細節模糊 葉子、布料、頭髮與小型重複圖案可能模糊，感覺品質低於節省的位元組大小。
色彩或對比度偏移 活動圖片與產品照片轉換後需進行品牌色彩安全檢查。
裁切與焦點錯誤 如果響應式裁切隱藏了圖片中吸引訪客的部分，檔案變小並不算成功。

交付

發布 AVIF 時附帶備援，而非盲目替換

重要頁面圖片請保持交付穩定且可預測。支援時優先使用 AVIF，保留 WebP 或 JPEG 備援，設定寬高，避免瀏覽器延遲偵測版面尺寸。

只有在 AVIF 真正是 LCP 圖片時才預載。預載所有轉換資產可能讓頁面更忙碌，反而不會更快。

HTML帶 AVIF 備援的圖片標記
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

隱私與控制

避免未發佈的活動圖片被隨意上傳流程使用

大型 JPEG 照片通常非中性檔案，可能包含未發佈產品、客戶作品、地點線索、活動素材或透露內部資訊的檔名，上傳轉換器應是經過深思熟慮的決定，而非預設行為。

本地工作流程能將原始檔案、輸出名稱與審核步驟緊密結合於專案中，特別適合同一著陸頁需多次匯出調整視覺平衡的情況。

實用工作流程

可重複的 JPEG 轉 AVIF 流程，無需將每張圖片都當成專案處理

  1. 01
    只收集檔案較大的候選圖片

    從經過正常調整尺寸與 WebP 匯出後仍重要的大型 JPEG 照片清單開始。

  2. 02
    分別匯出 AVIF 變體

    將 AVIF 輸出保存在專用資料夾，方便與原始 JPEG 及常規 WebP 檔案比較。

  3. 03
    在實際頁面中審核

    將候選圖片放入實際元件或範本中檢查可見結果，而非僅看轉換器預覽。

  4. 04
    使用備援標記發布

    在支援 AVIF 的環境提供，並保留 WebP 或 JPEG 備援以確保行為可預測。

  5. 05
    記錄規則

    記錄哪些圖片角色使用 AVIF，避免下次更新成為猜測遊戲。

格式界限

以 WebP 為基準，AVIF 作為升級選擇

良好的工作流程通常包含預設與例外路徑。WebP 是常規網站圖片的預設格式，因為實用且廣泛支援。當大型照片仍然過大時，AVIF 則作為升級選擇。

此界限讓文章工作流程保持快速，同時提供救援主導檔案大小或 LCP 的圖片方法。

常規文章圖片 除非特定檔案仍過大，否則使用 WebP。
大型照片主視覺 先調整尺寸後嘗試 AVIF，並比較視覺效果。
截圖與 UI 文字與銳利邊緣重要時，優先使用 PNG 或 WebP。
未審核批次匯出 不要因為資料夾較小就盲目發布 AVIF。

發佈前檢查清單

替換 JPEG 為 AVIF 前請先檢查這些項目

原始圖片已調整尺寸 AVIF 檔案接近最大顯示尺寸，而非相機原始尺寸。
頁面使用 AVIF 透過網路或頁面原始碼檢查確認新檔案確實被提供。
存在備援方案 WebP 或 JPEG 仍可用於您使用的交付路徑。
品質已審核 最終頁面已在桌面與手機上檢查壓縮痕跡。
元資料仍有意義 替代文字、Open Graph 圖片與 JSON-LD 圖片參考未被意外破壞。
保留原始檔案 原始 JPEG 檔案仍保留以供未來裁切、調整尺寸與重新匯出。

常見問題

常見問題

JPEG 轉 AVIF 發佈決策的實用解答