下一代图片格式AVIF，比webp还能小一半！

什么是AVIF

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

对比下png webp avif大小

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

从上图明显看出avif比webp还能小一半文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

兼容性

目前Chrome 85版本和Firefox 86版本已经支持了AVIF格式，但是换句话来说，除了低于这两个版本的浏览器都不支持，而且ios全部都不支持，所以需要使用降级方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

优雅降级方案

在不支持对应的格式图片环境下，就会使用回原图png格式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

推荐一款本人写的vite插件：vite-plugin-images-sharp，npm地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

插件会把png,jpg图片生成一份成webp和avif格式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/50524.html

用法

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
}