瀏覽器圖片轉換的運作方式
每次轉換都是一個完全在 JavaScript 中執行的四步驟流水線。不會下載任何編解碼器函式庫 — 瀏覽器內建的 Canvas API 負責解碼和重新編碼。
- 將每個上傳的檔案讀取為 Blob 並建立物件 URL，讓瀏覽器無需將位元組複製到伺服器即可進行解碼。
- 將解碼後的圖片繪製到螢幕外的 Canvas 元素上，在保持原始長寬比的同時套用任何大小調整限制。
- 呼叫
canvas.toBlob(callback, targetMimeType, quality)重新編碼像素。PNG 輸出永遠是無損的；JPEG 和 WebP 遵循品質滑桿設定。 - 顯示包含輸出尺寸和檔案大小的前後縮圖，然後提供每張圖片的下載按鈕或整批次的單一 ZIP。
為什麼要轉換圖片格式？
- 從 PNG 切換到 WebP 可在品質 0.8 時將典型檔案大小減少 25–35% 且無明顯品質損失，直接降低頁面重量並改善 Core Web Vitals LCP 分數。
- PNG 保留了 JPEG 會丟棄的透明度，因此 PNG→JPEG 會在白色背景上渲染透明像素 — 當目標位置（電子郵件、舊版 CMS）不接受 PNG 時很有用。
- 社群平台和廣告網路有嚴格的格式要求：Facebook 和 LinkedIn 偏好照片使用 JPEG；Twitter 的 OG 預覽流水線支援 WebP；部分廣告伺服器拒絕非 JPEG 素材。
- 在上傳到 CMS 或 DAM 之前，將混合格式圖片批次（PNG 截圖、JPEG 照片、WebP 匯出）標準化為單一格式，可消除匯入流水線中的格式處理複雜性。
常見應用場景
當來源格式和目的地期望不符時，就需要進行格式轉換。
- 為 Shopify 或 WooCommerce 商店準備產品照片 — JPEG 原始檔轉換為品質 0.85 的 WebP 供商店前台使用，PNG 保留用於印刷就緒的匯出。
- 在嵌入 React 或 Next.js 建置之前，將設計師提供的 PNG 匯出轉換為 JPEG 或 WebP，讓框架的圖片最佳化器從較小的來源開始。
- 批次處理 QA 測試執行中的截圖資料夾 — PNG 轉換為品質 0.9 的 JPEG，在附加到錯誤追蹤系統票單之前縮小封存大小。
實際範例：2 MB PNG → 300 KB WebP
2400×1600 像素的 2 MB PNG 主視覺圖片是行銷登陸頁面上常見的大型素材。
將 PNG 拖到這裡，選擇 WebP 作為目標格式，將品質設為 0.8，並可選擇將最大寬度設為 1200 以將像素尺寸減半。Canvas 流水線以 1200×800（保持長寬比）繪製圖片，重新編碼為 WebP，輸出卡片顯示結果 — 通常為 280–320 KB，減少了 85%。點擊卡片上的下載，或者如果轉換了多張圖片，則批次下載 ZIP。
支援哪些格式？
來源圖片：瀏覽器可以解碼的任何格式 — PNG、JPEG、WebP、GIF 和 BMP 都被接受。輸出格式：PNG（無損）、JPEG 和 WebP。AVIF 輸出目前尚不支援，因為 Canvas API 編碼器僅在 Chrome 105+ 中可用，Safari 和 Firefox 中不存在；基於 WASM 的 AVIF 路徑計劃在未來版本中推出。
這是在我的裝置上進行的嗎？
是的。頁面使用瀏覽器的原生 Canvas API 和 Web File API。圖片資料不會發送到伺服器；轉換流水線完全在您的瀏覽器分頁中執行。您可以透過開啟開發者工具並檢查網路面板來驗證這一點 — 頁面載入後沒有任何對外請求。
PNG 和 JPEG 之間的品質取捨是什麼？
PNG 是無損格式 — 每個像素都會在編碼週期中完整保留。JPEG 使用 DCT 壓縮並丟棄眼睛很少注意到的細節；品質 0.8 是常見的最佳平衡點，大多數觀看者幾乎察覺不到與原始圖片的視覺差異，但檔案比 PNG 小 4–6 倍。WebP 可以在無損和有損模式下工作；這裡的品質滑桿驅動有損編碼器，品質 0.85 在自然照片上通常比 JPEG 0.85 表現好 25–30%。
AVIF 支援何時會推出？
透過 canvas.toBlob(…, 'image/avif') 進行的 AVIF 編碼目前只在 Chrome 105+ 中有效；Safari 和 Firefox 不支援。未來版本將使用輕量 WebAssembly 編碼器新增可選的 AVIF 路徑，以便該功能在所有瀏覽器中都能運作。在此之前，AVIF 選項顯示為「即將推出」，WebP 編碼器（在現代瀏覽器中普遍支援）是推薦的新一代替代方案。
拖入您的圖片，選擇格式，轉換。一切都在您的分頁中執行 — 無需上傳、無需帳號、無需等待伺服器。