前面写了个文章讲述关于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.");
}
});