概述
简介
一种压缩体积、画质兼具的图片格式
特点
- 压缩强度高
- 极大程度还原画质
- 兼容性很差，需要使用垫片库
垫片库兼容性
- 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": {
"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("/node_modules/avif.js/avif-sw.js")
启动项目
yarn serve
网友评论