AVIF 是一种高压缩效率的现代图片格式。很多时候，它能在接近相同视觉质量下，比 JPG 和 WebP 生成更小的文件。
不过 AVIF 不是“无脑替换所有图片”的格式。它更适合体积敏感的网页大图、封面图和缩略图；如果需要极致兼容性，仍然要准备 WebP 或 JPG 备用。
AVIF 适合什么场景？
- 网页首图和封面图：大图体积下降对加载速度影响明显。
- 图库缩略图：大量图片同时加载时，AVIF 的体积优势更明显。
- 照片类内容：自然纹理和渐变通常能获得不错压缩效果。
- 需要支持透明的现代网页图片：AVIF 可以保留 Alpha 通道。
什么时候不建议只用 AVIF？
AVIF 的压缩率很强，但编码更慢，某些浏览器或平台的支持仍然可能有限。如果目标用户环境复杂，建议同时提供 WebP 或 JPG fallback。
| 问题 | 影响 | 建议 |
|---|---|---|
| 编码较慢 | 批量转换可能耗时更长 | 先转换关键大图，不必所有小图都转 |
| 浏览器依赖 | 不支持时无法导出或显示 | 准备 WebP/JPG 备用 |
| 细文字截图 | 低质量可能出现边缘损失 | 提高质量或保留 PNG |
| 小图标 | 收益可能不明显 | 继续使用 PNG/SVG/WebP |
技术实现：AVIF 是怎么在浏览器里生成的？
ToolGarden 的图片转 AVIF 工具会先把源图片解码到 Canvas，再读取像素数据交给浏览器端 AVIF 编码器生成 image/avif 文件。整个过程在本地完成，不上传图片。
- 源图解码：支持 JPG、PNG、WebP、GIF、BMP、SVG 等浏览器可解码输入。
- SVG 栅格化：如果源图是 SVG，会先渲染成目标尺寸位图。
- Canvas 像素读取：通过 getImageData 读取 RGBA 像素数据。
- AVIF 编码：使用浏览器端 AVIF 编码模块，把像素数据编码为 AVIF 字节。
- 质量参数：质量滑块会映射为编码器质量值，影响体积和细节。
- Alpha 处理：编码参数会保留透明信息，适合透明图片场景。
- 文件校验：导出后检查 AVIF 文件签名，确认结果是真正的 image/avif。
用 toolgarden.xyz 转 AVIF 的步骤
- 打开 ToolGarden 的图片转 AVIF 工具。
- 上传 JPG、PNG、WebP、SVG 或其他支持的图片。
- 从默认质量开始转换，如果体积仍然偏大，再逐步降低质量。
- 对比预览，重点检查人脸、文字、暗部和渐变区域。
- 下载 AVIF 文件，或批量打包成 ZIP。
- 上线网页时，建议同时准备 WebP 或 JPG fallback。
AVIF 和 WebP 怎么选？
| 目标 | 优先选择 | 说明 |
|---|---|---|
| 最大压缩率 | AVIF | 通常更小，但编码更慢 |
| 兼容性更稳 | WebP | 现代网页支持广泛 |
| 照片大图 | AVIF 或 WebP | 都可以尝试，按预览和体积决定 |
| 透明素材 | WebP 或 AVIF | 都支持透明，但需要检查平台支持 |
| 旧平台兼容 | JPG/PNG | 作为 fallback 更稳 |
总结
AVIF 适合追求更小文件体积的现代网页图片，尤其是首图、封面图和大量缩略图。它的缺点是编码更慢，并且兼容性需要确认。
实际项目里，可以用 toolgarden.xyz 先把几张关键图片转成 AVIF，与 WebP/JPG 对比后再决定是否批量使用。