前面写了个文章讲述关于HDR的事情，我也通过HDR了解到了关于AVIF格式的相关信息。越看越喜欢。我想将我的博客文章也换成avif。

avif的体积优势真的太大了。另外我已经实现了全站avif，在支持avif的浏览器下你在本博客访问的绝大多数图片均使用avif格式。

本站已实现全站avif。

就以我的一张图片来说。

尺寸

左侧是我的avif图片，109kb，右侧是我的webp格式图片，474kb。

恐怖如斯有木有。

比如我的博客封面图。

封面图

左侧是我的avif格式图片，仅4kb，右侧是我原本的webp图片，要8kb

在我观察，图片越大压缩的能力越强。我的友情链接图标webp大致在5kb左右，转换为avif几乎没有尺寸缩小。可能已经是极限了。

我们在访问b站的时候就可以看到b站图片都已经是avif了。

avif格式兼容性：

兼容性情况

方法一：使用EO来显示avif

腾讯的边缘安全加速平台 EO平台是我们现在常用的全站加速方式之一，边缘安全加速平台 EO的媒体加速是限时免费的。

限时免费

根据文档，我们只需要在图片后面添加参数即可。

1
?eo-img.format=avif

例如你原本的图片是

1
https://example.com/1.jpg

我们只需要添加参数为：

1
https://example.com/1.jpg?eo-img.format=avif

即可实现avif格式显示。这个请求地址如果你想去兼容不支持avif的设备，需要想办法适配，比如通过js/html/nginx等。

方法二：使用COS+数据万象+CDN来显示avif

数据万象支持将图片压缩为avif，但是属于高级压缩，需要额外费用。

进入对象存储的存储桶。

存储桶

选择默认CDN加速域名。

在设置里有一个图片自适应压缩，点击修改配置。

图片自适应压缩

勾选webp和avif

勾选

cdn会判断设备是否支持avif，如果不支持则使用webp，如果webp也不支持则使用原图。

将avif图片存在本地

如果你不想对第三方服务有依赖，可以存在本地，然后js判断。

使用ffmpeg将图片转换为avif（推荐）

如果你还没有安装FFmpeg，请先安装。你可以在FFmpeg的官方网站下载适用于你的操作系统的版本，也可以使用包管理器安装（例如，Homebrew for macOS，apt for Ubuntu等）。

使用以下命令将图片转换为AVIF格式：

1
ffmpeg -i input_image.png output_image.avif

这里input_image.png是你的原始图片文件名，output_image.avif是你想要输出的AVIF格式文件名。

你可以通过添加一些参数来调整输出文件的质量和其他设置。例如：

1
ffmpeg -i input_image.png -c:v libaom-av1 -crf 30 -b:v 0 output_image.avif

-c:v libaom-av1：指定使用AOM AV1编码器。

-crf 30：设置恒定质量（Constant Rate Factor），值越低质量越高，范围一般是0-63。

-b:v 0：设置为0表示使用CRF模式而不是固定比特率。

使用ImageMagick将图片转换为avif

这个转换会比较麻烦。如果你还没有安装ImageMagick，请先安装。你可以在ImageMagick的官方网站下载适用于你的操作系统的版本，也可以使用包管理器安装（例如，Homebrew for macOS，apt for Ubuntu等）。

安装AVIF支持： ImageMagick需要libheif库来支持AVIF格式。你可以通过以下步骤安装：

  • macOS（使用Homebrew）：
1
brew install imagemagick libheif

使用以下命令将图片转换为AVIF格式：

1
magick input_image.png output_image.avif

你可以通过添加一些参数来调整输出文件的质量和其他设置。例如：

1
magick input_image.png -quality 50 output_image.avif

使用js来判断是否支持avif，不支持使用webp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
document.addEventListener('DOMContentLoaded', function() {
      // 从页面中提取第一个AVIF图片链接
      function getFirstAvifUrl() {
        const images = document.querySelectorAll('img');
        for (let img of images) {
          if (img.src.endsWith('.avif')) {
            return img.src;
          }
        }
        return null;
      }
    
      // 检测浏览器是否支持AVIF格式
      function supportsAvif(url) {
        return new Promise(resolve => {
          const avif = new Image();
          avif.src = url;
          avif.onload = () => {
            console.log("AVIF supported");
            resolve(true);
          };
          avif.onerror = () => {
            console.log("AVIF not supported");
            resolve(false);
          };
        });
      }
    
      // 替换图片URL中的avif为webp
      function replaceAvifWithWebp() {
        const images = document.querySelectorAll('img');
        images.forEach(img => {
          if (img.src.endsWith('.avif')) {
            console.log("Replacing AVIF with WebP for image:", img.src);
            img.src = img.src.replace('.avif', '.webp');
          }
        });
      }
    
      const firstAvifUrl = getFirstAvifUrl(); // 获取第一个AVIF图片链接
      if (firstAvifUrl) {
        // 使用第一个AVIF图片链接进行检测
        supportsAvif(firstAvifUrl).then(supported => {
          if (!supported) {
            replaceAvifWithWebp();
          } else {
            console.log("AVIF images will be used.");
          }
        });
      } else {
        console.log("No AVIF images found on the page.");
      }
    });