乐趣区

关于前端:使用-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

退出移动版