网页网站您现在的位置是:首页 > 博客日志 > 网页网站

给Web开发人员的 Avif 图片格式应用指南

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-06-10 15:30:45网页网站人已围观关键字: Web  Avif  图片格式  

AVIF图像文件格式(AV1 Image File Format)是一种免版税的图像格式,通常比其他流行的替代格式(JPEG、 PNG、 WebP)性能更好。有了 Chrome 85 + 和 Firefox 86 + (在功能标志后面) ,浏览器的支持越来越好,所以现在在网页上包含 AVIF 图片是值得的。

AVIF图像文件格式(AV1 Image File Format)是一种免版税的图像格式,通常比其他流行的替代格式(JPEG、 PNG、 WebP)性能更好。有了 Chrome 85 + 和 Firefox 86 + (在功能标志后面) ,浏览器的支持越来越好,所以现在在网页上包含 AVIF 图片是值得的。nr3编程技术_踩坑日志_进阶指南_无知人生

原文:https://darekkay.com/blog/avif-images/ nr3编程技术_踩坑日志_进阶指南_无知人生

目录:nr3编程技术_踩坑日志_进阶指南_无知人生


nr3编程技术_踩坑日志_进阶指南_无知人生


nr3编程技术_踩坑日志_进阶指南_无知人生

1、示例图像

下面,我使用 JPEG、 WebP 和 AVIF 对同一张图片进行了编码(如果你看不到所有这三张图片,你的浏览器可能不支持某种格式) :nr3编程技术_踩坑日志_进阶指南_无知人生

nr3编程技术_踩坑日志_进阶指南_无知人生

JPEG (30 kB) JPEG (30kb)nr3编程技术_踩坑日志_进阶指南_无知人生

nr3编程技术_踩坑日志_进阶指南_无知人生

WebP (15 kB) WebP (15kb)nr3编程技术_踩坑日志_进阶指南_无知人生

nr3编程技术_踩坑日志_进阶指南_无知人生

AVIF (11 kB) AVIF (11kb)nr3编程技术_踩坑日志_进阶指南_无知人生

虽然图像质量在主观上是相似的,但文件大小的差异是明显的:nr3编程技术_踩坑日志_进阶指南_无知人生


nr3编程技术_踩坑日志_进阶指南_无知人生

Format 格式File size 文件大小Smaller than JPEG 比 JPEG 小
JPEG30 kB 30kb-
WebP15 kB 15kb50%
AVIF 亚洲航空航天工业联合会11 kB 11kb63%

更小的文件大小意味着更快的加载时间,这提高了整体用户体验。
nr3编程技术_踩坑日志_进阶指南_无知人生

2、编码 AVIF 图像

让我们来看一下将图像转换为 AVIF 格式的一些跨平台工具。nr3编程技术_踩坑日志_进阶指南_无知人生

Squoosh

谷歌的 Squoosh 网络应用是一个很好的游乐场,对于处理个人图片来说足够好了。您可以尝试使用压缩设置,并将输出与其他格式进行比较。nr3编程技术_踩坑日志_进阶指南_无知人生

Squoosh app screenshotnr3编程技术_踩坑日志_进阶指南_无知人生

Squoosh CLI

也可以作为 CLI 工具使用,它是频繁使用和批处理的一个很好的替代品:nr3编程技术_踩坑日志_进阶指南_无知人生

$ squoosh-cli --avif '{speed: 2}' cow.jpg

在这个示例中,squoosh 将创建 cow.avif 文件。在当前版本0.6.3中,不能更改输出文件名。nr3编程技术_踩坑日志_进阶指南_无知人生

一个低速参数将使转换慢得多,但文件大小将更小。我很乐意做出这样的交换。nr3编程技术_踩坑日志_进阶指南_无知人生

ImageMagick

ImageMagick 是我通常选择的一个全面的图像处理 CLI 工具。从7.0.25版本开始,它本身就支持 AVIF 压缩。然而,除了质量,我找不到任何选项来设置速度/工作量参数。这意味着输出比我希望的要大一点。nr3编程技术_踩坑日志_进阶指南_无知人生

AVIF 转换器

最后但并非最不重要的是,有 AVIF.io,另一个基于网络的 AVIF 转换器。它支持批量转换,使其成为不需要安装 CLI 工具的批处理的一个很好的替代选择。该网站还包含有关 AVIF 格式的有用文章和教程。nr3编程技术_踩坑日志_进阶指南_无知人生

渐进增强

截至2021年4月,WebP 的全球使用率约为93% ,AVIF 约为63% 。幸运的是,有一个向后兼容的特性可以为不支持的浏览器提供后备:nr3编程技术_踩坑日志_进阶指南_无知人生

<picture>
  <source type="image/avif" srcset="cow.avif" />
  <source type="image/webp" srcset="cow.webp" />
  <img src="cow.jpg" srcset="cow.png" alt="Cow" />
</picture>

在这个例子中,浏览器将从上到下匹配格式,并使用它支持的第一个格式。AVIF 被列为第一种格式,因为它提供了最好的压缩。nr3编程技术_踩坑日志_进阶指南_无知人生

如果浏览器根本不支持 < picture > (我正在看着你,IE11) ,那么所有的 < source > 条目都将被忽略,而 JPEG < img > 图片将被用作后备。这是渐进增强的一个完美例子。nr3编程技术_踩坑日志_进阶指南_无知人生

不幸的是,我不知道任何 CSS 替代的背景属性。我已经检查过 image-set ()作为一个潜在的解决方案,但浏览器似乎不检查所引用图像的格式支持。nr3编程技术_踩坑日志_进阶指南_无知人生

调试图片元素

在 Chrome 中,你可以模拟缺少的 WebP 和 AVIF 支持:nr3编程技术_踩坑日志_进阶指南_无知人生

Chrome rendering tabnr3编程技术_踩坑日志_进阶指南_无知人生

但是你怎么知道,你的浏览器选择显示哪个图片?nr3编程技术_踩坑日志_进阶指南_无知人生

独立于浏览器的方法是在 DOM 检查器中选择 img 元素,然后在控制台中输入以下内容:nr3编程技术_踩坑日志_进阶指南_无知人生

$0.currentSrc;

Viewing active image within a picture elementnr3编程技术_踩坑日志_进阶指南_无知人生

在 Chrome DevTools 中,当你鼠标悬停 img 元素的 src 或 srcset 值时,这些信息也会显示出来:nr3编程技术_踩坑日志_进阶指南_无知人生

Chrome DevTools displaying the image currentSrc valuenr3编程技术_踩坑日志_进阶指南_无知人生

在未来可能会提供类似的功能。nr3编程技术_踩坑日志_进阶指南_无知人生

🔎 这个页面上的截图包含多种图像类型,所以你可以自己尝试一下nr3编程技术_踩坑日志_进阶指南_无知人生

相关文章

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()