跳到正文

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 各一版,用 图片压缩 对比体积与观感再定。

和压缩、改尺寸的关系

格式只是故事的一半。像素过大时,先 改尺寸 再选格式,通常更省流量。

选好格式后仍偏大,再用 图片压缩 微调质量。有损格式请保留原件,避免多代压缩。

发布前先压一压

格式选定后,用 图片压缩 对照体积与预览,再上传 CDN 或文章。

打开图片压缩

格式常见问题

能在站内互转吗?
可以。打开 JPG 转 WebPPNG 转 AVIFWebP 转 JPG 等转换页,或在 图片压缩 里选择输出格式。
转换会掉画质吗?
有损格式之间或反复编码可能叠加损伤。尽量从高质量原图转一次,并用预览自己判断。
SVG 算哪一类?
SVG 是矢量,适合图标与简单插画,和这三种位图照片格式不是同一回事。图标优先 SVG,照片用 JPG/WebP/AVIF。
苹果 HEIC 呢?
HEIC 是拍摄/存储格式,网页分发仍常转成 JPG 或 WebP。Windows 打不开时见 Windows 打开 HEIC
透明 Logo 能否用 JPG?
不能真正保留透明。请用 PNG/WebP,或先到 透明 PNG 转 JPG 垫底色后再交只收 JPEG 的系统。

试试这些转换