圖片最佳化
尺寸、格式（AVIF/WebP）、lazy、priority
圖片優化像行李打包——同一趟旅行，會打包的人一個登機箱，不會打包的人三個托運箱付超重費（流量與速度都是錢）。
03為什麼是現在學
圖片通常佔頁面重量一半以上，是速度優化裡投報率最高的一塊：格式、尺寸、載入時機三件事就能砍掉大半。
04白話理解（對客戶簡報可直接引用）
四件套：①格式——照片用 AVIF/WebP，圖示用 SVG ②尺寸——輸出多種尺寸（srcset），別讓手機下載桌機大圖 ③時機——首屏外 lazy loading、首屏主圖 priority ④alt——每張有意義的圖寫描述（見 c16，這是內容也是無障礙）。
05工具箱
- ▸next/image 或 CDN 圖床（自動格式/尺寸） — 框架級解法，一次到位
- ▸PSI 的圖片相關建議 — 哪幾張最肥直接點名
06怎麼做 · SOP 3 步（每步標產出物）
- 1找出最肥的 20 張圖→ 肥圖清單
- 2導入自動化圖片管線（元件或 CDN）→ 圖片管線上線
- 3上稿 SOP 訂圖片規範（尺寸上限/格式）→ 編輯規範更新
07場景應用（實戰經驗）
- ◆設計師交付的 banner 原檔 6000px 直接上站——不是誰的錯，是缺一條管線。管線建好後，人傳什麼都會被自動處理成對的格式。
08⚠️ 常見誤區
- ✕全部 lazy 包含首屏主圖（見 t14）。
- ✕用 CSS 縮小大圖假裝優化——下載量一點都沒少。
口訣
「格式新、尺寸對、首屏先、其餘懶。」
10里程碑 · 完成標準（可驗證）
- ☐圖片管線自動化
- ☐肥圖清單清空
- ☐上稿有圖片規範
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
程式自動判定：輸入網址，掃描引擎自己爬、自己打 API、自己判定。
- 🟢 官方明文web.dev：圖片最佳化指南 ↗
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。