使用 AVIF 图片格式

更新日期: 2021-01-13阅读: 2.7k标签: 图片
文字需要翻译,图片不用。在图片的世界,不管是中国人、印度人、美国人、英国人的笑,全世界的人都能明白那是在笑。图片所承载的情感是全球通明的。

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

面对动辄 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 一下。
博客地址


链接: https://www.fly63.com/article/detial/10074

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!