實用工具
如何在瀏覽器裡互轉 PNG / JPEG / WebP / AVIF
按 CDN 預算調節畫質滑桿、改尺寸並預覽——不把原圖上傳到來歷不明的轉換站，也更適合帶保密條款的設計稿。
MoreKits 團隊
2026-05-02
6 分鐘閱讀
相關工具
與本篇教學搭配使用的更多工具：
為什麼有用
運營上傳巨大的 PNG 英雄圖拖垮 LCP；支持往工單塞 BMP 截圖拖慢倉庫；電商既要小於 200 KB 又偶爾需要透明通道。本地批量試驗格式矩陣，比在公司防火牆外上傳更安全。
三類場景
性能工程師
壓縮 LCP 資源
從 PNG 母版導出 WebP/AVIF，並按斷點微調質量。
指標可量化
設計師
沒有訂閱全套 Adobe 也要交付
PNG 轉 JPEG 交付不含透明的預覽。
加快迭代
客服
附件小於門戶上限
縮小長邊並加重壓縮後再上傳。
少被打回
操作步驟
打開 圖片格式轉換。
上傳源圖
PNG、JPEG、WebP、AVIF、GIF（首幀）、BMP 等常見柵格格式。
選擇目標格式
結合 CDN 策略：現代棧常用 WebP/AVIF + JPEG 兜底。
設置尺寸
鎖定縱橫比或限制最長邊，便於 responsive srcset。
調節質量或無損開關
觀察文字邊緣光暈與體積權衡。
下載
命名規範如
hero@2x.webp，方便靜態資源流水線緩存。
實用技巧
- 僅需更小 JPEG/WebP 也可先看 圖片壓縮。
- Git 裡保留無損母版，衍生有損版本放在構建產物。
- 需要透明通道時不要用 JPEG。
常見誤區
常見陷阱
反覆有損編碼
已是 JPEG 再壓一遍會累積塊狀偽影——儘量從原始導出開始。
常見陷阱
色彩配置文件
轉換後可能默認 sRGB——品牌校色場景請額外印證。
常見陷阱
動圖預期
多數流程只導出首幀——動效需求請換視頻或專門工具。
不適合的場景
- 矢量批量柵格化流水線：CI 裡用 Inkscape/rsvg 更可控（另見 SVG 轉 PNG）。
- RAW 暗房：鏡頭校正應在桌面 RAW 軟件完成。
- 夜間海量批處理：應用服務器調度 ImageMagick/ffmpeg。
常見問題
會上傳圖片嗎？
解碼與編碼在瀏覽器本地完成，可斷網自檢。
Safari 裡 AVIF 觀感不同？
請在目標瀏覽器複核解碼差異。
EXIF 會保留嗎？
取決於導出格式與選項——分享前可用 EXIF 編輯器 審視隱私字段。