张洪Heo
·
实现全站图片使用avif格式，替代臃肿的webp教程
原文中文，约3400字，阅读约需9分钟。
📝
内容提要
本文介绍了AVIF格式的优势和使用方法，包括转换图片、显示图片和判断浏览器支持。作者提供了使用EO平台和COS+数据万象+CDN两种方法来显示AVIF格式的图片。同时，还介绍了使用FFmpeg和ImageMagick转换图片为AVIF格式的方法。
🎯
关键要点
-
AVIF格式具有显著的体积优势，已在博客全站实现。
-
AVIF格式的图片体积明显小于WebP格式。
-
使用EO平台可以通过添加参数显示AVIF格式的图片。
-
COS+数据万象+CDN支持将图片压缩为AVIF，但需额外费用。
-
可以使用FFmpeg将图片转换为AVIF格式，需安装FFmpeg并使用特定命令。
-
ImageMagick也可以转换图片为AVIF格式，但需安装libheif库。
-
可以使用JavaScript判断浏览器是否支持AVIF格式，并在不支持时替换为WebP格式。
❓
延伸问答
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。
🏷️
