目錄
為何網站圖片優化至關重要
圖片常是頁面感覺緩慢的主要原因。 當頁面最大流量來自過大圖片、錯誤格式或響應式傳遞不佳，使用者體驗與搜尋表現都會受損。
因此圖片優化需系統化，而非隨意修正。必須有明確的格式、尺寸、傳遞及產出流程規劃。
加速頁面載入
適當尺寸與現代格式圖片減少傳輸負擔，加快重要視覺元素載入速度。
效能
提升搜尋能見度
更乾淨的圖片傳遞、更完整的元資料與更快的頁面，有助搜尋引擎爬蟲判斷與提升頁面品質。
搜尋影響
減少發布混亂
有系統的圖片流程避免團隊上傳過大原始檔、缺少元資料圖片及匯出不一致。
作業清晰度
網站常用圖片類型
大多數網站不需更多圖片類型，而是需要正確的圖片角色，並妥善標示與調整尺寸。以任務思維取代隨意上傳。
英雄圖或 LCP 圖片
這是頁面頂部的主要視覺，常為最大內容繪製元素，需精確調整尺寸，且預設不應延遲載入。
用途：第一印象與 LCP
內文插圖
這些圖片支援文章內容，應說明主題，使用合理的替代文字，並在桌面與行動裝置間良好縮放。
用途：輔助閱讀流程
卡片、縮圖與集散圖
這些較小圖片出現在分類頁、相關文章模組及導覽區，應使用比主視覺更小的版本。
用途：預覽與導覽
Open Graph 與社群預覽圖
此圖片決定頁面在聊天與社群平台分享時的呈現，是元資料資產，不僅是主視覺的複製品。
用途：分享預覽與點擊率
JSON-LD 結構化資料圖片
文章與產品結構化資料可引用主要圖片，讓搜尋引擎理解頁面關聯的主要視覺資產。
用途：結構完整與實體清晰
格式：選擇適合任務的檔案類型
最佳格式視圖片角色而定，多數網站需混合使用，非單一萬用格式。
| 格式 | 適用於 | 重要原因 |
|---|---|---|
| WebP | 日常網站圖片、卡片、預覽及大部分內容視覺 | WebP 是實用的預設格式，兼顧品質、壓縮率，且適合日常發布重複使用。 |
| AVIF | 特選大型攝影主視覺與高價值視覺，額外壓縮需謹慎處理 | AVIF 可產生更小檔案，但編碼較慢，適合選擇性優化，非全面預設。 |
| JPEG | 舊格式相容性與現代匯出前的原始檔 | JPEG 仍是常見輸入格式，但重要網站圖片不宜作為最終格式。 |
| PNG | 截圖、透明背景及需無損邊緣的介面資產 | PNG 適用於介面圖形，但對一般攝影內容通常過於龐大。 |
| SVG | 圖示、圖表、標誌與簡單插圖 | SVG 可無損縮放，且常優於點陣格式，適合銳利線條圖形。 |
日常使用 WebP，AVIF 則用於少數需最大壓縮的攝影圖片。
日常 WebP 流程請參考 JPG 轉 WebP 工作流程指南 。選擇性主視覺壓縮請參考 JPEG 轉 AVIF 指南 .
尺寸調整：響應式圖片、尺寸與版面穩定性
網站緩慢不僅是格式問題，常是同一過大圖片用於所有螢幕尺寸。響應式尺寸可解決此問題。
- 產生多種寬度，讓手機、平板與桌面裝置都能取得合適圖片。
- 設定寬高以預留空間，減少版面位移。
- 卡片與相關內容使用較小版本，避免到處重複使用完整主視覺。
- 僅在確實需要放大、下載或燈箱效果時保留大型原始檔。
傳遞標記範例
內容圖片使用小且明確的設定，主視覺保留預先載入。此標記有助瀏覽器行為與 Lighthouse 評測易於理解。
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>傳遞優先順序：延遲載入、最大內容繪製與核心網頁指標
格式與尺寸確定後，傳遞成為關鍵。主要原則是：將首屏圖片視為優先資產，而非事後考量。
英雄圖必做事項
主視覺圖片應壓縮並調整至實際版面尺寸，且若為最大內容繪製元素，應預先載入。
使用現代格式、明確尺寸，避免首屏堆疊多個大型橫幅。
影響傳遞的因素
主視覺延遲載入、手機使用桌面尺寸圖片、攝影內容使用過大 PNG，仍是常見錯誤。
這些問題削弱 Lighthouse 評分與真實使用者體驗。
語境：檔名、替代文字與周邊文字
圖片優化不僅是檔案大小，搜尋引擎與使用者也需了解圖片內容及其頁面意義。
- 使用描述主題的檔名，避免相機匯出或預設名稱。
- 圖片有意義時撰寫替代文字，避免堆砌關鍵字。
- 標題、說明與文字應與圖片內容一致。
- 確保圖片角色與頁面主題相符，而非隨意置入。
元資料：Open Graph 與 JSON-LD 圖片的重要性
頁面瀏覽正常，但若忽略元資料圖片，搜尋發現力仍會薄弱，這是最容易改善的品質缺口之一。
Open Graph 圖片
此設定決定頁面外部分享時的呈現，優質 Open Graph 圖片提升社群與聊天平台的點擊率與質感。
JSON-LD 圖片屬性
結構化資料讓搜尋引擎獲得更清晰的內容包，加入相關圖片強化標題、描述與主要視覺的連結。
如果您正在使用 Blazor 開發，請搭配本指南使用 Blazor 元資料元件指南 ，以確保頁面標題、描述、規範連結、Open Graph 圖像及結構化資料保持一致。
流程：網站圖片的系統化作業
- 匯出前先定義圖片角色：主視覺、內文、卡片、Open Graph 或結構化資料圖片。
- 依任務選擇格式：日常用 WebP，特定大型照片用 AVIF，向量圖用 SVG，需無損透明用 PNG。
- 依版面匯出適當尺寸，避免到處使用過大原始檔。
- 設定傳遞優先順序，讓主視覺成為優先資產，次要圖片保持高效。
- 發布前檢查元資料圖片、替代文字與檔名。
若選擇工具支援此流程， 最佳網頁圖片轉檔指南 涵蓋本地與線上工具的選擇。
網站圖片優化檢查清單
- 每個重要頁面在匯出前都有明確的圖片角色規劃。
- WebP 處理日常網站圖片，除非有更強的選擇性格式需求。
- 大型攝影圖片僅在額外節省值得時使用 AVIF。
- 主視覺依版面調整尺寸，且若為最大內容繪製元素，則不延遲載入。
- 卡片與集散圖使用比頁面英雄圖更小的變體。
- Open Graph 圖片用於分享與預覽。
- 結構化資料包含相關主要圖片。
- 設定寬高以避免版面跳動。
- 替代文字與檔名清楚描述圖片角色。
- 流程足夠一致，避免同樣錯誤在下次發布重複出現。