終極網頁圖片優化指南，提升網站效能

網站效能直接影響用戶體驗、搜尋引擎排名與轉換率。圖片通常佔網頁總大小的 60-80%，因此圖片優化是提升網站效能最有效的方法之一。本指南將完整介紹網頁圖片優化的所有知識。

為什麼網頁圖片優化很重要

效能影響

未經優化的圖片會大幅拖慢網站速度：

載入時間：大圖顯著增加頁面載入時間
頻寬消耗：高流量消耗影響行動用戶
伺服器成本：大檔案需更多儲存與傳輸頻寬
用戶體驗：網站變慢導致跳出率升高

SEO 好處

Google 將頁面速度作為排名因素：

核心網頁指標（Core Web Vitals）：圖片優化提升 LCP（最大內容繪製）
行動優先索引：優化圖片提升行動裝置效能
用戶參與度：更快的網站讓訪客停留更久
爬蟲效率：搜尋引擎能更有效率地抓取優化後的網站

理解圖片優化基礎

檔案大小與品質的平衡

目標是在維持視覺品質的前提下，盡量減少圖片檔案大小：

品質門檻：大多數用戶無法分辨 85% 以上 JPEG 壓縮的品質差異
遞減效益：檔案大小隨品質提升呈指數成長，但畫質提升有限
視情境而定：不同圖片需採用不同優化策略

優化類型

有損壓縮（Lossy Compression）：透過移除部分圖片資料減少檔案體積

適用：照片、複雜圖片
格式：JPEG、WebP（有損模式）
典型壓縮率：60-90%

無損壓縮（Lossless Compression）：在不損失品質的前提下減少檔案體積

適用：圖形、Logo、截圖
格式：PNG、WebP（無損模式）
典型壓縮率：20-50%

網頁圖片優化步驟

步驟 1：選擇正確的圖片格式

JPEG：網頁照片標準格式

適用：照片、色彩豐富的複雜圖片
建議品質：75-85% 適用於大多數網頁圖片
優點：檔案小，通用性高
缺點：不支援透明，有損壓縮

PNG：適合圖形與透明需求

適用：Logo、圖形、帶文字的圖片
類型：PNG-8（256 色）、PNG-24（百萬色）
優點：無損壓縮，支援透明
缺點：照片檔案大

WebP：現代高效壓縮格式

適用：現代瀏覽器下的所有圖片類型
優勢：比 JPEG 小 25-35%，支援透明
注意：需為舊版瀏覽器提供降級方案

SVG：適合簡單圖形的向量格式

適用：圖示、簡單插畫、Logo
優勢：無限縮放，檔案極小
最佳實踐：優化 SVG 程式碼，移除多餘資料

步驟 2：優化圖片尺寸

響應式圖片（Responsive Images）：為不同裝置提供合適尺寸

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg"
     alt="描述">

Retina 螢幕考量：

為高 DPI 螢幕提供 2 倍尺寸圖片
使用 CSS 媒體查詢按需載入圖片
考慮用戶頻寬限制

步驟 3：壓縮技術

依場景設定圖片品質：

主視覺圖（Hero images）：85-90% 品質，確保視覺衝擊
內容圖片：75-85%，兼顧品質與效能
縮圖：60-75%，優先載入速度
背景圖片：70-80%，視重要性而定

進階壓縮技巧：

漸進式 JPEG：分多次載入，提升感知速度
最佳化 PNG 色板：盡量減少顏色數
移除中繼資料：去除 EXIF 等資訊減少體積

步驟 4：實現延遲載入（Lazy Loading）

延遲載入可提升首屏載入速度，僅在需要時載入圖片：

<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     loading="lazy" 
     alt="描述">

優點：

首屏載入更快
降低頻寬消耗
提升核心網頁指標分數
改善用戶體驗

進階優化技巧

內容傳遞網路（CDN）

現代 CDN 可自動優化圖片：

格式偵測：自動為支援的瀏覽器提供 WebP
品質優化：基於圖片內容的 AI 壓縮
響應式圖片：自動產生多尺寸
全球分發：就近節點加速圖片載入

關鍵圖片優化

首屏圖片（Above-the-fold）：優化初始可見圖片

使用高品質（85-90%）
預先載入關鍵圖片
主視覺圖不建議延遲載入

非首屏圖片（Below-the-fold）：優先減少體積

使用較低品質（70-80%）
實現延遲載入
可用占位圖策略

針對瀏覽器的優化

現代瀏覽器：善用新格式與功能

WebP 格式，95% 以上瀏覽器支援
AVIF 格式，極致壓縮
原生延遲載入支援

相容舊版瀏覽器：提供降級方案

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

效能監控與測試

關鍵指標

核心網頁指標（Core Web Vitals）：

LCP（最大內容繪製）：應低於 2.5 秒
FID（首次輸入延遲）：應低於 100 毫秒
CLS（累積版面位移）：應低於 0.1

其他指標：

FCP（首次內容繪製）：首個內容出現時間
Speed Index：頁面內容可見速度
Total Blocking Time：頁面無法回應用戶輸入的總時長

測試工具

Google PageSpeed Insights：全面效能分析

提供具體圖片優化建議
展示優化前後對比
支援行動端與桌面端分析

WebPageTest：詳細效能分解

瀑布圖展示圖片載入過程
支援多地點測試
可模擬不同網路速度

Lighthouse：Chrome 內建效能稽核

辨識優化機會
提供可執行建議
可追蹤效能變化

自動化與工作流程整合

建置流程整合

Webpack：建置時自動優化圖片

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              ['imagemin-mozjpeg', { quality: 80 }],
              ['imagemin-pngquant', { quality: [0.6, 0.8] }],
            ],
          },
        },
      }),
    ],
  },
};

Gulp：任務式圖片優化

const imagemin = require('gulp-imagemin');

gulp.task('images', () =>
  gulp.src('src/images/*')
    .pipe(imagemin([
      imagemin.mozjpeg({quality: 80}),
      imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest('dist/images'))
);

CMS 整合

WordPress：使用優化外掛

WP Smush、ShortPixel 或 Imagify
上傳時自動壓縮
批次優化現有圖片

內容管理：建立優化工作流程

上傳前調整圖片尺寸
針對不同圖片類型設定品質標準
培訓內容創作者掌握最佳實踐

行動端優化策略

行動優先

頻寬考量：行動用戶常有流量限制

優先減少檔案體積而非極致畫質
行動端建議 JPEG 品質 70-80%
根據網路速度自適應載入

螢幕尺寸優化：提供合適尺寸圖片

免費圖片壓縮

網頁圖像優化終極指南：提升性能的完整攻略