两者都不是“照片专用”
WebP 和 AVIF 都能覆盖有损图片,并支持透明等现代网页需求。对照片和复杂插画,二者通常都能比传统 JPEG/PNG 提供更有竞争力的体积。
AVIF 往往更省,但要用自己的图片比较
MDN 和 web.dev 都指出 AVIF 在压缩效率上有优势。不过同样文件大小下的观感、编码耗时以及工具链支持并不总是一样。
遇到线条、肤色渐变和带颗粒纹理的插画,更稳妥的做法是直接比较 100% 局部,而不是只看压缩报告里的百分比。
小网站没必要同时维护四五套格式
如果你的构建工具能自动生成 AVIF、WebP 和 fallback,那很好;如果每张图都靠手工导出,多一个格式就多一份出错机会。
低维护站点更应该选择“自动化稳定”的方案,而不是理论上压缩最极致的方案。
先解决大尺寸,再讨论编码器
很多页面的真正问题不是 WebP 还是 AVIF,而是一张首屏图原始宽度 5000px。先把实际显示尺寸和响应式图片做好,收益通常比反复微调编码参数更明显。
做缓存和 CDN 时还要看内容类型
如果图片由 CDN 自动协商格式,通常比手工维护每张图的 AVIF/WebP 版本省心。自己托管时则要确认服务器返回正确的 Content-Type,避免图片文件本身没问题,却因为响应头配置导致浏览器处理异常。