besscroft
「优化建议」将 WebP 替换为 AVIF
根据 Caniuse 我注意到 AVIF 从 2024 年 1 月起已经被主流浏览器支持 ，所以我推荐将现在略缩图转化为 WebP 格式转为 AVIF 格式
AVIF 图像
AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。
备注：AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。
AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。
该格式可以提供：
- 与 JPG 和 PNG 相比，在视觉上相似的压缩水平下，有损压缩效果极佳（例如，有损 AVIF 图像比 JPEG 图像小 50%）。
- 一般来说，AVIF 比 WebP 有更好的压缩效果。对于相同的 JPG 图像集，中值压缩率为 50%，而 WebP 为 30%（资料来源：AVIF 与 WebP 的对比（CTRL 博客））。
- 无损压缩。
- 动画/多图像存储（类似于 GIF 动画，但压缩效果更好）
- 支持 Alpha 通道（即透明）。
- 高动态范围（HDR）：支持存储图像，使图像最亮和最暗部分之间的对比度更大。
- 宽色域：支持包含更大色彩范围的图像。
相对于现有的 WebP 替换理由
- AVIF 有损压缩效果最好，相较于WebP，AVIF在相同质量下文件大小平均减少约30%。
- AVIF 支持 HDR 图像，对于 iPhone 拍摄的图像可以更好的适配
- 减少压缩伪影：AVIF在压缩过程中能够有效减少常见的伪影，这使得其在高细节图像中表现更佳。
- AVIF 支持10位色深，WebP只支持8位色深
- 开源
该方案将被否决，我一开始就支持过 AVIF，直到某一天更新 Edge 后，发现被取消支持了。且不是所有用户用的浏览器版本都支持了 AVIF，所以综合考虑下来，暂时先不会上。
详见：https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#avif_%E5%9B%BE%E5%83%8F
Edge 在 2024 年 1 月 26 日发布的 Edge 121 版本已经恢复了 AVIF 的支持，并且以默认的方式提供。
同时 AVIF 已经获得了 Caniuse Baseline，在 Chrome、Edge、Safari 和 Firefox 中都可以使用，支持率已经有了 92.64%，已经获得了除了 IE 和 Opera Mini 以外所有的浏览器的支持。所以 AVIF 在项目浏览器支持的范围
我提出选择 AVIF 方案的意义在于解决 quality 0.2 下 WebP 格式存在的色块、涂抹问题，而在有损压缩下 AVIF 有明显的优势，无论色彩、形状、渐变都表现优异，有损压缩 AVIF 能够带来更好的效果 。
如果您继续选用 WebP 的话，那我推荐将 quality 设置为 0.95 。WebP 在 95 质量下色块、涂抹问题能够很好的控制。
在我的测试下 5.76 MB 的原图在 quality 90 大小为 250.96 KB（-96%，WebP），在 quality 20 下为 71.96 KB（-99%，WebP）和 21.24 KB （-100%，AVIF）。3%的差异我认为是可以接受的
我意识到我的建议只从图片显示效果进行考虑，确实不够全面，但是我希望您能够将 WebP 在较高压缩率时存在的色彩问题纳入权衡范围。
~~搞摄影都喜欢刀锐奶化嘛~~
看了下可以优先使用 AVIF，如果浏览器不支持的时候，可以设置回退，以 WebP 显示。有空会测试一下，可以的话下个版本更新。 https://nextjs.org/docs/app/api-reference/components/image#formats