背景
WebP 格式发布已有十余年，但不少站点至今仍未使用，只为兼顾极少数低版本浏览器。至于之后 AVIF 格式，使用的站点就更少了。
然而图片往往是流量大户，与其费尽心机优化脚本体积，可能还不如转换一张大图带来的收益更多。据 caniuse 统计，如今有 83% 的用户支持 AVIF、96% 的用户支持 WebP。先进的格式触手可得，却因兼容性问题仍坚守 PNG、GIF 等古老格式，白白浪费网站流量，以及用户加载时间，实在浪费。
事实上，对于同一个图片 URL，完全可为低版本浏览器使用老格式，为高版本浏览器使用新格式，从而实现无缝兼容。
而像 Amazon、 eBay、 Shopify...主流的电商网站也已使用 WebP/AVIF 以改善页面性能、提升用户体验，并提供更好的图像展示效果。
WebP 是一种由Google开发的图像格式，旨在提供更好的压缩效率和图像质量。它支持透明度和动画，并且通常比PNG格式具有更小的文件大小， WebP格式比JPEG图像小40% 。WebP 可以更显著地压缩网页上照片的大小，使网站加载速度比以前更快。同时WebP也支持透明图层和多图片动图，它是透明PNG图片和GIF动图绝佳的替代方案。
- 更小的文件大小，实现更高的压缩率。
- 支持透明度，可创建带有透明背景的图像。
- 支持动态图像，可创建动画效果。
- 提供良好的图像质量。
AVIF（AV1 Image File Format）是一种基于AV1视频编解码器的开放图像格式。用于将AV1压缩的图片或图片序列存储为HEIF文件格式。目前主流流媒体公司如 NETFLIX 和谷歌（谷歌浏览器）都支持这种格式，AVIF图片格式看起来前途无限。像WebP一样，AVIF 也支持透明图片和多图片动图。因此也是PNG图片和GIF动图的替代方案。
- 更高的压缩效率，实现更小的文件大小。
- 提供出色的图像质量，保留更多细节。
- 支持广色域和高动态范围（HDR），呈现更丰富、真实的颜色和光照效果。
- 支持动态图像，可创建动画效果。
质量为90的JPEG格式图片相比，质量为90的WebP格式图片和质量为50的AVIF格式图片的PSNR值对比
而它们在图片大小上的差距却是惊人
总结起来，WebP和AVIF都是现代的图像格式，它们在文件大小、图像质量和特性支持方面相较于传统的JPEG格式具有明显的优势。它们在Web开发和图像处理中越来越受欢迎，帮助提升了网络图像的性能和用户体验。
实现无缝兼容原理
通过 service work 根据浏览器版本，图片自动返回 AVIF、WebP 或传统格式。
service work 能拦截当前站点产生的所有请求，并能控制返回结果，相当于一个反向代理服务。于是我们可以在 Service Worker 中判断 Accept 请求头，然后代理到相应的 URL。
因此我们可以在不修改任何业务代码的情况下做到图片的无缝兼容替换。
WebP/AVIF 相关性能优势参考：
