likes
comments
collection
share

下一代图片格式AVIF，赶紧用起来吧

作者站长头像
站长
· 阅读数 15

什么是AVIF

AVIF是一种基于AV1视频编码的新图像格式，相对于JPEG，WEBP这类图片格式来说，它的压缩率更高，并且画面细节更好。而最关键的是，它是免费且开源的，没有任何授权费用。 同时，它是由开放媒体联盟推动的一个标准，这个联盟包括了谷歌，微软，苹果等巨头，可以说是未来可期。

对比下png webp avif大小

下一代图片格式AVIF，赶紧用起来吧 下一代图片格式AVIF，赶紧用起来吧 下一代图片格式AVIF，赶紧用起来吧

从上图明显看出avif比webp还能小一半

类型50分位数压缩率85分位数压缩率
WebP-30%-20%
AVIF-50%-40%

兼容性

目前Chrome 85版本和Firefox 86版本已经支持了AVIF格式，但是换句话来说，除了低于这两个版本的浏览器都不支持，ios16以下都不支持，所以需要使用降级方案。

优雅降级方案

第一次进去页面，先使用js加载一张最小的avif图片，判断浏览器是否兼容，把结果储存到localStorage，下次再进入页面就不需要再次判断。 在不支持对应的格式图片环境下，降级使用回原图png格式。

推荐一款本人写的vite插件：vite-plugin-images-sharp，npm地址

插件会把png,jpg图片生成一份成webp和avif格式

用法

npm install vite-plugin-images-sharp -D

import imagesSharp from 'vite-plugin-images-sharp';

export default defineConfig({
  plugins: [
      imagesSharp({
          entry: join(__dirname, './src/public/images'),  //入口目录
          outDir: join(__dirname, './artifact/images'),  //输入目录
      })
  ]
});

imagesSharp配置

{
        entry: '', //入口
        imageType: ['.png', '.jpg'], // 处理图片类型
        sharpType: ['webp'], //生成的格式
        outDir: '', //输出目录
        compileTime: 'after', //编译时机  编译前：before   编译后：after
}