发布时间：2026-11-06 | 阅读时间：7分钟
做网站、做 App、发公众号，图片格式选错，页面白白慢一半；传了个 WebP 到只认 JPG 的报名系统，直接上传失败。JPG、PNG、WebP、AVIF 这四种到底怎么选？本文从透明通道、动画、兼容性、压缩效率四个维度讲清楚，并给出在线转换和自己测体积的方法。
一、四种格式速查
| 格式 | 有损/无损 | 透明背景 | 动画 | 典型用途 | 体积特点 |
|---|---|---|---|---|---|
| JPG/JPEG | 有损 | 不支持 | 不支持 | 照片、商品图、扫描件 | 照片类最小众的通用格式 |
| PNG | 无损 | 支持 | 不支持 | Logo、图标、截图、需要透明底的图 | 照片类偏大，图标类合适 |
| WebP | 有损/无损都支持 | 支持 | 支持 | 网站图片、App 图，替代 JPG/PNG | 同画质比 JPG 小约两到三成 |
| AVIF | 有损/无损 | 支持 | 支持 | 对体积要求极高的现代网站 | 压缩率比 WebP 更高，但编码慢、兼容还在普及 |
几条判断原则：
- 照片类（人物、商品、风景）：优先 JPG 或 WebP，不要用 PNG，PNG 存照片会大好几倍。
- 图标、Logo、透明底：用 PNG 或 WebP，JPG 不支持透明。
- 要动图：仍用 GIF 或 WebP 动画，JPG/普通 PNG 不会动。
- 面向广泛用户的网站：现在主流浏览器对 WebP 支持已经很成熟；AVIF 更省体积但兼容仍在普及，上线前要确认你的访客浏览器环境。
二、为什么格式能差出几倍体积
同样一张照片，存成 PNG 可能 3MB，存成高质量 JPG 可能 500KB，再转成 WebP 可能 350KB。差别在于压缩方式：JPG/WebP/AVIF 是有损压缩，去掉人眼不敏感的颜色细节；PNG 是无损压缩，保留全部像素，所以照片类天然吃亏。这也是为什么"截图存 PNG 合适、照片存 PNG 很傻"。
三、在线转换实操
手里有不同格式的图，按目标用途转换：
- 网站图想瘦身：JPG 转 WebP，进入 JPG 转 WebP 上传转换后下载。
- 转回来兼容老系统：WebP 转 JPG，进入 WebP 转 JPG。
- iPhone 实拍图要通用：HEIC 转 JPG，进入 HEIC 转 JPG。
- 图标去透明通道：PNG 转 JPG，进入 PNG 转 JPG（注意透明区会填白底）。
- 更多格式互转：从格式转换向导或通用格式转换工具进入。
转换后的文件直接下载到本地即可，整个过程在浏览器本地完成。
四、自己测体积：别凭感觉选格式
"哪个格式更小"不要靠猜，拿一张代表图实测最快：
- 选一张你网站上最常见的图（比如商品主图），原件保留。
- 分别用转换工具导出同画质的 JPG、PNG、WebP 版本。
- 右键看文件大小对比。
- 再用图片压缩把各版本压到可接受画质，记录体积。
- 选"体积最小且肉眼无差"的那个格式作为网站统一格式。
实测下来的普遍规律是：照片用 WebP 最省、退一步用 JPG；图标用 PNG/WebP；AVIF 适合追求极致体积且能接受兼容性折损的场景。
测完建议把结论记在项目里：网站主图统一什么格式、质量参数设多少，下次上新直接套，不用每张图重新纠结。手机拍的素材统一走 HEIC 转 JPG 这一道，也能避免上传时才发现格式不认。
五、常见问题
Q：我能直接把图存成 AVIF 上传到平台吗？
A：这取决于你上传的平台是否支持 AVIF。多数内容平台、报名系统目前主要接受 JPG/PNG，AVIF 文件可能传不上去。稳妥做法是把 AVIF 作为自己网站内部使用的优化格式，对外分发仍用 JPG/WebP。
Q：PNG 转 JPG 后透明背景去哪了？
A：JPG 没有透明通道，转换时透明区域会被填成白色。如果你还需要透明底，就不要转 JPG，改用 WebP（同时支持透明和更小体积）。
Q：WebP 会不会有的人浏览器打不开？
A：2026 年主流浏览器对 WebP 的支持已基本完善。如果你的访客里有大量老版本浏览器，稳妥方案是对外提供 JPG 版、网站服务端按浏览器能力选择，而不是全站只发 WebP。