使用 AVIF 图片，优化前端项目-CFANZ编程社区

概述

简介

一种压缩体积、画质兼具的图片格式

特点

压缩强度高
极大程度还原画质
兼容性很差，需要使用垫片库

垫片库兼容性

Chrome 57+
Firefox 53+
Edge 17+
Safari 11+

图片格式转换工具

https://convertio.co/zh/formats/avif/

demo

初始化项目

yarn init -y
yarn add avif.js
yarn add -D parcel-bundler

编写脚本命令

// package.json
"scripts": {
    "build-sw": "parcel build ./node_modules/avif.js/avif-sw.js",
    "serve": "parcel index.html -p 666"
}

HTML入口

// index.html
// 通过格式转换工具，将 .jpg 转换成 .webp .avif，并存放在 img 目录
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./main.js"></script>
    </head>
    <body>
        <div>
            <h1>JPEG</h1>
            <img src="./img/demo.jpg">
        </div>
        <div>
            <h1>WEBP</h1>
            <img src="./img/demo.webp">
        </div>
        <div>
            <h1>AVIF</h1>
            <img src="./img/demo.avif">
        </div>
    </body>
</html>

调用 avif.js

// main.js
require("avif.js").register("/avif-sw.js")

打包 ServiceWorker 脚本

yarn build-sw

启动项目

yarn serve