0
点赞
收藏
分享

微信扫一扫

使用 AVIF 图片,优化前端项目

颜路在路上 2021-09-24 阅读 49

概述

简介

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

特点
  • 压缩强度高
  • 极大程度还原画质
  • 兼容性很差,需要使用垫片库
垫片库兼容性
  • 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
举报

相关推荐

0 条评论