瀏覽器端圖片縮放的運作方式
每次縮放都是完全在 JavaScript 中執行的短流水線。不會下載任何編解碼器函式庫，也不涉及任何伺服器。瀏覽器內建的 Canvas API 解碼檔案、以目標尺寸重新繪製，並在記憶體中重新編碼，然後產生可預覽或打包為 ZIP 的 Blob。由於每個步驟都在分頁沙箱內執行，原始檔案永遠不會到達網路。
- 將每個上傳的檔案讀取為 Blob 並建立物件 URL，讓瀏覽器無需將位元組複製到伺服器或寫入磁碟即可解碼。
- 根據您選擇的模式計算目標尺寸 — 最長邊上限、精確寬高或百分比縮放。長寬比鎖定在您編輯單個欄位時保持比例正確。
- 以目標尺寸建立一個離屏 Canvas，並呼叫
ctx.drawImage(source, 0, 0, width, height)重新繪製解碼後的像素。瀏覽器處理平滑縮放結果的插值。 - 呼叫
canvas.toBlob以來源格式重新編碼。PNG 保持無損，JPEG 和 WebP 以高品質重新編碼。然後頁面顯示前後對比卡片，提供單圖下載或使用 fflate 在記憶體中建立的 ZIP 下載。
為什麼要縮放圖片？
- 超大圖片是頁面載入緩慢最常見的原因。一張 4000×3000 的手機照片直接放入 600 像素寬的版面中，傳輸的像素量大約是螢幕顯示所需的 40 倍。在上傳前將最長邊限制到 1600 像素，可以大幅降低頁面重量並改善 Core Web Vitals LCP 指標。
- 上傳表單強制執行嚴格的尺寸要求。大頭貼、證件照門戶、電商商品圖和 OG 社群卡都有特定的像素要求：Open Graph 預覽需要 1200×630，應用程式圖示需要 512×512，縮圖需要 150×150。精確符合尺寸可以避免上傳被退件的重複循環。
- 電子郵件和通訊工具會靜默地對大型檔案進行重新壓縮，可能破壞清晰的截圖。自行將圖片縮放到合理的寬度，可以保持結果可預期，而不是交給別人的有損處理流程。
- 批次一致性對於相簿和目錄非常重要。將一個資料夾中混合尺寸的照片全部縮放到 800×800 目標尺寸，可以確保每張卡片在格線中整齊排列，不會有多餘的大圖破壞版面。
常見應用場景
每當來源尺寸與目標需求不符時，縮放就派上用場。以下三種情境反覆出現。
- 為 Shopify 或 WooCommerce 商店準備商品照片。將一個資料夾中 4000 像素的相機原圖的最長邊限制到 1600 像素，使店面載入更快，同時長寬比保持不變，圖片不會變形。
- 從一個主檔案產生社群和應用程式資源。精確設定 1200×630 用於 Open Graph 卡片，再設定 512×512 用於應用程式圖示，無需開啟重型編輯器即可幾次點擊完成匯出。
- 在將 QA 或客服截圖附加到工單之前批次壓縮。將 50 張截圖的資料夾縮放到 50%，在放入問題追蹤系統之前通常可以將封存大小減少約四分之三。
實際範例：將 4000 像素照片縮放為 1600 像素網頁圖片
一張直接來自手機的 4000×3000 照片是常見的超大檔案，遠超任何網頁版面的需求，是衡量縮放節省效果的公平基準。
將照片拖入上傳區域，將模式保持在限制最長邊，並將值設為 1600。Canvas 流水線以 1600×1200 的尺寸重新繪製圖片，保持長寬比不變，然後以原始格式重新編碼。輸出卡片顯示新尺寸和檔案大小，對於典型的 JPEG，檔案大小從數兆位元組降至幾百千位元組。點擊卡片上的下載取得單個檔案，或者在一次縮放多張圖片時點擊下載 .zip。整個流程從拖曳到下載只需幾分之一秒，頁面本身載入後不消耗任何流量。
有哪些縮放模式？
三種。限制最長邊將寬度或高度中較長的一邊限制到指定像素值，另一邊等比縮放，這是安全的預設選項，永遠不會造成變形。精確寬度 × 高度允許您輸入兩個數值，並帶有長寬比鎖定功能，在您編輯第一個欄位時根據來源比例自動計算第二個欄位 — 當表單要求非等比的精確尺寸時，關閉鎖定即可。按百分比縮放將兩個尺寸同時乘以一個係數，適合一次性將整批圖片縮小一半或放大一倍。六個一鍵預設（從 1920×1080 到 150×150 縮圖）涵蓋最常用的目標尺寸。
處理在我的裝置上進行嗎？
是的，完全在本機執行。頁面使用瀏覽器的原生 Canvas API 和 Web File API 在記憶體中解碼、重新繪製和重新編碼每張圖片。不會將任何圖片資料傳送到伺服器，沒有暫時上傳，也沒有雲端往返。您可以自行驗證：開啟開發者工具，切換到網路面板，執行一次縮放。您看到的唯一對外請求是頁面初始載入和廣告呼叫。沒有任何圖片資料離開分頁，這使它對於掃描的身分證件、醫療影像和其他您不希望上傳的資料來說都是安全的。
縮放會降低品質嗎？
縮小圖片（降採樣）效果極佳 — 瀏覽器將來源像素平均到更少的像素中，細節保持清晰，檔案也會變小很多。放大超過來源解析度（升採樣）無法憑空創造從未捕捉過的細節，因此小圖放大後會顯得模糊；這是所有縮放工具的固有限制，不只是本工具。輸出保持來源格式：PNG 保持無損，而 JPEG 和 WebP 以高品質設定重新編碼，與原始圖片的視覺差異幾乎難以察覺。
支援哪些檔案格式？
輸入方面，瀏覽器能解碼的任何格式都被接受：PNG、JPEG、WebP、GIF 和 BMP 涵蓋了手機、相機或截圖工具產生的幾乎所有檔案。輸出保持來源格式，前提是 Canvas 編碼器支援 — PNG、JPEG 和 WebP 可直接往返。GIF 和 BMP（Canvas API 可解碼但不能重新編碼）會儲存為無損 PNG。縮放後的檔案名稱包含新尺寸（例如 photo-1600x1200.jpg），方便批次檔案的排序。
拖入圖片，選擇尺寸，縮放。一切都在您的分頁中執行。無需上傳，無需帳號，無需等待伺服器。