優化網站圖片：發佈前完成頁面全面檢查清單

先檢查

從瀏覽器下載內容開始

設計檔與媒體資料夾無法反映用戶實際取得的內容，瀏覽器會顯示載入的圖片 URL、顯示尺寸、頁面是否保留空間，以及是否在可用小檔案處重複使用大型檔案。

圖片規劃

轉檔前規劃每張重要圖片

圖片規劃將本指南與轉檔文章分開，釐清每個圖片區域的需求：尺寸、載入順序、備援、元資料角色，並做最終檢查確保頁面使用正確檔案。

規劃指出檔案需新版本時，使用 圖片轉檔指南 選擇下一步。一般 WebP 工作用 JPG 轉 WebP 指南，AVIF 指南僅用於仍需更多壓縮的大型照片。

圖片尺寸

為每個圖片區域設定明確尺寸

響應式圖片需 HTML 與版面匹配，測量區域、選擇幾個實用寬度、保留長寬比，避免因原始檔存在而傳送過大檔案。

簡易檢查：若 360 像素卡片下載 2400 像素檔案，壓縮不是主要問題，頁面需要較小圖片版本或 HTML 指向錯誤檔案。

載入順序

刻意讓首張圖片載入

塑造首屏的圖片需與頁面下方圖片不同規則，找出可能的 LCP 圖片，避免誤用延遲載入，並讓下方圖片保持靜默直到需要。

1. 1

   命名 LCP 圖片

   若首張重要圖片可能成為 Largest Contentful Paint，請勿誤用延遲載入。

2. 2

   讓下方圖片保持低調

   首屏以下的圖片通常應使用延遲載入與非同步解碼。

3. 3

   檢查 CSS 背景

   裁切過的背景仍可能下載大型檔案，請為可見區域使用適當尺寸的檔案。

4. 4

   檢查重複請求

   當同一個過大檔案重複數十次，小卡片圖片會變得很耗資源。

HTML

為測量區域使用響應式 HTML

重要圖片需明確告訴瀏覽器選擇，以下範例展示寬度選項、sizes、固定尺寸與備援。根據區域調整載入行為，而非習慣。

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="儀表板截圖顯示上傳流程"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

搜尋與分享

讓圖片、替代文字與元資料說同一個故事

圖片 SEO 不只是加關鍵字。可見圖片、附近文字、有用的替代文字、Open Graph 標籤與 JSON-LD 圖片連結應清楚描述同一頁面，裝飾圖片則保持裝飾性質。

檢查發現社交預覽薄弱時，繼續使用 打開圖形圖像指南。當結構化與元標籤有問題時，使用 Blazor 元資料指南 以保持 JSON-LD 與頁面元資料一致。

步驟

每頁簡易圖片檢查

1. 1

   打開實際頁面

   從目前 URL 開始，不是資產資料夾，記錄實際載入的圖片。

2. 2

   制定圖片規劃

   為每張重要圖片記錄目標寬度、長寬比、載入順序、備援方案與元資料角色。

3. 3

   只轉換變更部分

   只對檢查出需要的檔案使用轉檔工具，不要重新匯出整個媒體資料夾。

4. 4

   更新 HTML 與元資料

   將 srcset、sizes、尺寸、Open Graph 與 JSON-LD 圖片連結指向準備好的檔案。

5. 5

   驗證瀏覽器輸出

   檢查頁面、網路請求、社交元資料、結構化資料與行動版面。

6. 6

   保留規則以便下次使用

   記錄圖片決策，避免未來更新時再次猜測。

檢查清單

發佈前圖片檢查清單

文章、登陸頁或產品頁上線前使用此清單，捕捉僅靠轉檔無法發現的頁面問題。