這個工具把一張 JPEG 或 PNG 重新編碼一次，用較少的位元組裝下同一張圖，長寬維持原樣。負責編碼的是 browser-image-compression 2.0.2，它在你瀏覽器的 Web Worker 裡跑，所以編碼期間頁面不會凍住；圖片本身從頭到尾留在記憶體裡，沒有上傳這一段。
使用步驟
- 把圖片拖進上方的虛線框，或點一下開檔案選擇器。選擇器只列出 JPEG 與 PNG，但拖放走的是另一條路 —— 只要 MIME 型別是
image/開頭都收，包括 WebP、GIF 與 SVG。 - 選好檔案，下方才會長出「品質：80%」滑桿（1–100，預設 80）。沒有選檔案之前這一整區都不存在，這是正常的。
- 拉好滑桿按「壓縮」。按鈕會變成「壓縮中…」並暫時不能按，這段時間就是編碼在跑。
- 結果以兩張卡片並排呈現：「原始大小」與「壓縮後」，第二張下面附一行「減少 N%」。
- 滿意的話按預覽圖旁的「下載」，檔名是
compressed_加上你原本的檔名。不滿意就把滑桿拉到別的值再按一次壓縮，來源檔案還在，不必重新選。
什麼時候用得上
把手機拍的照片塞進有大小限制的表單
報名系統、銀行 KYC、學校作業繳交常寫著「單檔不得超過 2 MB」，而現在隨手一張照片就 4–6 MB。像素尺寸通常是符合的，只是位元組太多，這時把品質拉到 60–70 再壓一次，多半就能過關而肉眼看不太出差別。壓完記得看一眼「壓縮後」那張卡的數字有沒有真的低於門檻，別憑感覺就送出。
把設計稿匯出的 PNG 變小再放進簡報
Figma 匯出的 2x PNG 動輒好幾 MB，二十張塞進同一份簡報就會變成一個開啟緩慢的巨大檔案。介面截圖這種大片同色的圖，色彩量化後檔案常常掉一半以上，而按鈕邊緣與文字都還是銳利的。有漸層或照片的 PNG 就要多看兩眼，那類圖最容易在天空、陰影這種平滑過渡上出現一圈一圈的色階。
寄照片給對方但對方的信箱很小
附件在 Base64 編碼後還會再膨脹約三分之一，5 MB 的照片實際佔用超過 6.6 MB，很多企業信箱的單信上限就是 10 MB 或 20 MB。把每張壓到 1 MB 以內，一封信塞十張也還安全，收件者在手機上看也不會等半天才載完。
在不改版面的前提下讓網頁載入快一點
如果 <img> 的 width／height 已經寫死、CSS 也按現有尺寸排好，換掉圖片檔案是最不痛的優化：像素數量沒變，版面完全不用動，只是同一張圖少下載幾百 KB。想連尺寸一起改就得動 HTML，那屬於另一件事，該用尺寸調整工具先把像素砍掉再說。
限制與注意事項
- 輸出格式一定等於輸入格式：程式把原檔的 MIME 型別原封不動交給編碼器，PNG 進來就是 PNG 出去。想從 PNG 換成 WebP 或 JPEG，這個工具做不到，那是格式轉換工具的事。
- 同一根滑桿對兩種格式的意義完全不同。JPEG 走的是編碼器的品質參數，數值越低越多細節被丟掉；PNG 則是先把顏色量化到「4096 × 品質」種左右（品質 80 大約是 3,300 色）再無損編碼，所以拉低 PNG 的品質換來的是顏色變少，不是模糊。
- 第一輪編出來如果比原檔還大，函式庫不會就此放棄：它會把品質乘 0.95 再編一次，最多重複十輪。十輪跑完仍然更大，就把最後那一輪的結果交給你，畫面上那行「減少」百分比於是變成負數。看到負值就代表這張圖不該被壓，直接沿用原檔。
- 像素尺寸原則上不會被動到。函式庫只有在編出來的檔案仍然超過 10 MB 時才會開始縮邊長，而輸入本來就被擋在 10 MB 以內，這條路幾乎踩不到。
- 編碼失敗時畫面沒有任何提示 —— 例外只被寫進瀏覽器主控台，按鈕從「壓縮中…」變回「壓縮」就沒下文了。按了半天沒反應請按 F12 看 Console，通常是那個格式瀏覽器編不出來。
- 拖放進來的 GIF 與 SVG 不會被擋，但結果多半不是你要的：GIF 只會保留第一格，SVG 會被畫成點陣圖，而且瀏覽器編不出 GIF，實際吐出來的位元組是 PNG，副檔名卻還掛著
.gif。 - 重新編碼會把 EXIF 一併洗掉，拍攝時間、GPS 座標、相機型號都不會留在輸出檔裡。不過方向資訊有被特別處理：函式庫會先讀出 orientation，在瀏覽器不自動轉正時補上旋轉，直立的照片不會躺著出來。
- 一次處理一張，單檔十百萬位元組（10 MB）為上限，超過會在虛線框下方跳出紅字並拒收。壓完的結果也不會自動變成新的來源，想連壓兩輪得先下載再重新拖進來 —— 而連壓兩輪只會讓畫質更差，通常不值得。
常見問題
我的圖片會被上傳嗎？
不會。檔案是用 URL.createObjectURL 在本機開起來的，編碼在你自己的 CPU 上完成，沒有任何請求帶著像素資料出去。唯一牽涉到網路的是 Web Worker 需要載入那份編碼函式庫，而它由本站自己提供（/browser-image-compression.js），不會向第三方 CDN 索取。（工具頁本身仍會載入廣告等第三方資源，那些請求與你的圖片無關。）
離線可以用嗎？
可以，只要頁面已經開著。Worker 取不到函式庫時，程式會退回主執行緒用同一套邏輯壓一次，結果一樣，差別是編碼期間頁面會比較卡，因為那條路沒有另一個執行緒幫忙分擔。
品質要拉到多少？
照片類的 JPEG 大約 70–80 就是甜蜜點，再往下掉會先從天空、皮膚這類平滑區域看出區塊感。介面截圖、圖表、文字多的圖建議留在 85 以上，這類圖的銳利邊緣對量化特別敏感。沒有一個對所有圖都對的數字，兩張卡片的位元組數就在畫面上，多按幾次比較最快。
為什麼「減少」顯示負數？
因為壓完真的比原檔大，而百分比是直接由兩個位元組數算出來、沒有夾在 0 以下。最常見的原因是原檔已經被更強的編碼器處理過，重新編一次贏不了它；另一種是把品質拉到接近 100，那等於要求編碼器幾乎什麼都別丟。這種情況留著原檔就好。
壓縮會改變圖片的長寬嗎？
不會，輸出的像素尺寸和你丟進來的一模一樣，畫面上也沒有寬高欄位可以填。如果你真正想解決的是「這張 4000 px 的照片放在網頁上太大」，先縮尺寸的效果遠比壓縮明顯，因為位元組數主要跟著像素數量走。
可以一次丟一整個資料夾嗎？
不行，檔案輸入沒有開多選，一次拖十張進來也只會吃到第一張。批次處理請用桌面端工具（例如 ImageOptim、squoosh-cli）或自己寫一段 sharp 腳本，那類流程也比較好接進 CI。