網頁圖片最佳化：完整格式指南

圖片約佔一般網頁總大小的 50%。未最佳化的圖片是頁面載入緩慢、Core Web Vitals 分數不佳和使用者體驗不良的最大元凶。好消息是，現代最佳化技術可以在沒有可見品質損失的情況下，將圖片大小減少 50-80%。

為什麼圖片最佳化很重要

Google 將頁面速度列為排名因素。載入時間 2 秒的頁面跳出率為 9%；到 5 秒時，跳出率飆升至 38%。圖片通常是最容易實現的效能提升，因為相關工具和技術已經非常成熟。

影響是可量化的：

更快的頁面載入提升 SEO 排名
減少頻寬節省主機成本
更好的行動裝置體驗（佔網路流量 60% 以上，至關重要）
改善 Core Web Vitals（LCP、CLS）

圖片格式比較

JPEG (JPG)

最適合照片和色彩豐富的複雜圖片。JPEG 使用有損壓縮——您以些許品質換取大幅縮小的檔案。

優點：通用支援、照片壓縮效果極佳、支援漸進式載入
缺點：不支援透明度、有損（重新儲存會降低品質）
適用於：產品照片、主視覺圖片、背景圖
品質設定：75-85% 是網頁使用的甜蜜點

PNG

最適合需要透明度或具有銳利邊緣的圖片，如標誌和截圖。PNG 使用無損壓縮。

優點：支援透明度、無損品質、銳利的文字與邊緣
缺點：照片檔案偏大、不支援動畫（請使用 APNG）
適用於：標誌、圖示、截圖、UI 元素
提示：簡單圖形使用 PNG-8（256 色），複雜圖片使用 PNG-24

WebP

Google 的現代格式，結合了 JPEG 和 PNG 的優點。同時支援有損和無損壓縮以及透明度。

優點：在同等品質下比 JPEG 小 25-35%，支援透明度
缺點：非常舊的瀏覽器不支援（IE11）
適用於：所有用途——它是目前最佳的通用網頁格式
瀏覽器支援：截至 2024 年全球 97% 以上

AVIF

最新的競爭者，基於 AV1 視訊編碼器。提供比 WebP 更好的壓縮效果。

優點：比 JPEG 小 50%、支援 HDR、品質優異
缺點：編碼較慢、92% 瀏覽器支援、工具支援有限
適用於：需要最大壓縮效果的高優先級圖片

SVG

向量格式，適用於需要縮放至任意大小而不失真的圖形。

優點：無限縮放、檔案極小、可用 CSS/JS 製作動畫
缺點：不適合照片
適用於：圖示、標誌、插圖、簡單圖形

使用我們的圖片最佳化工具壓縮和轉換格式。

壓縮技術

有損壓縮

永久移除人眼較不敏感的資料。最適合照片。

關鍵在於找到壓縮偽影變得可見的品質門檻。對於大多數 JPEG 圖片，品質 80 與品質 100 在視覺上幾乎無法區分，但檔案可以小 60-70%。

無損壓縮

在不移除任何資料的情況下減小檔案大小。解壓縮後的圖片與原始圖片逐位元組完全相同。

OptiPNG 和 pngquant 等工具可以透過更好的壓縮演算法，在不損失任何像素的情況下將 PNG 檔案減小 20-50%。

響應式圖片

將 2000px 的圖片傳送給視窗只有 400px 的手機是浪費頻寬。使用響應式圖片來提供正確的尺寸：

<img
  srcset="image-400w.webp 400w,
          image-800w.webp 800w,
          image-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800w.webp"
  alt="Description"
  loading="lazy"
/>

延遲載入

延遲載入會推遲載入視窗外不可見的圖片。現在瀏覽器已原生支援此功能：

<img src="photo.webp" alt="Description" loading="lazy" />

對於摺疊線以上的圖片（主視覺圖片、標誌），不要使用延遲載入——這些圖片應立即載入以獲得最佳的 LCP 分數。

圖片 CDN 與轉換

Cloudinary、imgix 和 Cloudflare Images 等圖片 CDN 可以即時最佳化：

自動格式協商（在支援時提供 WebP/AVIF）
根據裝置動態調整大小
品質自動調整
全球邊緣快取

如果您不想使用第三方服務，我們的圖片壓縮工具讓您在上傳前於瀏覽器中本地最佳化圖片。

最佳化檢查清單

選擇正確的格式：大多數情況用 WebP，不需要透明度的照片用 JPEG，需要透明度的銳利圖形用 PNG，向量圖用 SVG
調整為顯示尺寸：永遠不要提供比顯示尺寸更大的圖片
適當壓縮：JPEG/WebP 使用品質 75-85，PNG 使用無損工具
實作響應式圖片：使用 srcset 和 sizes 屬性
延遲載入摺疊線以下的圖片：使用 loading="lazy"
加入寬度和高度屬性：防止累積版面位移（CLS）
使用描述性替代文字：同時受益於無障礙性和 SEO
從 CDN 提供服務：透過邊緣快取降低延遲

測量成果

使用 Google PageSpeed Insights 或 Lighthouse 來衡量您的圖片最佳化成效。需要關注的關鍵指標：

Largest Contentful Paint (LCP)：應低於 2.5 秒
圖片總大小：比較最佳化前後
適當大小的圖片：Lighthouse 會標記提供的圖片大於顯示尺寸的情況

常見問題

2025 年網頁最佳的圖片格式是什麼？

WebP 是最佳的通用格式，瀏覽器支援率達 97% 以上。它為照片（有損）和圖形（無損）提供出色的壓縮效果，同時支援透明度。AVIF 提供更好的壓縮效果，但瀏覽器支援略低且編碼較慢。

壓縮圖片時可接受多少品質損失？

對於網頁使用，大多數圖片可以壓縮到品質 75-85（滿分 100）而沒有可見的品質損失。人眼對壓縮偽影的容忍度出乎意料地高，尤其是在照片中。請務必在實際顯示尺寸下比較原始圖片和壓縮後的圖片，而不是放大檢視。