在大多數網站上，圖片都是頁面裡最重的東西，往往比 HTML、CSS 和 JavaScript 加起來還大。頁面一卡，第一個該查的就是圖片，而修起來通常很快。
三個手段幾乎能搞定全部問題：把圖片縮到它實際顯示的尺寸、壓縮它、用現代格式提供它。三招齊上，圖片體積常常能砍掉 70% 以上。
縮到你實際顯示的尺寸
這是最常見也最浪費的錯誤。相機直出的照片可能有 6000 畫素寬，可你的文章只在一欄 800 畫素寬的地方顯示它。瀏覽器把這六千畫素全下載下來，然後在縮小適配時把大部分都扔掉。
在 800 畫素的位置塞一張 6000 畫素的圖，意味著可能多下載了五到十倍的資料。解決辦法很簡單：把檔案縮到它大致會佔據的寬度，再留一點餘量給高畫素密度的螢幕。
一個實用規則：
- 全寬頭圖：1600–2000 px 寬足矣。
- 文章內配圖：1000–1400 px。
- 縮圖：300–500 px。
用 圖片縮放 在圖片進入頁面之前就把它壓下來。它會鎖定寬高比，不會把圖拉變形。
壓縮，去掉浪費
尺寸對了之後，壓縮會去掉肉眼看不到的細節。對照片來說，75%–85% 左右的質量是甜點區：檔案大幅下降，畫面看起來卻一樣。對存成 PNG 的平色塊圖形和截圖，減少顏色數（量化到 256 色）能把檔案壓到原來的一小部分。
圖片壓縮 兩者都能處理。它按質量重編碼 JPEG 和 WebP、對 PNG 做量化，並保證絕不生成比原圖更大的檔案。如果有一整個相簿，批次跑一遍再打包成 ZIP 下載即可。
換成現代格式
光是換格式就能讓檔案減半。下面是照片場景下常見選項的對比。
| 格式 | 相對 JPEG 的典型體積 | 最適合 |
|---|---|---|
| JPEG | 基準 | 通用兜底；照片 |
| WebP | 小約 25%–35% | 照片和圖形；瀏覽器支援廣 |
| AVIF | 小約 50% | 追求最小體積的照片 |
| PNG | 照片場景下大得多 | Logo、圖示、平色塊圖形、透明 |
WebP 是 2026 年的穩妥預設——所有現代瀏覽器都能讀，而且明顯優於 JPEG。AVIF 還能更小，但編碼更慢、支援面略窄。圖片轉換 允許你以 AVIF 為目標，並在 AVIF 不合適時悄悄回退到 WebP，讓你無需靠猜就拿到當下最好的結果。
一句提醒：別用 PNG 存照片。PNG 在 Logo、圖示和需要透明的場景裡很出色，但存照片時它可能比同等質量的 WebP 大好幾倍。
把它串起來
任何要放到網上的圖片，都可以走這條可靠的流水線：
- 縮放到顯示寬度（再給視網膜屏留點餘量）。
- 轉換為 WebP，想要極致最小就用 AVIF。
- 以 75%–85% 的質量壓縮，抹掉最後一點浪費。
這麼做，一張 5 MB 的相機照片能變成 120 KB 的 WebP，在文章欄裡看起來一模一樣。全頁乘下來，載入時間的差別非常可觀。
所有處理都在瀏覽器裡用 Canvas 和 WebAssembly 完成，什麼都不上傳，首次訪問後工具還能離線用。也就是說，你可以為網站準備一整個資料夾的圖片，而不用把它們交給任何伺服器。
檔案之外
還有兩個習慣能幫上忙，而且不花一分錢：
- 給首屏以下的圖片做懶載入，加上
loading="lazy"，讓瀏覽器只在讀者快滾到時才去取。 - 設好 width 和 height 屬性，圖片載入時版式就不會跳動，這對 Core Web Vitals 分數也有幫助。
想確切知道是哪些圖片在拖慢頁面？我們的 圖片 SEO 指南 講了如何審查，頁面速度檢測會列出最重的資源，讓你知道該先衝哪裡。