简介
AVIF是最年轻但最高效的高级图像压缩编解码器。相同的图像质量AVIF文件大小比JPEG小10倍。 AVIF不仅支持标准动态范围(SDR)图像,还支持高动态范围(HDR)和宽色域(WCG)。它可以存储单个图像和图像序列。 AVIF是符合HEIF标准的格式。 Netflix在2018年发布了第一张AVIF格式的图像,但仍只有少数软件支持它。
在浏览器中使用AVIF
使用AVIF (AV1 Still Image File Format) polyfill可以在浏览器中正常显示avif
格式的图片。
功能
- Small, optional dependency, <4kb minified & gzipped
- Intercepts AVIF fetch requests so works in any scenario
- Uses native decoder if possible and should be reasonably fast
使用
npm install avif.js
// Put this to reg.js and serve avif-sw.js from web root // Both scripts should be transpilled (either manually with e.g. browserify or // automatically by parcel) require("avif.js").register("/avif-sw.js");
<body> <!-- Register worker --> <script src="reg.js"></script> <!-- Can embed AVIF with IMG tag now --> <img src="image.avif"> <!-- Or via CSS property --> <div style="background: url(image2.avif)"> some content </div> </body>
支持的浏览器
With native decoder:
- Chrome Desktop 70+
- Firefox 63+ (with
media.av1.enabled
activated) - Firefox for Android 64+ (with
media.av1.enabled
andmedia.av1.use-dav1d
activated) - Edge 18+ (with
AV1 Video Extension
installed) - Bromite 71+
With AV1 polyfill:
- Chrome 57+
- Firefox 53+
- Edge 17+
- Safari 11+