下一代图片格式AVIF，更快、更清晰，速速启用！

2023-05-17 06:42:56

AVIF：下一代图像格式的革命

超越JPEG和WebP的优势

互联网正在以前所未有的速度发展，图像在我们的日常在线体验中扮演着越来越重要的角色。随着更高分辨率显示器和更快的互联网连接的普及，对图像质量和文件大小的更高要求也随之而来。在这种背景下，AVIF横空出世，作为下一代图像格式的领军者，它拥有以下三大优势：

更高的压缩率： AVIF利用先进的AV1视频编解码器，即使在保持高图像质量的情况下，也能实现更高的压缩率。这意味着更小的文件尺寸可以呈现相同的图像内容，从而节省宝贵的带宽和存储空间。
更好的画面细节： AVIF支持更高的色深和更宽广的色域，这意味着它可以呈现更丰富的图像细节和更逼真的色彩。这对于需要精准色彩再现的摄影、设计和艺术等领域尤为重要。
更流畅的动画： AVIF还支持动画，并且具有比传统GIF动图和视频短片更流畅的动画效果。这种优势使它成为创建引人注目的交互式内容和增强用户体验的理想选择。

在Web上显示AVIF图像

为了在Web端显示AVIF格式图像，可以使用以下两种主要方案：

1. 通过<picture>元素

<picture>元素是HTML5中引入的，它允许开发者为不同的浏览器提供不同的图像格式。通过<source>元素指定不同的图像格式，浏览器会根据自己的支持情况选择合适的格式。

<picture>
  <source src="image.avif" type="image/avif">
  <source src="image.webp" type="image/webp">
  <img src="image.jpg" alt="My Image">
</picture>

2. 通过JavaScript

对于不支持<picture>元素的浏览器，可以使用JavaScript动态加载AVIF图像。

if (supportsAVIF()) {
  const image = new Image();
  image.src = 'image.avif';
  image.onload = () => {
    document.getElementById('image-container').appendChild(image);
  };
} else {
  const image = new Image();
  image.src = 'image.jpg';
  image.onload = () => {
    document.getElementById('image-container').appendChild(image);
  };
}

function supportsAVIF() {
  return !!(document.picture && window.ImageDecoder && window.ImageDecoder.prototype.decode);
}