AV1图像格式或AVIF是地球上最新的图像编解码器。AVIF是一种优化的图像格式,旨在使我们的图像更小,同时保持相同的质量(无损),AVIF的文件扩展名是 .avif。
在本文中,我想谈谈它的功能和好处,以及为什么你应该开始使用AVIF。我还将向你展示在你的网站上包含AVIF图像的安全方法。
AVIF是从开放媒体联盟(AOM)开发的如今流行的视频格式AV1的关键帧中提取的。
AOM开发AVIF的目的是提供免版税的图像,与现有的图像格式相比,具有更好的压缩效率和更多的功能支持。
AVIF现在有来自Google,Netflix和Apple等大公司的支持者。
在它的前辈(WebP、JPEG-XR、JPEG2000 和PNG、GIF)之后,AVIF兼容高动态范围成像。它支持全分辨率的10位和12位颜色,所生成的图像比其他已知格式小10倍。
AVIF对于Web开发人员是一个不错的选择,因为:
现在,我们进入本教程的有趣部分。开始使用AVIF图像的主要方法有两种:
由于AVIF仍处于起步阶段,因此以AVIF格式创建图像的最简单方法是转换旧格式。
这可以简单地在线完成,因为有许多在线AVIF图像转换器。AVIF online converter是我的选择,因为它更简单,并且似乎是可用最快的在线转换器。
只需按照以下步骤将图像转换为AVIF:
图像编辑器增加了对AVIF图像创建的支持。这些编辑器现在完全支持AVIF图像:
AVIF仍然是一种相对较新的技术。但现在大多数现代浏览器都支持这种格式,这意味着你可以直接在 <img> 标签中使用它。只是要记住,并不是所有的浏览器都完全支持该格式。
使用AVIF的最好方法是通过内容协商,我们将使用支持内容协商的html 5 <picture> 和 <source>。
你可以在此处查看实际示例:https://lyty.dev/diy/
AVIF是一个游戏规则的改变者,很快就会成为世界上真正的图像格式。由于它的潜在功能,它很可能很快就会在所有平台上获得全面支持。
与谷歌的WebP图像不同,苹果花了整整10年的时间来支持,AVIF很快就引起了苹果的兴趣,以至于他们现在为这个项目做出了贡献。
你准备好在网站上开始使用AVIF了吗?
原文:https://blog.zhangbing.site
来源:https://www.freecodecamp.org
今天,在我们的世界里充满了数据,图像成为构成这些数据的重要组成部分。但无论是用于何种用途,这些图像都需要进行处理。图像处理就是分析和处理数字图像的过程,主要旨在提高其质量或从中提取一些信息,然后可以将其用于某种用途
一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像文件,不同类型的图像特点不同,适用的范围也不同
在做H5应用中,有时候会涉及到一些图片加工处理的操作,nodejs有一个很好的后台图片处理module,就是这里说的gm。nodejs使用gm模块进行图像处理的方法如下:
在本文中,我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储,但是很容易就能完成这个任务。要了解我们要完成的工作,请看以下动画:
本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 -- overflow: clip,使用它,轻松的对溢出方向进行控制。首先,简单介绍下 overflow: clip 的用法。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!