圖片通常占一個網站總頁面重量的 50-70%，因此圖片最佳化是提升網站效能最有影響力的方法之一。經過妥善壓縮與最佳化的圖片，能帶來更快的頁面載入、更好的 SEO 排名、更佳的使用者體驗，以及更低的主機成本。本完整指南涵蓋您在 2025 年為網站壓縮與最佳化圖片所需了解的一切。
為什麼網站圖片最佳化很重要
頁面載入速度與使用者體驗
實際影響：
- 53% 的行動裝置使用者會放棄載入超過 3 秒的網站
- 每多 1 秒的延遲，轉換率就下降 7%
- 載入快速的網站，平均工作階段時長多出 70%
圖片最佳化的好處：
- 頁面大小減少 40-80%
- 頁面載入速度提升 2-5 倍
- 更好的行動裝置體驗
- 更低的跳出率
SEO 與 Google 排名
Google 的觀點：
- 頁面速度是直接的排名因素（桌面端自 2010 年起，行動端自 2018 年起）
- Core Web Vitals 於 2021 年成為排名訊號
- 速度較快的網站被爬取的頻率更高
- 更好的使用者指標（跳出率、停留時間）能提升排名
圖片 SEO 的好處：
- 更高的搜尋排名
- 提升圖片搜尋的能見度
- 更多自然流量
- 更好的行動搜尋表現
對 Core Web Vitals 的影響
| 指標 | 衡量什麼 | 圖片的影響 | 良好門檻 |
|---|---|---|---|
| LCP（Largest Contentful Paint） | 載入效能 | 主視覺圖片直接影響 LCP | < 2.5 秒 |
| FID（First Input Delay） | 互動性 | 大型圖片會阻塞主執行緒 | < 100ms |
| CLS（Cumulative Layout Shift） | 視覺穩定性 | 未指定尺寸的圖片會造成位移 | < 0.1 |
| INP（Interaction to Next Paint） | 回應速度 | 笨重的圖片會延遲互動 | < 200ms |
關鍵：最佳化的圖片是通過 Core Web Vitals 的必要條件，而這會直接影響搜尋排名。
成本節省
頻寬成本：
- 未最佳化的網站：平均每頁 5MB × 100,000 訪客 = 500GB／月
- 最佳化後的網站：平均每頁 1MB × 100,000 訪客 = 100GB／月
- 節省：400GB／月 = 每月 $40-200（視主機方案而定）
CDN 成本：
- CloudFlare：每 GB $0.01-0.05
- Amazon CloudFront：每 GB $0.085
- 節省 400GB = 每月 $4-34
網站圖片的最佳規格
各網站區塊的圖片尺寸
| 網站區塊 | 建議尺寸 | 檔案大小目標 | 品質 | 格式 |
|---|---|---|---|---|
| 主視覺／橫幅 | 1920×1080px - 2560×1440px | 150-400KB | 80-85% | JPEG/WebP |
| 部落格精選圖 | 1200×630px（16:9） | 100-200KB | 75-85% | JPEG/WebP |
| 部落格內文圖 | 800×600px - 1200×900px | 80-150KB | 75-80% | JPEG/WebP |
| 商品圖片 | 1000×1000px - 2000×2000px | 100-300KB | 85-90% | JPEG/WebP |
| 縮圖 | 300×300px - 600×600px | 20-60KB | 70-80% | JPEG/WebP |
| 相簿圖片 | 1200×800px | 100-200KB | 80-85% | JPEG/WebP |
| 背景圖片 | 1920×1080px | 150-300KB | 75-80% | JPEG/WebP |
| 標誌（含透明背景） | 200×100px - 400×200px | 10-50KB | 100% | PNG/SVG |
| 圖示 | 32×32px - 128×128px | 2-10KB | 100% | PNG/SVG |
| Open Graph／社群 | 1200×630px | 100-200KB | 80% | JPEG/PNG |
| 網站圖示（Favicon） | 32×32px、192×192px、512×512px | 2-15KB | 100% | PNG/ICO |
各頁面類型的檔案大小目標
| 頁面類型 | 總頁面大小目標 | 圖片預算 | 圖片數量 |
|---|---|---|---|
| 首頁 | 1-2MB | 500KB - 1MB | 5-15 張圖片 |
| 部落格文章 | 800KB - 1.5MB | 400KB - 800KB | 3-8 張圖片 |
| 商品頁 | 1-2.5MB | 600KB - 1.5MB | 5-20 張圖片 |
| 分類／封存頁 | 1-2MB | 600KB - 1MB | 10-30 張縮圖 |
| 到達頁 | 800KB - 1.5MB | 400KB - 800KB | 3-10 張圖片 |
如何為網站壓縮圖片：逐步教學
步驟 1：選擇正確的格式
格式決策樹：
Is it a photograph or complex image?
├─ YES → Use JPEG (or WebP for modern browsers)
└─ NO → Is transparency required?
├─ YES → Use PNG (or WebP with alpha)
└─ NO → Is it a simple graphic/logo?
├─ YES → Use SVG (scalable, tiny file size)
└─ NO → Use PNG-8 or JPEG
格式建議：
JPEG：
- 最適合：相片、複雜圖片、漸層
- 壓縮：失真（品質可調整）
- 檔案大小：小
- 透明背景：否
- 使用情境：80% 的網站圖片
PNG：
- 最適合：螢幕截圖、圖形、標誌、含文字的圖片
- 壓縮：無損
- 檔案大小：大
- 透明背景：是
- 使用情境：需要像素級完美品質的圖形
WebP：
- 最適合：所有圖片類型（相片與圖形）
- 壓縮：提供失真與無損兩種選項
- 檔案大小：比 JPEG/PNG 小 25-35%
- 透明背景：是
- 使用情境：搭配後備方案的現代網站
- 瀏覽器支援度：95%＋（所有現代瀏覽器）
AVIF：
- 最適合：尖端最佳化
- 壓縮：失真與無損
- 檔案大小：比 JPEG 小 50%
- 透明背景：是
- 使用情境：漸進式增強
- 瀏覽器支援度：85%＋（持續成長中）
SVG：
- 最適合：標誌、圖示、簡單圖形
- 壓縮：向量（可無限縮放）
- 檔案大小：極小（通常 1-10KB）
- 透明背景：是
- 使用情境：任何可縮放的圖形
步驟 2：將圖片調整為顯示尺寸
為什麼要先調整大小：
- 提供一張 4000×3000px 的圖片卻只以 800×600px 顯示，會浪費 93% 的頻寬
- 尺寸越小 = 壓縮效果越好 = 載入越快
- 縮短使用者端的處理時間
如何判斷顯示尺寸：
- 在瀏覽器 DevTools 中檢查元素
- 查看實際算繪出的尺寸
- 將 Retina 顯示器（2 倍解析度）納入考量
- 使用響應式圖片尺寸
Retina 顯示器策略：
- 顯示尺寸：寬 800px
- Retina 尺寸：寬 1600px（2 倍）
- 以較高品質壓縮以維持清晰度
範例工作流程：
# Display width: 800px
# Retina: 1600px actual image
# But compress more aggressively to keep file size down
convert original.jpg -resize 1600x -quality 75 optimized.jpg
步驟 3：以最佳品質設定進行壓縮
各圖片類型的品質建議：
| 圖片類型 | JPEG 品質 | WebP 品質 | 備註 |
|---|---|---|---|
| 主視覺圖片 | 80-85% | 75-80% | 位置顯眼，需要品質 |
| 商品相片 | 85-90% | 80-85% | 對銷售至關重要 |
| 部落格圖片 | 75-80% | 70-75% | 取得良好平衡 |
| 縮圖 | 70-75% | 65-70% | 顯示尺寸小，可積極壓縮 |
| 背景圖片 | 70-80% | 65-75% | 可壓縮得更多 |
| 人像 | 80-85% | 75-80% | 臉部細節很重要 |
| 風景 | 75-80% | 70-75% | 留意天空的色帶現象 |
使用 TinyImagePro（建議）：
- 前往 TinyImagePro.com
- 上傳網站圖片
- 選擇「Website」預設組合，或手動設定品質
- 選擇輸出格式（JPEG、PNG、WebP）
- 壓縮並下載
- 上傳至網站
批次處理：
- 一次處理所有圖片以維持一致性
- 對相似類型的圖片使用相同的品質設定
- 維持有條理的資料夾結構
步驟 4：實作響應式圖片
為什麼需要響應式圖片：
- 行動裝置使用者不需要桌面尺寸的圖片
- 在較小的螢幕上節省頻寬
- 提升行動裝置效能
HTML srcset 實作：
<img
src="image-800w.jpg"
srcset="
image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w,
image-1600w.jpg 1600w
"
sizes="(max-width: 400px) 400px,
(max-width: 800px) 800px,
(max-width: 1200px) 1200px,
1600px"
alt="Description"
width="1600"
height="900"
loading="lazy"
>
好處：
- 瀏覽器會選擇合適的圖片尺寸
- 行動裝置使用者取得較小的圖片
- 桌面使用者取得高品質圖片
- 自動最佳化
建立響應式圖片組：
- 建立 3-4 種尺寸變體（400px、800px、1200px、1600px）
- 各自以合適的品質壓縮
- 使用
srcset與sizes屬性 - 務必指定寬度與高度以避免 CLS
步驟 5：使用現代圖片格式並搭配後備方案
現代圖片堆疊：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
運作方式：
- 瀏覽器優先嘗試 AVIF（壓縮效果最佳）
- 若不支援 AVIF 則退回 WebP
- 對於舊版瀏覽器則退回 JPEG
- 全自動，不需要 JavaScript
檔案大小比較：
- 原始 JPEG（1200×800）：450KB
- 最佳化 JPEG（85% 品質）：180KB（減少 60%）
- WebP（80% 品質）：120KB（比 JPEG 小 33%）
- AVIF（75% 品質）：80KB（比 WebP 小 33%）
轉換工作流程：
# Create optimized JPEG
convert original.jpg -quality 85 image.jpg
# Create WebP version
cwebp -q 80 original.jpg -o image.webp
# Create AVIF version
avifenc -s 75 original.jpg image.avif
進階網站圖片最佳化技巧
圖片延遲載入
這是什麼：圖片只在即將進入可視範圍時才載入。
好處：
- 加快初始頁面載入
- 為不向下捲動的使用者減少頻寬
- 更好的 Core Web Vitals 分數
- 更低的伺服器成本
實作方式（原生）：
<img src="image.jpg" alt="Description" loading="lazy">
最佳實務：
- 不要對首屏（above-the-fold）圖片使用延遲載入（會傷害 LCP）
- 對首屏以下的所有內容使用延遲載入
- 在所有部落格文章與長頁面上使用
- 與響應式圖片搭配使用
首屏 vs 首屏以下：
<!-- Above the fold (hero image): DON'T lazy load -->
<img src="hero.jpg" alt="Hero" loading="eager">
<!-- Below the fold: DO lazy load -->
<img src="content.jpg" alt="Content" loading="lazy">
網頁用漸進式 JPEG
這是什麼：JPEG 分多次載入，先顯示低解析度預覽，再逐步提升清晰度。
好處：
- 更好的感知效能
- 使用者能立即看到內容
- 檔案大小縮小 2-5%
- 在慢速連線下有更好的使用者體驗
何時使用：
- 超過 30KB 的圖片
- 主視覺圖片
- 精選圖片
- 任何位置顯眼的圖片
如何建立：
# ImageMagick
convert input.jpg -interlace Plane output.jpg
# cjpeg (MozJPEG)
cjpeg -progressive -quality 85 input.jpg > output.jpg
TinyImagePro：會自動為超過 30KB 的圖片建立漸進式 JPEG。
圖示用的 CSS Sprites
這是什麼：將多張小圖片（圖示）合併成一個檔案。
好處：
- 減少 HTTP 請求（對效能至關重要）
- 加快頁面載入
- 更好的快取
- 降低伺服器負載
Sprite Sheet 範例：
icons.png (400×100px containing 4 icons)
Icon 1: 0,0,100px,100px
Icon 2: 100,0,100px,100px
Icon 3: 200,0,100px,100px
Icon 4: 300,0,100px,100px
CSS 實作：
.icon {
background-image: url('icons.png');
width: 100px;
height: 100px;
}
.icon-search { background-position: 0 0; }
.icon-cart { background-position: -100px 0; }
.icon-user { background-position: -200px 0; }
.icon-menu { background-position: -300px 0; }
更好的替代方案（2025）：使用 SVG sprites 或圖示字型以獲得更佳的可縮放性。
關鍵圖片與預先載入
預先載入關鍵圖片：
<head>
<!-- Preload hero image for faster LCP -->
<link rel="preload" as="image" href="hero.webp" type="image/webp">
<link rel="preload" as="image" href="hero.jpg" type="image/jpeg">
</head>
何時要預先載入：
- 首屏主視覺圖片
- 標誌
- 關鍵背景圖片
- LCP 圖片（Largest Contentful Paint 元素）
何時「不要」預先載入：
- 首屏以下的圖片
- 非關鍵圖片
- 超過 2-3 張圖片（效益遞減）
使用 CDN 傳遞圖片
為什麼要使用 CDN：
- 從離使用者更近的伺服器提供圖片
- 全球載入速度提升 40-60%
- 降低來源伺服器負載
- 自動壓縮與最佳化（部分 CDN）
- 更好的快取管理
熱門圖片 CDN：
| CDN | 主要特色 | 定價 |
|---|---|---|
| Cloudflare Images | 自動最佳化、WebP/AVIF 轉換、調整大小 | $5／月 ＋ 每 100,000 張圖片 $1 |
| Cloudinary | AI 驅動最佳化、轉換、響應式圖片 | 免費方案：25GB／月，Pro 方案 $89／月 |
| imgix | 即時圖片處理、響應式圖片 | 免費方案：1,000 張母圖 |
| Amazon CloudFront | 全球分發、與 S3 整合 | 用多少付多少：$0.085／GB |
| KeyCDN | 快速傳遞、支援 WebP | $0.04/GB |
基本 CDN 設定：
<!-- Before: Origin server -->
<img src="https://yoursite.com/images/photo.jpg">
<!-- After: CDN -->
<img src="https://cdn.yoursite.com/images/photo.jpg">
進階 CDN 搭配轉換（Cloudinary 範例）：
<img src="https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/photo.jpg">
參數：w_800（寬度）、q_auto（自動品質）、f_auto（自動格式 WebP/AVIF）
各平台專屬最佳化
WordPress 圖片最佳化
內建功能：
- WordPress 會自動產生多種圖片尺寸（縮圖、中、大）
- 預設啟用延遲載入（WordPress 5.5＋）
- 自動為圖片加上 srcset
建議外掛：
1. ShortPixel Image Optimizer：
- 失真、光澤（glossy）、無損壓縮
- WebP 轉換
- 批次最佳化
- 免費：100 張圖片／月
2. Imagify：
- 3 種最佳化等級
- 支援 WebP 與 AVIF
- 批次最佳化
- 免費：20MB／月
3. Smush：
- 無損壓縮
- 延遲載入
- 批次壓縮
- 提供免費版
4. EWWW Image Optimizer：
- 本機與雲端壓縮
- WebP 轉換
- 上傳時自動最佳化
- 提供免費與專業版
WordPress 設定：
// functions.php - Set custom image sizes
add_image_size('custom-large', 1600, 9999, false);
add_image_size('custom-medium', 800, 9999, false);
add_image_size('custom-small', 400, 9999, false);
// Disable unnecessary image sizes to save space
function disable_unused_image_sizes($sizes) {
unset($sizes['medium_large']); // 768px
unset($sizes['1536x1536']); // 2x medium_large
unset($sizes['2048x2048']); // 2x large
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');
Shopify／電商最佳化
電商圖片需求：
- 商品圖片：高品質（85-90% 壓縮）
- 多角度：每件商品 4-8 張圖片
- 縮放功能：提供 2000×2000px 的圖片
- 縮圖：積極壓縮（70-75%）
- 一致性：各商品維持相同的長寬比
Shopify 最佳實務：
- 上傳 2000×2000px 的商品圖片
- Shopify 會自動建立較小的版本
- 使用 WebP 格式（Shopify 支援）
- 使用 Shopify 的圖片 CDN（自動）
- 為了 SEO 採用描述性的檔名：
product-name-blue.jpg
Shopify 圖片最佳化 App：
- TinyIMG SEO & Image Optimizer
- Crush.pics Image Optimizer
- Image Optimizer by Booster Apps
商品圖片規格：
Main Product Image: 2000×2000px, 85-90% quality, 200-400KB
Thumbnail Grid: 600×600px, 75-80% quality, 40-80KB
Zoom View: 2500×2500px or higher, 90% quality, 400-600KB
Lifestyle Images: 1600×1200px, 80-85% quality, 150-300KB
靜態網站產生器（Next.js、Gatsby）
Next.js 圖片最佳化：
import Image from 'next/image'
export default function ProductImage() {
return (
<Image
src="/images/product.jpg"
width={800}
height={600}
alt="Product"
loading="lazy"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..." // Low-res placeholder
quality={85}
/>
)
}
Next.js 的好處：
- 自動圖片最佳化
- 自動 WebP/AVIF 轉換
- 響應式圖片（srcset）
- 延遲載入
- 載入期間的模糊佔位圖
- 透過自動指定尺寸避免 CLS
Gatsby Image：
import { GatsbyImage, getImage } from "gatsby-plugin-image"
export default function HeroImage({ data }) {
const image = getImage(data.heroImage)
return (
<GatsbyImage
image={image}
alt="Hero"
loading="eager" // Above-the-fold
/>
)
}
Gatsby 的好處：
- 建置階段的圖片最佳化
- 自動響應式圖片
- WebP 轉換
- 模糊漸顯（blur-up）效果
- 支援藝術指導（art direction）
監控與測試圖片效能
效能測試工具
Google PageSpeed Insights：
- 測試 Core Web Vitals
- 提供圖片最佳化建議
- 顯示「圖片尺寸是否適當」的警告
- 建議採用次世代格式（WebP、AVIF）
GTmetrix：
- 瀑布圖（顯示圖片載入時序）
- 圖片最佳化報告
- 歷史效能追蹤
- 壓縮建議
WebPageTest：
- 詳細的效能指標
- 影格條（filmstrip）檢視（視覺化載入進程）
- 圖片分析
- 多地點測試
Chrome DevTools：
1. Open DevTools (F12)
2. Network tab → Filter by "Img"
3. Reload page
4. Check:
- Total image size
- Number of images
- Load time for each image
- Images blocking render
Core Web Vitals 最佳化
LCP（Largest Contentful Paint）— 目標：< 2.5s：
常見元凶：
- 未最佳化的主視覺圖片
- 大型背景圖片
- 緩慢的伺服器回應
解決方法：
- 最佳化主視覺圖片（< 200KB）
- 預先載入 LCP 圖片
<link rel="preload" as="image" href="hero.webp" type="image/webp">
- 使用 CDN 加快傳遞
- 更積極地壓縮
- 使用 WebP/AVIF 格式
CLS（Cumulative Layout Shift）— 目標：< 0.1：
常見元凶：
- 未指定 width/height 屬性的圖片
- 圖片載入太晚而造成內容位移
- 未保留空間的廣告／嵌入內容
解決方法：
- 務必指定寬度與高度
<img src="image.jpg" width="800" height="600" alt="..." loading="lazy">
- 使用 CSS aspect-ratio
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
- 為延遲載入的圖片預留空間
INP（Interaction to Next Paint）— 目標：< 200ms：
常見元凶：
- 大量處理圖片的笨重 JavaScript
- 阻塞主執行緒的圖片輪播
- 在互動期間解碼的大型圖片
解決方法：
- 最佳化輪播圖片（每張 < 100KB）
- 使用 CSS transforms 製作圖片動畫
- 以非同步方式解碼圖片
<img src="image.jpg" decoding="async" alt="...">
設定效能預算
什麼是效能預算：
- 允許的最大資源大小
- 防止效能退化
- 在開發期間強制執行
圖片預算範例：
{
"resourceSizes": {
"total": 1500, // Total page size in KB
"image": 800, // Total image size in KB
"script": 300,
"stylesheet": 100,
"other": 300
},
"resourceCounts": {
"image": 20, // Maximum number of images
"script": 10,
"stylesheet": 5
}
}
強制執行工具：
- Lighthouse CI（自動化測試）
- webpack-bundle-analyzer（建置分析）
- bundlesize（npm 套件）
Lighthouse CI 範例：
# .lighthouserc.json
{
"ci": {
"assert": {
"assertions": {
"total-byte-weight": ["error", {"maxNumericValue": 1500000}],
"uses-optimized-images": "error",
"uses-webp-images": "warn",
"modern-image-formats": "warn"
}
}
}
}
常見網站圖片問題與解決方案
問題：嚴重的版面位移（CLS）
症狀：圖片載入時內容跳來跳去。
原因：圖片未指定尺寸。
解決方法：
<!-- BAD: No dimensions -->
<img src="image.jpg" alt="Photo">
<!-- GOOD: Specified dimensions -->
<img src="image.jpg" width="800" height="600" alt="Photo">
<!-- BEST: Modern aspect-ratio CSS -->
<img src="image.jpg" alt="Photo" style="aspect-ratio: 16/9; width: 100%; height: auto;">
問題：LCP 緩慢（Largest Contentful Paint）
症狀：主視覺圖片需要 3-5 秒以上才能完整算繪。
原因：
- 主視覺圖片過大（> 500KB）
- 沒有預先載入
- 會阻塞算繪的資源
- 緩慢的伺服器／CDN
解決方法：
- 將主視覺壓縮至 < 200KB
- 預先載入主視覺圖片：
<link rel="preload" as="image" href="hero.webp" type="image/webp">
- 使用 CDN
- 最佳化關鍵算繪路徑（Critical Rendering Path）
問題：圖片在 Retina 顯示器上看起來有顆粒感
原因：在 2 倍（Retina）顯示器上提供 1 倍的圖片。
解決方法：提供 2 倍圖片，但壓縮得更多：
<img
src="image-800w.jpg"
srcset="image-800w.jpg 1x, image-1600w.jpg 2x"
alt="Product"
>
其中 image-1600w.jpg 壓縮得更積極（70-75% 而非 85%），以維持相近的檔案大小。
問題：全站圖片品質不一致
原因：壓縮設定不一致。
解決方法：建立壓縮準則並使用批次處理：
Hero Images: 85% quality, WebP, < 200KB
Product Photos: 85% quality, WebP, < 250KB
Blog Images: 80% quality, WebP, < 150KB
Thumbnails: 75% quality, WebP, < 60KB
Backgrounds: 75% quality, WebP, < 200KB
使用 TinyImagePro 的批次壓縮搭配預設組合以維持一致性。
問題：舊版瀏覽器不支援 WebP/AVIF
原因：與舊版瀏覽器的相容性。
解決方法：務必提供後備方案：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback for all browsers">
</picture>
瀏覽器會自動選擇支援度最好的格式。
最佳實務檢查清單
上傳前
✅ 將圖片調整大小 至顯示尺寸（將 2 倍 Retina 納入考量） ✅ 選擇正確格式（相片用 JPEG、圖形用 PNG、標誌用 SVG） ✅ 適當壓縮（依使用情境採用 75-90% 品質） ✅ 移除 EXIF 中繼資料（可省下 10-50KB，並提升隱私） ✅ 建立多種尺寸 以供響應式圖片使用（400w、800w、1200w、1600w） ✅ 轉換為 WebP/AVIF（搭配 JPEG/PNG 後備方案）
HTML 實作
✅ 務必指定 width 與 height 屬性（避免 CLS）
✅ 對首屏以下的圖片使用延遲載入
✅ 為響應式圖片實作 srcset
✅ 加入描述性的 alt 文字（SEO 與無障礙）
✅ 僅對首屏圖片使用 loading="eager"
✅ 為現代格式實作 <picture> 元素
✅ 預先載入 LCP 圖片（主視覺／橫幅）
✅ 對大型圖片使用 decoding="async"
效能最佳化
✅ 將每頁圖片總重量 控制在 800KB 以下 ✅ 限制圖片數量（每頁 < 20 張為理想） ✅ 使用 CDN 進行全球傳遞 ✅ 啟用瀏覽器快取（圖片設為 1 年） ✅ 每月監控 Core Web Vitals ✅ 設定效能預算 並強制執行 ✅ 在慢速 3G 連線上測試 ✅ 定期以 Lighthouse 稽核
常見問題
Q：網站相片最適合的圖片格式是什麼？
A：JPEG 相容性最高，WebP 則能帶來 25-35% 更好的壓縮並可退回 JPEG。請使用 <picture> 元素同時提供兩者。
Q：網站圖片該壓縮到什麼程度？ A：大多數圖片採用 75-85% 品質。主視覺圖片可用 85%，縮圖則用 70-75%。大型圖片以 < 200KB 為目標，內文圖片以 < 100KB 為目標。
Q：我該使用 WebP 還是 AVIF？ A：兩者都用並搭配後備方案。對支援的瀏覽器提供 AVIF（最小），退回 WebP（支援度佳），再退回 JPEG（通用）。
Q：如何為行動裝置最佳化圖片？ A：使用搭配 srcset 的響應式圖片、對行動裝置提供較小的圖片、實作延遲載入，並更積極地壓縮（70-80% 品質）。
Q：是什麼造成圖片載入緩慢？ A：檔案太大、未經壓縮、缺少延遲載入、緩慢的伺服器／CDN、圖片過多、會阻塞算繪的資源。
Q：如何修正「以次世代格式提供圖片」的警告？
A：使用 TinyImagePro 或命令列工具將圖片轉換為 WebP 或 AVIF，接著以 <picture> 元素搭配後備方案來實作。
Q：我該對主視覺圖片使用延遲載入嗎？
A：不行！絕對不要對首屏圖片使用延遲載入，尤其是主視覺圖片。請使用 loading="eager" 或不加 loading 屬性。對主視覺圖片使用延遲載入會傷害 LCP。
Q：響應式圖片如何搭配 srcset 運作？ A：瀏覽器會根據螢幕尺寸與解析度選擇合適的圖片。提供 3-4 種尺寸變體，瀏覽器只會下載其中一種。
Q：怎樣才算良好的 LCP 分數？ A：低於 2.5 秒為「良好」，2.5-4.0 秒為「需要改善」，超過 4.0 秒為「不佳」。最佳化的主視覺圖片是良好 LCP 的關鍵。
Q：我該多久稽核一次圖片效能？ A：每月稽核最為理想。在任何重大變更後執行 Lighthouse 測試。並以 Lighthouse CI 設定自動化監控。
結語
網站圖片最佳化是您能為效能、SEO 與使用者體驗所做的最高效益改善之一。妥善的圖片壓縮與實作能將頁面載入時間縮短 40-80%、大幅提升 Core Web Vitals 分數，並推升搜尋排名。
重點整理：
- 壓縮圖片 至 75-85% 品質，可減少 60-80% 檔案大小
- 使用現代格式（WebP、AVIF）並搭配 JPEG/PNG 後備方案
- 實作響應式圖片 並以 srcset 進行行動裝置最佳化
- 對首屏以下的所有圖片使用延遲載入
- 務必指定尺寸 以避免版面位移
- 預先載入 LCP 圖片（通常是主視覺圖片）
- 使用 CDN 進行全球快速傳遞
- 監控 Core Web Vitals 並設定效能預算
- 目標：主視覺圖片 < 200KB，內文圖片 < 100KB
準備好最佳化您的網站圖片了嗎？立即試用我們的 免費圖片壓縮工具，馬上獲得專業成果。
相關指南：
- 壓縮 JPEG 圖片 — JPEG 最佳化技巧
- 壓縮 PNG 圖片 — PNG 壓縮指南
- 批次壓縮圖片 — 處理多張圖片
- 壓縮圖片至 1MB — 鎖定特定大小
