WebP 与 AVIF 导出对比器

同一张图导出三种格式,看清楚到底省了多少,再决定值不值得加回退代码。

图片不上传
体积对比 导入图片后自动编码

常见问题

为什么表格里只有一两种格式?

说明当前浏览器不能编码其它格式。工具会先用探针图检测实际能力,做不到时直接标注,而不是产出一个名不副实的文件。

用截图测试为什么省得不多?

截图与纯色图本身压缩率就很高,三种格式的差距会明显变小。请用一张真实照片测试。

只导 AVIF 可以吗?

不建议。老设备不支持时整张图会加载失败,必须保留 WebP 或 JPG 兜底,工具会按顺序生成 picture 回退代码。

图片会上传吗?

不会。编码使用浏览器自带的编码器在本机完成,页面不请求任何转码接口。

同一个图,三种格式到底差多少

「换成 WebP 能省一半」这类说法在真实图片上经常对不上号:纯色图、截图、照片的收益差别很大。这个工具把你自己的图分别编码成 JPG、WebP 与 AVIF,列出实际字节数、相对 JPG 的节省比例与浏览器支持情况,再顺手生成带回退顺序的 picture 代码。

真实编码而非估算

用浏览器自带的编码器现场生成文件并测量体积,不是按经验公式推算。

支持能力检测

先探测浏览器能否编码 WebP 与 AVIF,不支持时直接标注,不产出坏文件。

节省比例一目了然

以 JPG 为基准给出百分比与条形图,最省的格式自动高亮。

回退代码现成

按 AVIF → WebP → JPG 顺序生成 picture 代码,宽度高度一并写好。

长边可限制

直接导出网页用的 1920 或 1280 分辨率,省掉另开工具缩图这一步。

本地完成

不依赖任何转码接口,图片不上传。

三个容易踩的坑

  1. 用截图和纯色图做测试。这类图本身压缩率就很高,三种格式差距很小,会得出「换格式没用」的错误结论。
  2. 只导 AVIF 不留回退。遇到不支持的浏览器会整张图加载失败,务必保留 WebP 或 JPG。
  3. 忘记写 width 与 height。没有尺寸属性的图片在加载时会引起布局跳动,这也是 Core Web Vitals 扣分项。