圖片過大是頁面載入慢的頭號原因。解決辦法幾乎總是兩步：先把圖片調成正確的尺寸，再壓縮剩下的資料。兩步都做，一張 4 MB 的照片就能變成 150 KB，在螢幕上看起來一模一樣。
我們用實際數字來說話。
應該瞄準的目標大小
你不用靠猜。下面是讓頁面保持快速的實用體積預算：
- 主視覺／通欄 banner： 小於 200 KB，最好 ~100–150 KB。
- 文章內配圖： 每張 80–150 KB。
- 縮圖／頭像： 10–30 KB。
- logo 或圖示（PNG/SVG）： 小於 30 KB，常常遠低於此。
再看尺寸：
- 通欄主視覺： 1600–2000 px 寬對大多數佈局綽綽有餘（只有在為 Retina 最佳化且承受得起位元組時才翻倍）。
- 欄內配圖： 與你的正文寬度匹配——常見是 800–1200 px。
- 縮圖： 它實際顯示的尺寸，比如 300–400 px。
如果一個頁面上任何一張圖超過約 300 KB，通常都是值得修正的失誤。
第一步：縮到真實顯示寬度
這是大家最愛跳過的一步，卻是最大的槓桿。手機直出的照片常常寬 4000+ 畫素。如果它顯示在 800 畫素的欄目裡，你就多傳了 25 倍於螢幕所能顯示的畫素——而畫素數量對檔案大小的影響超過一切。
用圖片尺寸調整工具把圖片縮到它實際出現的寬度。按畫素或百分比縮放，鎖定寬高比，讓高質量縮小演算法保持邊緣乾淨。
單是調對尺寸，往往就能在你壓縮一個位元組之前先砍掉 80–90% 的檔案大小。
第二步：壓縮剩下的資料
現在壓縮這些正確尺寸內部的資料。
- 照片（JPG/WebP）： 把質量滑塊設到 75–85。這對大多數影象是視覺無損的，同時把體積壓得很狠。
- PNG（截圖、圖形）： 圖片壓縮工具會把它們縮到 256 色調色盤，通常省 60–80% 而看不出變化，並保留透明。
壓縮工具還會把輸出限制在原始大小以內——絕不會返回更大的檔案——而且它有個可選的寬度上限，所以你其實可以一遍搞定兩步：把上限設成目標寬度，直接壓縮。整個資料夾批次處理，打包成 ZIP 下載。
順便選對格式
如果你的圖片將提供給現代瀏覽器，把照片轉成 WebP 通常能在相同質量下比 JPEG 再省 25–35%。純色圖形保持 PNG（或 WebP）。別把照片存成 PNG——那是經典的臃腫失誤，輕輕鬆鬆就是 5–10 倍的代價。
一套實際的工作流
給一篇有五張照片的部落格文章：
- 把每張縮到你的欄目寬度（比如 1200 px）。
- 用質量 80 壓縮，或轉成 WebP。
- 確認每張落在約 150 KB 以內。
- 挑一張放大到 100% 檢查區域性，確認畫質穩住了。
原本總共 20 MB 的五張照片，會落到 600 KB 左右——頁面從卡頓變成一眨眼就載入完。
隱私且可離線
上面每一步都用 Canvas 和 WebAssembly 完全在你的瀏覽器裡執行。沒有任何圖片上傳到伺服器，首次訪問之後工具就被快取，可以離線使用。你完全可以在沒有網路的情況下最佳化一整篇文章的圖片，而且什麼都不離開你的機器。