当前位置：首页 > 科技 > 软件

为什么在2024年应该使用AVIF而不是JPEG、WebP、PNG和GIF

来源：责编：时间：2024-06-24 09:14:37 97观看

导读AVIF是一种新兴的文件格式，本文撰写时它已经在Microsoft Edge中获得了支持，从而实现了显著的浏览器支持。我们已经不再处于技术的黑暗时代，大多数大型网站平台通常支持最新版本的浏览器及其一年前的版本。你可以开始使用

AVIF是一种新兴的文件格式，本文撰写时它已经在Microsoft Edge中获得了支持，从而实现了显著的浏览器支持。

我们已经不再处于技术的黑暗时代，大多数大型网站平台通常支持最新版本的浏览器及其一年前的版本。你可以开始使用AVIF，并在2024年底之前使用WebP作为回退格式（在此之前回退格式是必要的）。

这意味着什么？

你现在可以主要使用AVIF作为栅格图像的默认格式，因为它基本上取代了许多常见的JPEG用法。

为什么选择AVIF而不是JPEG和WebP？

压缩效率：比JPEG和WebP等格式具有更高的压缩比，同时保留高图像质量。
色深：支持8位、10位、12位和16位等广泛的色深。
广色域和HDR支持：AVIF支持广泛的颜色范围和高动态范围（HDR），使图像更生动逼真，非常适合需要精确颜色和细节的应用，如专业摄影和媒体内容。
有损和无损压缩：AVIF的无损压缩效果远优于压缩的位图和PNG。
透明通道支持：类似于PNG，可以存储半透明图像，但压缩效果更好。
基于AV1：AV1是一种由开放媒体联盟开发的免版税编解码器，基于Google的VP9编码。这意味着它将广泛采用，并且相比其他新兴图像格式更少争议。
主流浏览器和广泛平台支持。
减少带宽和更快的加载时间：更小的文件意味着用户加载速度更快。

缺点

计算密集型压缩：通常，AVIF压缩比旧的图像格式如JPEG更具计算密集性，但它通常实现了更高效的压缩效果。

有多小？

开放媒体联盟非常兴奋地声称：

“图像可以比相似视觉质量的JPEG小多达十倍。”

此外，

“AVIF可以实现40%到90%的压缩。”

我们已经使用AVIF大约4年了，根据经验，压缩的大多数图像大约是等效质量JPEG输出图像大小的60%。这仍然令人惊叹。

因此，AVIF涵盖了除以下情况之外的大多数图像场景：

矢量图：SVG和SVG图像很好地涵盖了这一点。
矢量动画：同样，SVG在这里表现也不错，尽管在渲染质量方面还有提升空间。

后端编码/解码

如果在你的首选后端语言中找不到支持AVIF的软件库，可以封装libavif，官方的AOMedia编码器/解码器。或者，如果你有勇气，可以将其转换为本地支持。

GitHub - AOMediaCodec/libavif: libavif - 用于编码和解码.avif文件的库

以下是我在GitHub上发现的一些库：

Node.js: https://github.com/lovell/sharp
PHP: https://github.com/flyimg/flyimg
Go: https://github.com/webp-sh/webp_server_go

何时不使用AVIF

这真的取决于图像的动态和复杂性，但通常：

无损矢量/非真实动画：这取决于具体情况（唉）。
在某些“罕见”情况下，当比较质量/压缩比时，WebP甚至JPEG可能胜过AVIF。

作为经验法则，AVIF在优化写实图像方面通常表现突出。个人认为它在其他图像如图表和矢量艺术中也相当占优势。

支持旧版浏览器

想象一下，有人刚从长假回来，还没有更新他们的浏览器。

如果你想在本文撰写时开始使用AVIF，请使用srcset或 <picture><source>，以AVIF为主，回退到旧的图像格式如WebP或JPEG。

如果从本文写作时起Edge已经更新了3个或更多版本，你就可以只使用src。

动画

动画AVIF示例:https://colinbendell.github.io/webperf/animated-gif-decode/avif.html

虽然这略微超出了本文的范围，但正如所提到的，AVIF可以像APNG一样用于动画。

这两种格式都远优于GIF，你应该考虑它们作为替代品，因为它们有完整的浏览器支持，而GIF作为一种旧的动画图像格式，其压缩效果较差。

话虽如此，在电子邮件支持方面要谨慎，因为那也是一个旧的、糟糕的系统，可能不会一致地支持这些新格式，请务必检查。

结论

尽量避免比较图像格式和压缩结果的优劣。事实上，所有的无损编解码器都有代价；这是一个权衡问题。

你可能不喜欢特定图像伪影的样式，但如果这意味着某人在火车上或在延迟较差的情况下可以更快地加载你的网站，作为开发者你也需要做出妥协。

最终目标是在合理范围内向用户提供尽可能小的负载，无论哪种格式被证明更优化。

在我看来，新图像格式只是构建更好产品、提高用户体验的工具，而不是竞争偏好的问题。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-95922-0.html为什么在2024年应该使用AVIF而不是JPEG、WebP、PNG和GIF

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 20 个 Python 字典映射技巧，让数据处理更高效

下一篇：消息称英伟达 GB200 AI 芯片供不应求，追单日月光、京元电等封测厂

标签：

热门焦点

直屏旗舰来了 iQOO 12和K70 Pro同台竞技

旗舰机基本上使用的都是双曲面屏幕，这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰，这次，你们等到了。据博主数码闲聊站带来的最新爆料称，Redmi下代旗舰K70 Pro和iQOO 12两款手
石头自清洁扫拖机器人G10S评测：多年黑科技集大成之作懒人终极福音

科技圈经常能看到一个词叫“缝合怪”，用来形容那些把好多功能或者外观结合在一起的产品，通常这样的词是贬义词，但如果真的是产品缝合的好、缝合的实用的话，那它就成了中性词，今
5月iOS设备好评榜：iPhone 14仅排第43？

来到新的一月，安兔兔的各个榜单又重新汇总了数据，像安卓阵营的榜单都有着比较大的变动，不过iOS由于设备的更新换代并没有那么快，所以相对来说变化并不大，特别是iOS好评榜，老款设
JavaScript 混淆及反混淆代码工具

介绍在我们开始学习反混淆之前，我们首先要了解一下代码混淆。如果不了解代码是如何混淆的，我们可能无法成功对代码进行反混淆，尤其是使用自定义混淆器对其进行混淆时。什么是混
摸鱼心法第一章——和配置文件说拜拜

为了能摸鱼我们团队做了容器化，但是带来的问题是服务配置文件很麻烦，然后大家在群里进行了“亲切友好”的沟通图片图片图片图片对比就对比，简单对比下独立配置中心和k8s作为配
2023 年的 Node.js 生态系统

随着技术的不断演进和创新，Node.js 在 2023 年达到了一个新的高度。Node.js 拥有一个庞大的生态系统，可以帮助开发人员更快地实现复杂的应用。本文就来看看 Node.js 最新的生
把LangChain跑起来的三个方法

使用LangChain开发LLM应用时，需要机器进行GLM部署，好多同学第一步就被劝退了，那么如何绕过这个步骤先学习LLM模型的应用，对Langchain进行快速上手？本片讲解3个把LangChain跑起来
冯提莫签约抖音公会前“斗鱼一姐”消失在直播间

来源：直播观察提起“冯提莫”这个名字，很多网友或许听过，但应该不记得她是哪位主播了。其实，作为曾经的“斗鱼一姐”，冯提莫在游戏直播的年代影响力不输于现
到手价3099元起！iQOO Neo8 Pro今日首销：安卓性能最强旗舰

5月23日，iQOO如期举行了新品发布会，全新的iQOO Neo8系列也正式与大家见面，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更