完整的圖片最佳化管道
從過大的原始圖片到適合網頁的素材——一步步的圖片最佳化工作流程，真正節省頻寬。
設計師給你一張直接從 Photoshop 匯出的 4000x3000 PNG。8 MB。你的網頁需要它是 800px 寬、低於 100 KB，理想情況下是 WebP 格式。
「你手上有的」和「網頁需要的」之間的差距，就是大多數開發者浪費時間的地方。讓我們用一個正確的管道來解決這個問題。
步驟 1：調整到目標尺寸
單次最大的檔案大小縮減來自調整尺寸。一張 4000px 寬的圖片顯示在 800px 的位置，浪費了 96% 的像素。這不是誇張——這是數學。
對於 Retina 顯示器，取顯示尺寸的 2 倍。所以如果圖片在螢幕上渲染為 400px，就調整到 800px。不是 4000px。不是原始尺寸。
典型節省：4000x3000（8 MB）→ 800x600（400 KB）。光是調整尺寸就減少了 95%。
步驟 2：壓縮而不損失可見品質
調整尺寸後進行壓縮。對於照片，JPEG 品質在 75-85% 之間是甜蜜點——視覺上與原始圖片一致，檔案卻小得多。
訣竅在於找到壓縮失真變得可見的閾值。對大多數照片來說，大約在 70% 左右。保持在這個值以上，不放大的話沒人能分辨。
典型節省：400 KB → 120 KB（80% 品質）。你的使用者眼睛不會注意到。他們的載入時間會。
步驟 3：轉換為現代格式
JPEG 和 PNG 已經存在很久了。WebP 在相同品質下能給你小 25-35% 的檔案。AVIF 更進一步。
實用的做法：
- 照片：轉換為 WebP（廣泛支援）或 AVIF（最佳壓縮）
- 截圖/圖形：WebP 或 PNG，取決於透明度需求
- 圖示/標誌：盡可能保持 SVG
使用 <picture> 元素提供 WebP，並以 JPEG 作為備選。WebP 的瀏覽器支援率現在已超過 97%，但備選方案不花任何成本。
步驟 4：最佳化你的 SVG
設計工具產生的 SVG 檔案帶有大量多餘內容——編輯器中繼資料、不必要的小數精度、冗餘群組、不可見元素。典型的 Illustrator SVG 有 30-50% 的冗餘。
通過 SVG 最佳化器處理後，看著檔案大小下降。15 KB 的圖示變成 5 KB。將這乘以頁面上的 20 個圖示，你就省下了 200 KB 的標記。
步驟 5：小素材用 Base64
對於非常小的圖片（2 KB 以下）——像是圖示、項目符號、微小的裝飾元素——轉換為 Base64 並內嵌，可以完全消除一個 HTTP 請求。
少一個請求 > 略大一點的 HTML 檔案。但僅限於小圖片。CSS 中一段 50 KB 的 Base64 字串比單獨的請求更糟。
經驗法則：低於 2 KB？用 Base64。超過 2 KB？獨立檔案。
真實數據：一個案例研究
起點：分類頁面上的 12 張產品圖片。
| 階段 | 總大小 | 節省 | |-------|--------|------| | 原始 PNG | 45 MB | — | | 調整尺寸後（800px）| 2.1 MB | 95.3% | | 壓縮後（80%）| 680 KB | 98.5% | | 轉換 WebP 後 | 450 KB | 99.0% |
45 MB 降到 450 KB。相同的視覺品質。頁面載入時間從 12 秒降到 1.2 秒。
管道的實際操作
對於一批圖片，工作流程變得機械化：
做過三次之後，一整頁的圖片只需要五分鐘。
別忘了：延遲載入
最佳化不僅止於檔案大小。為首屏以下的圖片加上 loading="lazy"。瀏覽器在使用者捲動到附近之前不會下載它們。免費的效能提升。
圖片最佳化不算光鮮亮麗。沒有人會寫部落格說他們多興奮地壓縮了 JPEG。但這是大多數網站能做到的單一最高影響力效能改善。更小的圖片意味著更快的頁面、更滿意的使用者和更低的頻寬成本。每張圖片上線前都經過這個管道處理。