瀏覽器端圖片壓縮的運作方式
每次壓縮都完全在 JavaScript 中執行。不需要下載任何編解碼器函式庫，也不涉及任何伺服器。瀏覽器內建的 Canvas API 對圖片進行解碼，以較低品質重新編碼，並將 Blob 交給頁面用於預覽、下載或打包為 ZIP。由於每個步驟都在分頁的沙盒內進行，原始檔案永不接觸網路。
- 將每個上傳的檔案讀取為 Blob，並建立物件 URL，讓瀏覽器可以在本機解碼，無需將位元組複製到伺服器或寫入磁碟。
- 以原始像素尺寸將解碼後的圖片繪製到螢幕外的 Canvas 元素上，準備重新編碼。
- 呼叫
canvas.toBlob(callback, mimeType, quality)重新編碼像素。在品質模式下，滑桿值直接對應到編碼器的量化設定；在目標大小模式下，頁面對品質值進行二分搜尋，直到輸出 Blob 符合您的位元組預算。 - 顯示包含原始大小、壓縮後大小和節省百分比的前後對比，然後提供每張圖片的單獨下載或整批次的單一 ZIP 下載。ZIP 使用 fflate（一個首次使用時載入的 8 KB 函式庫）在記憶體中建構。
為什麼要壓縮圖片？
- 較小的圖片載入更快。將 4 MB 的主視覺圖壓縮到 600 KB 可直接改善最大內容繪製（LCP），這是 Google 用於排名的 Core Web Vitals 指標之一。頁面上有多張照片時，節省效果累加，帶來更快的首屏渲染。
- 上傳和附件大小限制無所不在。許多 CMS 平台、工單工具和電子郵件系統會拒絕超過 1 或 2 MB 的檔案。快速壓縮一次就能將照片控制在限制以內，無需開啟完整的圖片編輯器。
- 頻寬和儲存空間在規模化時需要花錢。以品質 0.8 的 WebP 取代全尺寸 PNG，可將圖片體積減少三分之一甚至更多，從而降低 CDN 流出費用並減少訪客的行動數據消耗。
- 敏感圖片的隱私不容忽視。因為一切都在您的瀏覽器中執行，身分證掃描件、醫療影像和內部截圖都留在您的裝置上——無需擔心上傳到 TinyPNG 這樣的第三方伺服器。
常見應用場景
當圖片比目標位置所能容納的更大時，就需要壓縮。以下是我們反覆見到的三種模式。
- 為網路商店準備產品照片。JPEG 原圖被壓縮至品質 0.8（或 200 KB 目標），使商店保持快速並在行動裝置上通過 Core Web Vitals 檢測。
- 將截圖附加到 Bug 追蹤器或 Wiki 之前先縮小。一批 PNG 截圖轉換為品質 0.85 的 JPEG，體積往往從數十 MB 降到幾 MB。
- 讓照片低於上傳限制——拒絕 1 MB 以上檔案的求職申請入口、附件限制嚴格的電子郵件系統，或必須符合位元組預算的論壇頭像。
實戰示範：4 MB JPEG 壓縮到 400 KB
手機相機直出的 4 MB JPEG 是常見的大檔案，會觸發上傳限制並拖慢頁面速度。這是衡量壓縮效果的合理基準。
將 JPEG 拖入上傳區，格式保持 JPEG，然後將品質滑桿拖低到 0.7，或切換到目標大小模式並輸入 400 KB。在品質模式下，Canvas 流水線重新編碼一次並顯示結果，通常在 500 到 700 KB 之間，具體取決於照片內容。在目標大小模式下，頁面嘗試幾個品質值，選定仍能低於 400 KB 的最高值，並回報節省百分比。點擊卡片上的下載可取得單一檔案，或點擊下載 .zip一次下載所有壓縮圖片。整個過程對於這個大小的圖片來說不到一秒，且在頁面本身載入完成後不消耗任何頻寬。
品質模式和目標大小模式有什麼差別？
品質模式提供一個從 0.1 到 1.0 的滑桿，對應 JPEG 或 WebP 編碼器的量化設定——數值越低，檔案越小，但瑕疵越明顯。目標大小模式則反過來：您指定一個以千位元組為單位的大小，頁面對品質值進行二分搜尋，編碼幾次直到找到仍能符合預算的最高品質。當硬性限制很重要時（例如 1 MB 的上傳限制），目標大小模式很方便；當您只想要可預期的視覺效果時，品質模式更快、更合適。PNG 是無損格式，因此兩種模式均不適用。
處理是在我的裝置上進行的嗎？
是的，完全是。頁面使用瀏覽器的原生 Canvas API 和 Web File API 在記憶體中對每張圖片進行解碼和重新編碼。沒有圖片資料傳送到伺服器，沒有暫存上傳，也沒有雲端往返。您可以自行驗證：開啟開發者工具，切換到網路面板，然後執行一次壓縮。您看到的唯一對外請求是初始頁面載入和廣告呼叫。沒有任何圖片相關的資料離開分頁。
為什麼壓縮 PNG 有時幾乎縮不了多少？
PNG 是無損格式，因此 Canvas API 無法透過捨棄細節來縮小檔案——它只能重新封裝相同的像素。對於照片而言，PNG 本身就很大，無損重新編碼節省甚微。真正的收益來自將輸出格式切換為 JPEG 或 WebP，這兩種格式使用適合照片的有損壓縮，通常能縮小 4 到 10 倍。只有在需要無損品質或透明度時才保留 PNG；否則請選擇 JPEG（照片）或 WebP（最佳大小與品質平衡）。
我應該選擇哪種格式？
對於照片，品質 0.8 的 WebP 提供最佳的大小與品質平衡，且自 2021 年以來發布的每款瀏覽器都支援；當目標環境較舊或限制較嚴時，JPEG 是安全的通用備選。只有在需要無損品質或 Alpha 通道時才選擇 PNG——線條藝術、UI 截圖、帶透明度的標誌。如果您在為頁面速度最佳化且受眾使用現代瀏覽器，WebP 幾乎總是正確選擇；如果您的 CMS 較舊或列印流水線拒絕 WebP，則使用 JPEG。
拖入圖片，選擇品質等級或目標大小，壓縮。一切都在您的分頁中執行。無需上傳，無需帳號，無需等待伺服器佇列。