实用工具
如何在浏览器里互转 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 编辑器 审视隐私字段。