✨AVIF 图像介绍及创建 AVIF 图像的有用工具

骑着骆驼去南极

已于 2024-11-26 16:00:57 修改

阅读量3k

点赞数 24

分类专栏：前端文章标签：前端

于 2024-10-22 15:23:38 首次发布

本文链接：https://blog.csdn.net/m0_71975585/article/details/143158839

版权

前端专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

AVIF（AV1 图像文件格式）是一种用于存储图像的现代图像文件格式规范，与 JPG、JPEG、PNG 和 Webp 等其他格式相比，它可显著减少文件大小。AVIF 规范的 1.0.0 版于 2019 年 2 月完成，并由开放媒体联盟向公众发布。
与 JPG 相比，可节省 50% 的文件大小，与 Webp 相比，可节省 20% 的文件大小，同时仍能保持图像质量。

💫为什么使用 AVIF 而不是 JPG、PNGS、Webp 和 GIF

在现代网络和应用开发中，图像文件的大小对性能和用户体验有着重要影响。AVIF（AV1 Image File Format）作为一种新兴的图像文件格式，因其卓越的压缩效率和图像质量，正逐渐成为开发者的首选。以下是选择 AVIF 而不是传统格式（如 JPG、PNG、WebP 和 GIF）的主要原因：

卓越的压缩效率
AVIF 使用 AV1 视频编码标准中的图像编码技术，能够在保持高质量的同时显著减少文件大小。与 JPG 相比，AVIF 可以节省高达 50% 的文件大小；与 WebP 相比，也能节省 20% 的文件大小。这种高效的压缩率意味着更快的加载速度和更低的带宽消耗。
无损压缩和有损压缩
AVIF 支持无损压缩和有损压缩两种模式。无损压缩模式下，图像质量不会受到任何损失，而有损压缩模式则可以在牺牲一定质量的前提下进一步减小文件大小。这种灵活性使得 AVIF 能够适应不同的应用场景。
解决 JPEG 的带状问题
JPEG 格式在压缩过程中容易出现带状问题（banding），尤其是在处理平滑渐变或低对比度区域时。AVIF 通过更先进的压缩算法，有效避免了这一问题，提供了更平滑的图像过渡。
优于 WebP 的图像质量
虽然 WebP 已经是一种非常优秀的图像格式，但在某些情况下，它仍然会出现明显的块状现象（blocking artifacts）。AVIF 在这方面表现更为出色，能够提供更清晰、更细腻的图像质量。
多色彩空间和色深支持
AVIF 支持多种色彩空间（如 RGB、YCbCr 等）和不同的色深（8 位、10 位、12 位），这使得它能够更好地适应不同的图像处理需求。无论是处理高动态范围（HDR）图像，还是需要精确色彩还原的应用，AVIF 都能胜任。
兼容性和未来趋势
AVIF 由开放媒体联盟（AOMedia）开发，得到了包括 Google、Apple、Microsoft 等科技巨头的支持。随着越来越多的浏览器和设备开始支持 AVIF，它有望成为未来图像格式的标准。

💫AVIF 兼容性

AVIF 的兼容性正在逐步提升，目前主流的现代浏览器（如 Chrome、Firefox、Edge）和操作系统（如 Windows、macOS、Android）都已经开始支持 AVIF 格式。尽管如此，AVIF 仍然在与 JPEG XL 等新兴格式竞争，后者在某些方面（如功能丰富性）可能更具优势。
在这里插入图片描述

💫图片转换为AVIF

🚩🚩avif-cli

avif-cliby 可让您将存储在文件夹中的图像（PNG、JPEG 等）转换为指定缩小尺寸的 AVIF 图像。

npm install avif

在终端中运行命令：

npx avif --input="./imgs/*" --output="./output/" --verbose

./imgs/* – 代表所有图像文件的位置
./output/ – 代表输出文件夹的位置

🚩🚩sharp

sharp是另一个有用的工具，可以将常见格式的大图像转换为更小的、适合网络的 AVIF 图像。

不推荐！！！
因为我最近在项目上发现了一个非常困难的事情，这个东西在windows和linux上的包不一样，打包发布会遇到问题！！！
他会默认下载你当前的系统的包。

npm install sharp

创建一个名为的 JavaScript 文件 sharp-example.js 并复制以下代码：

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

其中 path_to_image 代表图像的路径及其名称和扩展名，即：

./imgs/example.jpg

path_to_output_image 代表您希望存储图像的路径及其名称和新扩展名，即：

/sharp-compressed/compressed-example.avif

在终端中运行命令：

node sharp-example.js

💫总结

AVIF 作为一种新兴的图像文件格式，凭借其卓越的压缩效率、高质量的图像输出以及广泛的兼容性，正逐渐成为开发者的新宠。通过使用 avif-cli 和 sharp 等工具，开发者可以轻松地将现有图像转换为 AVIF 格式，从而提升应用的性能和用户体验。随着 AVIF 的普及，我们有理由相信它将在未来的图像格式竞争中占据重要地位。