圖片佔據網頁平均 50% 以上的體積。這意味著網站慢幾乎總是圖片的問題。正確壓縮圖片，是你為網頁效能、Core Web Vitals 分數 —— 進而為 SEO 排名 —— 所能採取的單項投資回報最高的行動。
Google 的 Core Web Vitals 把最大內容繪製（LCP）作為主要排名訊號。LCP 衡量頁面主圖出現所需的時間。一張未壓縮的 3 MB 主視覺圖就足以讓 LCP >4 秒 —— 被判定為「差」—— 拖累你的排名。
| 格式 | 最佳用途 | 瀏覽器支援 | 相比 JPEG 體積 |
|---|---|---|---|
| WebP | 所有網頁圖片（照片+圖形） | 97%+ 瀏覽器 | 小 25–34% |
| AVIF | 照片、高保真影像 | 約 85%（無 IE/Safari 15） | 小 40–50% |
| JPEG | 照片（回退） | 通用 | 基準 |
| PNG | Logo、截圖、透明 | 通用 | 常比 JPEG 大 3–5 倍 |
| SVG | 圖示、Logo、插畫 | 通用 | 解析度無關 |
| GIF | 避免 —— 改用動態 WebP 或影片 | 避免 | 可達 WebP 的 10 倍大 |
<picture> 實現 AVIF → WebP → JPEG 回退。這能為每個瀏覽器提供它支援的最佳格式，又不犧牲相容性。
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="...">
</picture>| 圖片型別 | 最大寬度 | 目標大小（WebP） | 目標大小（JPEG） |
|---|---|---|---|
| 主視覺 / 橫幅 | 1920 px | <150 KB | <200 KB |
| 部落格文章特色圖 | 1200 px | <80 KB | <120 KB |
| 產品圖（電商） | 800 px | <60 KB | <100 KB |
| 縮圖 / 卡片圖 | 400 px | <20 KB | <35 KB |
| 頭像 / 個人照片 | 200 px | <10 KB | <15 KB |
| 背景（整屏） | 1440 px | <100 KB | <150 KB |
別在 800 px 的欄目裡放一張 4000 px 寬的圖。先縮放到最大顯示寬度。如果要兼顧 retina/HiDPI，用 CSS 顯示尺寸的 2 倍 —— 即 400 px 的欄目用 800 px 的圖，然後大力壓縮。
為獲得最佳隱私和速度，使用 ImgMin —— 所有處理都在你的瀏覽器中進行。拖入最多 20 張圖，壓縮，打包成 ZIP 下載。無上傳、無限制、無需賬號。
對伺服器端工作流（CI/CD、CMS），Sharp（Node.js）、Pillow（Python）或 cwebp（命令列）都是出色的自動化選擇。
給所有首屏以下的圖片加上 loading="lazy"。這會推遲載入，直到使用者滾動到圖片附近，節省頻寬並顯著改善首屏載入時間。
務必在 <img> 標籤上指定 width 和 height 屬性。這會在佈局中預留空間，防止累積佈局偏移（CLS）—— 另一項影響 SEO 的 Core Web Vitals 指標。
如果你在用 Cloudflare、Vercel 或 AWS CloudFront，開啟自動圖片最佳化。這些服務能向現代瀏覽器提供 WebP，並在全球邊緣節點快取最佳化版本 —— 顯著降低延遲。
add_image_size() 呼叫設定為與實際顯示尺寸匹配_800x.jpg 字尾來提供正確尺寸的圖片WebP 是 2026 年的最佳預設 —— 同等質量下比 JPEG 小 25–34%，被 97%+ 的瀏覽器支援。如果你的受眾用現代 Chrome 或 Firefox，可用 AVIF 獲得更好的壓縮。把 JPEG/PNG 留作回退。
主視覺圖：小於 200 KB。內容圖：小於 100 KB。縮圖：小於 30 KB。背景圖：小於 150 KB。這些是 WebP/JPEG 目標 —— 你的確切閾值取決於圖片複雜度。
會，而且是直接影響。Google 把 Core Web Vitals（LCP、CLS）作為排名訊號。未壓縮的大圖是 LCP 分數慢的首要原因。壓縮圖片能提升頁面速度、降低跳出率，並切實提升搜尋排名 —— 尤其在移動端。
最後更新：2026 年 4 月。瀏覽器支援百分比來自 caniuse.com。