圖片最佳化指南

按用途選格式，而不是按習慣選格式

照片通常先看 JPEG；如果瀏覽器支援允許且你更看重壓縮率，WebP 往往是更好的預設值；PNG 在透明背景和清晰 UI 匯出場景仍然重要；而 Base64 圖片資料只適合非常小的資源或受限的嵌入情境。

超大資源的隱藏成本

就算檔案體積看起來還能接受，像素尺寸過大也會拖慢體驗，因為瀏覽器仍要解碼和光柵化這些像素。很多團隊會壓縮，卻忘了縮放；或者把圖片轉成 WebP，但實際尺寸依然遠超版面需要。所以，真正好的最佳化必須同時檢查位元組數和渲染尺寸。

• 如果顯示區域遠小於原圖，先縮尺寸再壓縮。
• 對比畫質時，看實際版面尺寸，不要只看 100% 縮放。
• 大圖盡量別做內嵌 Base64，體積膨脹會拖累傳輸和快取。

一套可重複使用的圖片最佳化循環

先從原圖出發，把尺寸縮到版面真正需要的上限，再壓成目標格式，最後同時看視覺效果和數字指標。如果資源用於首頁首屏，還要順手看行動端；如果用於文件或 UI 說明，則應該優先保證可讀性，而不是只追求壓縮比。