什么是AVIF?如何在你的网站上使用AV1格式图像

独角龙
• 阅读 3309

什么是AVIF?如何在你的网站上使用AV1格式图像

AV1图像格式或AVIF是地球上最新的图像编解码器。AVIF是一种优化的图像格式,旨在使我们的图像更小,同时保持相同的质量(无损),AVIF的文件扩展名是 .avif

在本文中,我想谈谈它的功能和好处,以及为什么你应该开始使用AVIF。我还将向你展示在你的网站上包含AVIF图像的安全方法。

什么是AVIF,它如何工作?

AVIF是从开放媒体联盟(AOM)开发的如今流行的视频格式AV1的关键帧中提取的。

什么是AVIF?如何在你的网站上使用AV1格式图像

AOM开发AVIF的目的是提供免版税的图像,与现有的图像格式相比,具有更好的压缩效率和更多的功能支持。

AVIF现在有来自Google,Netflix和Apple等大公司的支持者。

为什么AVIF更好?

在它的前辈(WebPJPEG-XRJPEG2000PNGGIF)之后,AVIF兼容高动态范围成像。它支持全分辨率的10位和12位颜色,所生成的图像比其他已知格式小10倍。

AVIF对于Web开发人员是一个不错的选择,因为:

  • 它是免版税的,所以你可以免费使用,不用担心授权问题。
  • 目前,它得到了许多大型技术公司的支持,例如Google,Amazon,Netflix,Microsoft等。
  • 它具有最佳压缩率。
  • 它具有更多的现代功能,如透明度,HDR,宽色域等等。

如何开始使用AVIF图像

现在,我们进入本教程的有趣部分。开始使用AVIF图像的主要方法有两种:

  1. 一种是将旧图像转换为AVIF。
  2. 另一种方法是使用支持AVIF的图像编辑器创建AVIF图像。

如何将旧图像转换为AVIF

由于AVIF仍处于起步阶段,因此以AVIF格式创建图像的最简单方法是转换旧格式。

这可以简单地在线完成,因为有许多在线AVIF图像转换器。AVIF online converter是我的选择,因为它更简单,并且似乎是可用最快的在线转换器。

什么是AVIF?如何在你的网站上使用AV1格式图像

只需按照以下步骤将图像转换为AVIF:

  1. 访问AVIF online converter。
  2. 上传你的旧图片(可以是PNGJPEGGIF等)。
  3. 等待网站处理转换。
  4. 保存新的AVIF文件。

如何使用支持AVIF的图像编辑器创建AVIF图像

图像编辑器增加了对AVIF图像创建的支持。这些编辑器现在完全支持AVIF图像:

  • Microsoft Paint –从“19H1”更新开始,你现在可以在Microsoft Paint上以“另存为” AVIF格式绘制图像。
  • 用于Windows和Linux的GIMP从2.10.22更新开始就提供了AVIF支持。
  • Photoshop开发人员也在讨论如何支持AVIF,希望这将很快得到支持。

如何在你的网站上使用AVIF

AVIF仍然是一种相对较新的技术。但现在大多数现代浏览器都支持这种格式,这意味着你可以直接在 <img> 标签中使用它。只是要记住,并不是所有的浏览器都完全支持该格式。

使用AVIF的最好方法是通过内容协商,我们将使用支持内容协商的HTML 5 <picture><source>

什么是AVIF?如何在你的网站上使用AV1格式图像

你可以在此处查看实际示例:https://lyty.dev/diy/how-to-u...

哪些浏览器支持AVIF

  • 第一个完全支持AVIF的浏览器是Chrome 85。
  • Microsoft Windows 10还在“19H1”更新中添加了支持。
  • Mozilla仍在努力支持Firefox中的图像格式。

最后

AVIF是一个游戏规则的改变者,很快就会成为世界上真正的图像格式。由于它的潜在功能,它很可能很快就会在所有平台上获得全面支持。

与谷歌的WebP图像不同,苹果花了整整10年的时间来支持,AVIF很快就引起了苹果的兴趣,以至于他们现在为这个项目做出了贡献。

你准备好在网站上开始使用AVIF了吗?


原文:https://blog.zhangbing.site
来源:https://www.freecodecamp.org

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Karen110 Karen110
4年前
PyQt转换显示Python-OpenCV图像实现图形化界面的视频播放
一、引言在PythonOpenCV中显示图像时调用的是一个单独的窗口,有时我们需要将这些图像显示在PyQt的图形化界面上,这样就可以将整个图像显示与PyQt图形化界面进行整合。但OpenCV格式的图像和PyQt格式的图像并不同,这就需要进行转换。二、背景知识1.PythonOpenCV的图像是BGR格式的,而PyQt图像格式是RGB格式的,二者需要转换;
Stella981 Stella981
3年前
IM4Java + GraphicsMagick 实现高清图片剪裁处理
_简单介绍_GraphicsMagick是ImageMagick的一个分支,相对于ImageMagick而言,TA处理速度更快,消耗资源更少。GraphicsMagick是一个用来读写、生成超过90种图像格式的工具集合,支持包括TIFF,JPEG,JPEG2000,PNG,PDF,PhotoCD,SVG,和GIF等图像格式。G
Stella981 Stella981
3年前
SVG 图像入门教程
作者:阮一峰 www.ruanyifeng.com/blog/2018/08/svg.html一、概述SVG是一种基于XML语法的图像格式,全称是可缩放矢量图(ScalableVectorGraphics)。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,
Stella981 Stella981
3年前
Dicom关键概念
数据格式    DICOM将信息分组到datasets中,这意味着胸部X射线图像的文件实际上包含文件中的患者ID,因此图像永远不会被错误地与该信息分开。类似的,JPEG等图像格式也可以使用嵌入式tags中。    DICOM数据对象由许多属性组成,包括名字,ID等,还有一个包含图像像素数据的特殊属性。单个DICOM对象只能包含一个包含像素数
Easter79 Easter79
3年前
SVG 图像入门教程
作者:阮一峰 www.ruanyifeng.com/blog/2018/08/svg.html一、概述SVG是一种基于XML语法的图像格式,全称是可缩放矢量图(ScalableVectorGraphics)。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,
流浪剑客 流浪剑客
1年前
Mac简单好用的看图软件:XnViewMP for Mac中文版 支持M1
是一款跨平台的图像浏览器和转换工具。它支持超过500种不同的图像格式,可以快速浏览、排序、管理和转换图像,同时还可以进行基本的编辑和调整操作。以下是XnViewMP的一些特点:1.多平台支持:XnViewMP支持Windows,MacOS和Linux等多个
燕青 燕青
1年前
Mac看图软件:XnViewMP for Mac中文版 支持M1
是一款跨平台的图像浏览器和转换工具。它支持超过500种不同的图像格式,可以快速浏览、排序、管理和转换图像,同时还可以进行基本的编辑和调整操作。以下是XnViewMP的一些特点:1.多平台支持:XnViewMP支持Windows,MacOS和Linux等多个