使用 AVIF 图片格式

文字须要翻译，图片不用。在图片的世界，无论是中国人、印度人、美国人、英国人的笑，全世界的人都能明白那是在笑。图片所承载的情感是全球通明的。

众所周知，一图胜千言，图片对于视觉的冲击效果远大于文字。但对于咱们的互联网而言，传输与解析一张图片的代价要远比"千言"大的多的多(目前上亿像素已经成为主流)。

面对动辄 10 多 M 的大型图片，使用优化的图像来节省带宽和加载时间无疑是性能优化中的重头戏，不管对于用户仍是公司都有巨大的意义。由于对于用户来讲，能够更早的看到图片，对于公司而言，更加省钱。

在不使用用户提供的图片时，最简单就能够使用 tinypng 网站针对各个图片进行图像压缩与优化。在减小了近 50% 大小的同时作到了肉眼没法区分，收益是很是大的。

AVIF 介绍

固然，目前最值得关注的新型图片格式是 AVIF（AV1 Image File Format，AV1图像文件格式，是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式。AVIF 来自于 Netflix(著名的流媒体影视公司), 在 2020 年情人节公布。

当遇到新的技术时候，咱们老是要考虑兼容问题，话很少说，咱们打开 caniuse 。

就这？就这？是的，虽然当前的浏览器支持状况堪忧，可是开发者为了浏览器提供了 4kb 的 polyfill:

在使用 avif 后，咱们能够使用的浏览器版本:

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

该格式的优点在于:

• 权威
  AVIF 图片格式由开源组织 AOMedia 开发，Netflix、Google 与 Apple 均是该组织的成员, 因此该格式的将来也是很是明朗的。
• 压缩能力强
  在对比中发现 AVIF 图片格式压缩很棒，基本上大小比 JPEG 小 10 倍左右且具备相同的图像质量。
• polyfill
  面对以前浏览器无力状况提供 polyfill，为当前情况下提供了可用性

若是是技术性网站或某些 Saas 产品就能够尝试使用。

使用 Sharp 生成 AVIF

Sharp 是一个转换格式的 node 工具库, 最近该库提供了对 AVIF 的支持。

咱们能够在 node 中这样使用：

const sharp = require("sharp");
const fs = require("fs");

fs.readFile("xxx.jpeg", (err, inputBuffer) => {
  if (err) {
    console.error(err);
    return;
  }

  // WebP
  sharp(inputBuffer)
    .webp({ quality: 50, speed: 1 })
    .toFile("xxx.webp");

  // AVIF 转换, 速度很慢
  sharp(inputBuffer)
    .avif({quality: 50, speed: 1})
    .toFile("xxx.avif");
});

在后端传入 jpg,png 等通用格式，这样咱们即可以在浏览器中直接使用 AVIF。

虽然 AVIF 是面向将来的图片格式，可是就目前来讲，在开发须要大量图片的业务时，使用专业的 OSS 服务和 CDN 才是更好的选择。

因为 OSS 服务支持jpg、png、bmp、gif、webp、tiff等格式的转换，以及缩略图、剪裁、水印、缩放等多种操做，这样就能够更简单的根据不一样设备(分辨率)提供不一样的图片。同时 CDN 也可让用户更快的获取图片。

鼓励一下

若是你以为这篇文章不错，但愿能够给与我一些鼓励，在个人 github 博客下帮忙 star 一下。
博客地址

参考资料

node-avif

tinypng

Sharp