实现全站图片使用avif格式，替代臃肿的webp教程
内容提要
本文介绍了AVIF格式的优势和使用方法，包括转换图片、显示图片和判断浏览器支持。作者提供了使用EO平台和COS+数据万象+CDN两种方法来显示AVIF格式的图片。同时，还介绍了使用FFmpeg和ImageMagick转换图片为AVIF格式的方法。
延伸解读
AVIF 与 WebP 的体积对比
文章通过实际图片对比显示，AVIF 格式在体积上显著优于 WebP。例如，一张图片从 WebP 的 474KB 压缩到 AVIF 的 109KB，另一张封面图从 8KB 降至 4KB。作者指出，图片越大，AVIF 的压缩优势越明显；但对于小图标（如 5KB 左右的 WebP），转换为 AVIF 后体积几乎无变化，可能已接近压缩极限。
两种 AVIF 显示方案：EO 与 COS+数据万象
文章介绍了两种通过云服务显示 AVIF 的方法。方法一使用腾讯 EO 平台，只需在图片 URL 后添加参数 `?eo-img.format=avif` 即可，且媒体加速限时免费，但需自行适配不支持 AVIF 的设备。方法二使用 COS+数据万象+CDN，在存储桶中开启图片自适应压缩并勾选 AVIF，CDN 会自动判断设备支持情况，依次回退到 WebP 或原图，但该功能属于高级压缩，需要额外费用。
本地转换 AVIF 的工具与注意事项
若不想依赖第三方服务，可将 AVIF 图片存在本地，并通过 JavaScript 检测浏览器支持。转换工具方面，FFmpeg 可直接使用命令 `ffmpeg -i input.png output.avif`，或通过参数调整质量；ImageMagick 则需要安装 libheif 库来支持 AVIF，转换命令为 `magick input.png output.avif`，并可通过 `-quality` 参数控制质量。
浏览器兼容性处理：JavaScript 回退方案
文章提供了一段 JavaScript 代码，用于检测浏览器是否支持 AVIF。其原理是尝试加载页面中的第一个 AVIF 图片，若加载失败则判定不支持，并将所有 `.avif` 后缀的图片替换为 `.webp` 格式。这种方法简单直接，但依赖于页面中存在 AVIF 图片，且替换操作在 DOM 加载完成后执行。
Q&A
AVIF格式相比WebP格式有什么优势？
AVIF格式的图片体积明显小于WebP格式，具有显著的体积优势。
如何在我的网站上实现AVIF格式的图片显示？
可以使用EO平台通过添加参数显示AVIF格式，或使用COS+数据万象+CDN进行显示。
使用FFmpeg转换图片为AVIF格式的步骤是什么？
安装FFmpeg后，使用命令 `ffmpeg -i input_image.png output_image.avif` 进行转换。
ImageMagick如何转换图片为AVIF格式？
需要安装ImageMagick和libheif库，然后使用命令 `magick input_image.png output_image.avif` 进行转换。
如何判断浏览器是否支持AVIF格式？
可以使用JavaScript检测，创建一个AVIF图片对象并监听其加载状态来判断支持情况。
使用COS+数据万象+CDN显示AVIF格式图片需要注意什么？
使用COS+数据万象+CDN显示AVIF格式需要额外费用，并需在设置中勾选webp和avif。
