AVIF（AV1 Image File Format）是一种基于 AV1 视频编码的现代图像格式，具有高压缩率、高画质、支持透明通道和 HDR等优势。在 Web 应用中，它正逐步替代 JPEG、PNG 和 WebP。
上图为webp格式
上图为avif格式
444、422、420，指的是 色度子采样（Chroma Subsampling） 模式，它直接影响图像的色彩精度、文件大小和视觉质量。以下是它们在 AVIF 中的区别及 Web 使用建议：
一、色度子采样模式详解（以 YUV 色彩空间为基础）
| 模式 | 全称 | 色度采样方式 | 色彩精度 | 文件体积 | 适用场景 |
| YUV444 | 4:4:4 | 每个像素都有独立的亮度（Y）和色度（U/V）信息 | 最高，无色度压缩 | 最大 | 专业摄影、医学影像、需要极致色彩保真的场景 |
| YUV422 | 4:2:2 | 水平方向每 2 个像素共享 1 组色度信息，垂直方向全采样 | 中等，轻微色彩损失 | 中等 | 视频编辑、高质量图像，但 Web 较少用 |
| YUV420 | 4:2:0 | 水平和垂直方向都每 2 像素共享 1 组色度（即 4 像素共用 1 组 UV） | 较低，色度信息减少 75% | 最小 | Web 图像、视频流媒体（如 YouTube、Netflix）主流选择 |
| 💡 人眼对亮度（Y）敏感，对色度（U/V）不敏感，因此 420 在大多数情况下肉眼难以察觉差异，却能大幅减小文件体积。 | |||||
二、AVIF 在 Web 中推荐使用哪种？
✅ 绝大多数 Web 场景应选择 YUV420，原因如下：
1. 兼容性最好：
Chrome、Firefox、Edge 等主流浏览器对 AVIF 的支持主要集中在 420 模式。部分浏览器（如 Safari 16.4+）虽支持 444/422，但默认或优先解码 420。
2. 体积优势显著：
相比 444，420 可减少 30%~50% 文件大小，而主观画质损失极小（尤其在照片、自然图像上）。
3. 性能更优：
解码 420 所需计算资源更低，加载更快，适合移动端和低带宽用户。
4. 行业标准：
WebP、JPEG XL、HEIC、H.264/265 视频等均以 420 为主流，AVIF 遵循同一实践。
三、什么时候考虑 444 或 422？
仅在以下特殊场景才需考虑更高色度精度：
- 含精细文字或线条图的截图（如 UI 截图、图表）：420 可能导致彩色边缘出现“色晕”（chroma blur）。
- 需要后期调色或高保真存档：如设计稿交付、印刷预览。
- 透明通道 + 高饱和边缘：420 可能在透明边缘产生杂色（但可通过 alpha 通道优化缓解）。
🔧 提示：对于文字/图形类图像，可考虑：
- 使用 PNG（无损）；
- 或用 AVIF + 无损压缩（--lossless）（此时色度采样影响较小）；
- 或强制 AVIF 444（但需测试浏览器兼容性）。
四、实操建议（Web 开发者）
<!-- 推荐：使用 <picture> 实现优雅降级 -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="描述">
</picture>编码 AVIF 时，默认使用 420（如通过 avifenc、Squoosh、Sharp 等工具）。
若需 444，需显式指定（如 avifenc --subsampling 4:4:4），但慎用。
总结
| 需求 | 推荐色度采样 |
| 普通照片、背景图、电商产品图 | ✅ YUV420 |
| 含文字/线条的 UI 截图 | ⚠️ 优先 PNG / WebP；若用 AVIF，可试 444（但测兼容性） |
| HDR、高保真图像展示 | 可考虑 420（AVIF HDR 本身已很强大） |
| 追求最小体积 + 广泛兼容 | ✅ YUV420 是 Web 最佳选择 |
结论：用于 Web 时，AVIF 应首选 420 色度采样——在画质、体积、兼容性之间取得最佳平衡。
