3种格式几乎涵盖了当今网络上的每张照片,JPG已经默认了三十年,WebP在2010年到来,现在每个当前的浏览器都会显示,AVIF是三者中最新的,建立在视频编解码器上,通常会制作最小的性能审核,告诉你"以现代格式"服务图像,然后上传表单或电子邮件客户端会拒绝你制作的现代文件。
择(choosing between them),少说哪种格式最好,多说图像走向何方,一个登陆页上的英雄图像,一个市场列表中的产品照片,以及一个电子邮件所附的图片,答案不同,本指南比较了决定它的三个属性:文件大小、质量、透明度、颜色深度、动画、编码成本和浏览器外部的支持,然后给出一个决策表,并显示如何在它们之间进行转换。
TL;博士: 对于网站上的图像,首先使用 AVIF,WebP 作为后备,JPG 作为最后的手段,使用
<picture>element或伺服器协商;avif通常最小,webp紧随其后且编码速度更快,jpg随处打开,对于离开浏览器(电子邮件、上传、列印、办公软体)的影像,在透明度重要时使用jpg或png,要使其他程式接受档案,the AVIF 到 JPG 转换器 webp 到 JPG 运行客户端,没有任何上传、免费、没有注册; JPG 到 WebP,PNG 到 WebP 则相反。
什么是 AVIF、WebP 和 JPG?
这三种都是照片的光栅图像格式,它们的不同之处主要在于压缩的年龄和设计。
JPG (JPEG) 是标准化后的静止图像方法 ITU-T 建议 T。81 1992年。它将图片分割成8x8像素块,用离散余弦变换每个变换,并丢弃眼睛最少注意到的高频细节。文件通常被包裹在JFIF容器中 国际电联-T T.871。
网络P 是谷歌's格式,现在指定在 RFC 9649。其有损模式采用VP8视频编解码器的关键帧编码,并具有单独的无损模式,加上透明度和动画。指南 webp 是什么以及为什么保存的图像会显示为。webp 深入涵盖它。
阿维夫 是AV1图像文件格式,由开放媒体联盟发布,名称为 AVIF 规范。它存储用编码的图像 AV1视频编解码器 heif容器内,使用相同的盒子结构iphone HEIC照片。AV1是开放媒体联盟提供的免版税专利许可,这是浏览器采用AVIF比HEIC更快的原因之一。
AVIF vs WebP vs JPG:比较表
AVIF 在压缩和能力方面处于领先地位,JPG 在兼容性和编码速度方面处于领先地位,WebP 几乎在每一行上都位于它们之间。
| 属性 | 阿维夫 | 网络P | JPG |
|---|---|---|---|
| 规格 | AOMedia AVIF、AV1 编解码器 | IETF RFC 9649 | ITU-T T。81 和 T。871 |
| 介绍 | 2019骞寸殑浜烘皯甯侊纴钖屾瘆澧为暱2019 | 2010 骞虫灏辨瘆涓婃湀锲炶惤 | 1992年 |
| 压缩 | 有损或无损 | 有损或无损 | 有损 |
| 典型的照片尺寸 | 最小的 | 小 | 三者中最大 |
| 位深度 | 8、10或12位每个通道 | 8位每个通道 | 实践中每个通道 8 位 |
| HDR 和宽颜色 | 是的 | 否 | 否 |
| 透明度 | 完整的阿尔法 | 完整的阿尔法 | 没有 |
| 动画 | 图像序列 | 是的 | 否 |
| 编码速度 | 速度慢,CPU 高,努力 | 中等 | 快 |
| 浏览器显示 | Chrome 85、Firefox 93、Safari 16、Edge 121 及更高版本 | 所有当前浏览器 | 通用 |
| 桌面应用程序、电子邮件、上传表格 | 最弱的 | 斑驳 | 通用 |
| 最好使用 | 字节最重要的最大网络图像 | 一般网络图像,广泛回退 | 离开浏览器的任何内容 |
令人们惊讶的行是编码速度。AVIF's小文件来自一个编码器,它可以用力搜索每个块的最佳编码方式,而该搜索需要时间。在几分钟内将数千张产品图像转换为WebP的构建步骤可以在高努力设置下为AVIF花费更长的时间。对于一个编码一次并服务数百万次的网站来说,交易通常是值得的。对于每次请求即时生成的图像,它可能不是。
哪种格式可以使文件最小?
AVIF通常以相似的视觉质量制作最小的文件,WebP是其次,JPG是最大的,间隙的大小很大程度上取决于图像和编码器的设置。
WebP 有一个已发布的参考点:Google's WebP 概述 在同等 SSIM 质量下,报告有损 WebP 文件比同类 JPEG 小 25% 至 34%,无损 WebP 比 PNG 小 26%。 AVIF 通常会再次改进 WebP 上的照片,在平滑梯度、天空和皮肤上获得最大的增益,其中 JPEG's 8x8 块首先显示。
三个警告要保持这些数字的诚实。
- 不同格式的质量数字不匹配。 80 画质的 JPG、80 画质的 WebP 和 80 画质的 AVIF 不是相同的视觉质量,相同格式的不同编码器也不同意。通过查看文件或 SSIM 等度量来比较文件,而不是通过滑块值。
- 低细节图像节省更少。 平面插图或已经严重压缩的 JPEG 几乎没有什么可挤压的。
- 重新编码有损文件堆栈丢失。 JPG转换为AVIF或WebP,从已经失去细节的图片开始。只要可以,从原始相机文件、PNG或高质量主机进行编码。
格式选择对于页面权重有多重要?
在图像较多的页面上最重要,因为图像通常是访问者下载内容的最大份额。算术很简单。一个目录页面包含 40 张产品照片,每张照片大约 400 KB,其中包含 16 MB 的图像,如 JPG。在为 WebP 保存 Google 报告 25% 至 34% 时,同一组落在大约 10.5 至 12 MB 之间。 AVIF 通常会在此基础上进一步修剪。
在快速的桌面连接上,差异不大。在通过缓慢移动网络的手机上,几兆字节是快速结算的页面与访问者放弃的页面之间的间隙,页面顶部附近的图像直接输入最大可见元素渲染的速度。
Format不是唯一的杠杆,而且往往不是最大的杠杆,将一张4000 px宽的照片发送到400 px的插槽,比选择WebP而不是AVIF浪费了多得多的字节,先调整大小到显示的大小,提供 srcset farmals for different screens, lazy-load images below the fold, and then pick the format。doing it in the other order optimes the wrong thing。
它们的质量和文物有何不同?
当按小尺寸时,每种格式都会以自己的方式失败,并且了解失败可以帮助您选择。
JPG 打破可见的 8x8 块和 " 铃声 ",在照片上的文字等尖锐边缘周围微弱的涟漪。WebP's 有损模式软化细节,并且,因为它以半分辨率存储颜色,可以在细红色或蓝色线条周围留下彩色边缘。AVIF 倾向于模糊细纹而不是块,因此重度压缩的 AVIF 看起来光滑且略带蜡质,这在照片中不那么令人反感,在织物、头发和树叶中更明显。
对于具有硬边、扁平颜色和文本的图形,没有一种有损模式是理想的。 PNG 或无损 WebP 可以保持边缘的精确性。
加载行为也不同。 T。81 为 JPEG 定义了一种渐进模式,其中首先出现整个图像的模糊版本,并随着更多数据的到达而锐化,因此大型渐进 JPG 甚至在完成之前在缓慢的连接上感觉很快。通常提供的 WebP 和 AVIF 只绘制足够文件到达一次,其较小的大小通常可以弥补这一点。在连接不良的非常大的英雄图像上,这种差异是可见的,并且在选择格式之前调整大小是另一个原因。
PNG 和 GIF 适合哪里?
Nother都不是照片格式,也都不能直接与上述三者竞争。PNG,定义在 W3C PNG 规格,无损:截图、图表、徽标和编辑大师的正确选择,照片的正确选择,它存储的尺寸是 JPG 的几倍。GIF 每帧限制 256 种颜色,主要保留在不会播放任何新内容的地方的短动画中。
在网站上,两者通常都更好地用作 WebP 或 AVIF:对于 PNG 风格的图形来说是无损的或高质量的有损的,对于 GIF 风格的剪辑来说是动画的 WebP。在浏览器之外,PNG 仍然是任何透明内容的安全格式,因为 JPG 无法容纳它。
哪种格式支持透明度、HDR 和动画?
AVIF 支持这三者,WebP 支持透明度和动画但不支持 HDR,JPG 不支持其中任何一个。
透明度。 AVIF将alpha存储为辅助图像,而WebP在有损和无损模式下都有一个alpha通道,要么可以保持一个软边的产品切口,其尺寸只有PNG's的零头,JPG没有透明度,所以任何透明区域转换到它时都必须填充纯色。
HDR 和宽颜色。 AVIF每通道可以使用10或12位,这是最近手机和相机的HDR照片需要避免在明亮的天空中使用带状,WebP和JPG是8位。
动画。 WebP 动画被广泛用作 GIF 的较小替代品。 AVIF 定义了图像序列,尽管浏览器外部软件对动画 AVIF 的支持更薄。
每种格式仍然在哪里失败?
3个都解决了当前浏览器内部的支持,其他地方的支持都是选择咬的地方。
85版的chrome、93版的firefox、16版的safari和121版的edge中显示avif,较旧的浏览器、较旧的操作系统照片查看器、许多办公套件以及一长串上传表单都不接受从网页中保存avif并将其丢弃到演示文稿中是典型的失败。
WebP更进一步,当前的每个浏览器都会显示它,大多数现代操作系统都会打开它,但一些电子邮件客户端、打印服务和旧的桌面软件仍然拒绝它。
JPG基本上在每个设备、应用程序和表单上打开,这就是为什么它仍然是您无法控制目的地的任何图像的正确格式。
您应该使用哪种格式?决策表
首先根据目的地决定,然后根据内容决定。
| 情况 | 用 | 为什么 |
|---|---|---|
| 您自己网站上的英雄和产品图像 | AVIF,带有 WebP 和 JPG 后备功能 | 最重图像上的最小字节 |
| 一般站点图像,简单的管道 | WebP,带有 JPG 后备 | 近乎通用的浏览器支持,编码速度快 |
| 每个请求生成的图像 | WebP 或 JPG | AVIF 编码成本增加了延迟 |
| HDR或宽彩色的照片 | 阿维夫 | 10和12位的三者中只有一个 |
| Web 上的透明图形 | AVIF 或 WebP | PNG's尺寸的一小部分处的阿尔法 |
| 电子邮件附件 | JPG | 每个客户都会打开它 |
| 上传表格、市场、ID 门户 | JPG | 允许列表很少包括 AVIF 或 WebP |
| 印刷和办公文件 | JPG,或图形用PNG | 软件支持 |
| 编辑大师和档案 | 原始格式,PNG 或 TIFF | 避免重复有损编码 |
图案很简单:现代格式的交付,JPG的交换,大师的无损。
如何通过 JPG 后备服务为 AVIF 和 WebP 提供服务?
用【】的 <picture> 元素。浏览器行走 <source> 按顺序列出并采用它支持的第一种类型,然后返回到 <img>的定义,如 WHATWG HTML picture 元素:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
AVIF的浏览器支持下载的只有AVIF,一个没有AVIF但是有WebP的下载了WebP,其他的都得到了JPG,没有格式下载两次。
另一种选择是服务器端协商:浏览器发送一个 Accept 头例如 image/avif,image/webp,*/*的,并且服务器或CDN从单个URL返回它拥有的最佳格式,这使得标记保持简单,但要求缓存在该标头上有所不同,如HTTP's中的内容协商规则所述 RFC 9110。
Node。js 库 sharp 要在构建步骤中生成三个版本, 请将它们全部写入:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
质量值因目的而异,因为不同格式的量表并不对应。在确定数字之前目视检查输出。
如何在 AVIF、WebP 和 JPG 之间转换而不上传?
用客户端转换器,它对浏览器选项卡内的图像进行解码和重新编码,这样文件就不会离开你的设备。Toolz转换器按方向划分。
从 AVIF 到其他程序接受的内容。 的 AVIF 到 JPG 转换器 是从文档或表单拒绝的网站保存的AVIF的修复透明区域用白色填充,结果下面的注释是这样说的质量滑块从10运行到100,从90开始当图像具有必须生存的透明背景时, 将 AVIF 转换为 PNG 相反,它保留 alpha 通道并无损存储解码的像素。
AVIF解码使用浏览器'自己的AVIF解码器,所以转换器需要一个显示AVIF:Chrome、Edge、Firefox或Safari 16及以后的浏览器,如果浏览器无法打开文件,行中会将动画AVIF读取为静止图像。
从 WebP 到 JPG。 出于同样的原因, WebP 到 JPG 将下载的。webp 变成一个随处打开的文件,并使用相同的白色填充来确保透明度。
从 JPG 和 PNG 到 WebP。 走另一条路, JPG 到 WebP 缩小照片以供发布,并且 PNG 到 WebP alpha通道的同时对屏幕截图和透明图形做同样的事情编码使用浏览器's画布编码器当前chrome、edge和firefox可以编写webp;无法获得清晰错误的浏览器,而不是重命名为。webp的png。
转换器不做的事情。 Toolz读取AVIF却不写入,因为浏览器不能可靠地将AVIF编码器暴露在网页中,要制作AVIF文件,请使用构建工具,例如上面的锐利示例。 图像转换器 接受 JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、SVG、CR2、DNG 和 PDF,并编写 JPG、PNG、WebP、GIF、ICO、PDF 和 SVG,涵盖混合批次。
每个转换都是通过画布绘制的,因此 EXIF 数据、GPS 坐标和颜色配置文件不会复制到输出中。超过 100 兆像素的图像会被消息拒绝,而不是崩溃选项卡。工具是免费的,没有注册,每日转换限制。
AVIF、WebP 和 JPG 之间的转换会失去质量吗?
转换为有损格式每次都会失去一些细节,转换为无损格式不会再失去任何东西。方向决定适用。
| 转换 | 有损步骤? | 么改变 |
|---|---|---|
| AVIF 到 JPG | 是的 | 第二个有损编码;透明充满白色;文件通常更大 |
| AVIF 到 PNG | 否 | 解码像素准确保存;保持透明度;文件要大得多 |
| WebP 到 JPG | 是的 | 第二个有损编码;透明充满白色 |
| JPG 到 WebP | 是的 | JPEG's;文件之上的第二个有损编码通常较小 |
| PNG 到 WebP | 通常,有损 WebP | 保持透明度;文件通常要小得多 |
| 他们中的任何一个都去 AVIF | 是的,在典型使用中 | 最小的文件;最慢的编码 |
2个实际后果接踵而至,一个经过几次有损转换的文件每一步都会降低一点,因此避免往返,例如JPG到WebP到JPG。而转换文件的大小告诉你很少关于它的质量:一个AVIF转换为JPG变得更大而不会变得更好,因为JPG编码器花费更多的字节来描述相同的已经压缩的图片。
90左右的质量设置,在普通照片中很难看到单个额外的有损步骤,通过重复转换、低质量设置或文本精细、边缘锐利的图像,损失变得可见。
为什么 won'保存的 AVIF 或 WebP 打开?
打开它的程序没有格式的解码器。当前浏览器显示图像是因为它与服务器协商了这种格式,但磁盘上的文件随后被交给具有较旧或较窄格式列表的软件:办公套件、较旧的照片查看器、电子邮件客户端或上传表单's allow-list。
将文件重命名为 .jpg 没有帮助。字节仍然以 AVIF 开头 ftyp 盒子或 WebP RIFF header,而一个期待 JPEG 的程序找不到 JPEG 数据,转换文件是修复,也值得检查站点是否提供直接下载链接,有时服务于原始 JPG 或 PNG,而不是协商版本。
JPG是否已经过时了?
No。JPG只是过时的,因为网站应该发送到当前浏览器的格式,即使在那里,它仍然是每个的回退 <picture> element。exchange 的格式,对于电子邮件、表格、打印、办公文档和任何前往您无法控制的软件,它仍然是正确的默认值,AVIF 和 WebP 都没有取代它。
1样逻辑适用到另1种格式混淆了浏览器外的人,iPhone照片是HEIC,同一个HEIF容器中AVIF的兄弟姐妹,以及的对比 HEIC 与 JPG windows上解释为什么那些文件打不开。的每个图像转换器都列在 图像工具中心。
