WebP、AVIF、JPG 怎么选?
做网页或分享照片时,格式选错要么兼容性翻车,要么体积白白变大。JPG 最稳、WebP 常是现代站的默认折中、AVIF 更省空间但要准备回退。下面按「你实际会遇到的决策」说明,并链到站内转换与压缩工具。
先问用途,再谈格式
给父母邮箱发旅行照、给只认 JPEG 的政务/银行表单交材料——优先 JPG。兼容性几乎不是问题。
自己的官网、博客、商品详情,读者用现代浏览器——WebP 往往能在观感接近的前提下显著减小体积,还支持透明。
对流量极敏感、且你能做 `<picture>` 多源回退时——再评估 AVIF。不要只发 AVIF 却没有 JPG/WebP 后备。
JPG:最稳的照片语言
JPG(JPEG)是有损格式,适合摄影、人像、风光。几乎所有手机、电脑、打印机、CMS 都认。
它不擅长:透明背景、大块纯色 Logo、需要反复后期仍保持锐利文字的 UI 截图。这些场景请看 PNG 或 WebP。
反复「另存为 JPG」会叠加上一代损失。尽量从较干净的原件转一次到位。
WebP:现代网页的实用默认
同等观感下,WebP 体积通常优于 JPG,并可带透明(JPG 做不到)。Chrome、Edge、Firefox、Safari 的支持已经足够覆盖绝大多数访客。
静态站、CDN、许多框架对 WebP 都有现成支持。邮件客户端则参差不齐——邮件里的配图仍更常退回 JPG。
从 PNG 截图「想变小」时,转 WebP 往往比「再存 PNG」更有效,这也是站内 缩小 PNG 默认 WebP 的原因。
AVIF:更狠的压缩,更要计划回退
复杂照片上,AVIF 经常比 WebP 更小。编码有时更慢,部分旧设备或内嵌 WebView 仍可能不支持。
生产环境建议:AVIF 作为优选源,同时提供 WebP 或 JPG 回退,用浏览器自动选能解码的那一个。
若你的流水线编 AVIF 很慢、或团队还不熟回退写法,先把 WebP 做好往往性价比更高。
一张对照表(经验向)
要发给「任何人、任何设备」→ JPG。
现代网站主图/列表图,可接受回退 → WebP(或 AVIF + 回退)。
需要透明且走网页 → WebP 或 PNG;只要极致兼容的透明 → PNG。
邮件正文配图 → 仍偏 JPG。
不确定时:先转 WebP 与 JPG 各一版,用 图片压缩 对比体积与观感再定。
和压缩、改尺寸的关系
格式只是故事的一半。像素过大时,先 改尺寸 再选格式,通常更省流量。
选好格式后仍偏大,再用 图片压缩 微调质量。有损格式请保留原件,避免多代压缩。
格式常见问题
- 能在站内互转吗?
- 可以。打开 JPG 转 WebP、PNG 转 AVIF、WebP 转 JPG 等转换页,或在 图片压缩 里选择输出格式。
- 转换会掉画质吗?
- 有损格式之间或反复编码可能叠加损伤。尽量从高质量原图转一次,并用预览自己判断。
- SVG 算哪一类?
- SVG 是矢量,适合图标与简单插画,和这三种位图照片格式不是同一回事。图标优先 SVG,照片用 JPG/WebP/AVIF。
- 苹果 HEIC 呢?
- HEIC 是拍摄/存储格式,网页分发仍常转成 JPG 或 WebP。Windows 打不开时见 Windows 打开 HEIC。
- 透明 Logo 能否用 JPG?
- 不能真正保留透明。请用 PNG/WebP,或先到 透明 PNG 转 JPG 垫底色后再交只收 JPEG 的系统。