電商知識庫
圖片壓縮與優化完整指南
讓網站速度快 3 倍的技術
圖片占電商網頁 60-80% 大小、慢 1 秒轉換掉 7%。本文涵蓋格式選擇（WebP/AVIF）、壓縮工具、Lazy Load、響應式圖片、SEO 七大重點。
優化後可減 60-80% 大小、載入快 3 倍。
建議用 <picture> tag 同時提供 AVIF + WebP + JPG fallback。
中小電商從 TinyPNG 起步、大量商品用 Cloudinary 自動化。
HTML 加屬性：<img loading=\"lazy\" src=\"...\">
不同裝置載入不同大小：
<img srcset=\" small.webp 480w, medium.webp 800w, large.webp 1200w \" sizes=\"(max-width:480px) 100vw, 50vw\">
手機載入小圖、桌面載入大圖，節省 50%+ 流量。
CDN 把圖片放在「離顧客近的伺服器」，載入快 3-10 倍。推薦：1. Cloudflare（免費方案足夠中小電商）；2. AWS CloudFront；3. Cloudinary（圖片專用）；4. ImageKit。設定後立即見效，跨國電商必備。
圖片 SEO 帶來 Google 圖片搜尋流量，被低估的流量源。
每個商品圖片：1. 命名 product-name-color.webp；2. ALT 「商品名 顏色 角度」；3. 主圖 1200x1200（高解析）；4. 列表縮圖 400x400（壓縮）；5. WebP 為主、JPG fallback；6. Lazy load 非首屏；7. 加 width/height 屬性。完整優化讓商品頁載入快、SEO 友善。
必看指標：1. PageSpeed Insights 分數（目標 90+）；2. LCP（< 2.5s）；3. CLS（< 0.1）；4. 圖片總載入時間；5. 圖片占頁面大小比例。Google Search Console 看 Core Web Vitals 報表。
NT$24,800/年起，享受完整電商解決方案：
圖片占網頁 60-80% 大小、慢 1 秒轉換掉 7%、Core Web Vitals 影響 SEO。優化後快 3 倍。
WebP 小 25-35%、AVIF 小 50%+。建議用 picture tag 同時提供 AVIF + WebP + JPG。
TinyPNG、ImageOptim、Squoosh、ImageMagick、Cloudinary。中小從 TinyPNG、大量用 Cloudinary。
HTML 加 loading=\"lazy\"。初始載入快 50%+、節省頻寬。首屏圖不要 lazy。
七大重點：描述性檔名、ALT、Title、Sitemap、Schema、結構化資料、上下文。