简介

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 and media.av1.use-dav1d activated)
  • Edge 18+ (with AV1 Video Extension installed)
  • Bromite 71+

With AV1 polyfill:

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

Related Posts