首页 > 其他分享 >【AVIF】 AVIF 图像介绍及创建 AVIF 图像的有用工具

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

时间:2024-10-22 15:17:28浏览次数:3  
标签:AVIF avif 文件大小 JPG 有用 图像 sharp

目录


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)的主要原因:

  1. 卓越的压缩效率
    AVIF 使用 AV1 视频编码标准中的图像编码技术,能够在保持高质量的同时显著减少文件大小。与 JPG 相比,AVIF 可以节省高达 50% 的文件大小;与 WebP 相比,也能节省 20% 的文件大小。这种高效的压缩率意味着更快的加载速度和更低的带宽消耗。

  2. 无损压缩和有损压缩
    AVIF 支持无损压缩和有损压缩两种模式。无损压缩模式下,图像质量不会受到任何损失,而有损压缩模式则可以在牺牲一定质量的前提下进一步减小文件大小。这种灵活性使得 AVIF 能够适应不同的应用场景。

  3. 解决 JPEG 的带状问题
    JPEG 格式在压缩过程中容易出现带状问题(banding),尤其是在处理平滑渐变或低对比度区域时。AVIF 通过更先进的压缩算法,有效避免了这一问题,提供了更平滑的图像过渡。

  4. 优于 WebP 的图像质量
    虽然 WebP 已经是一种非常优秀的图像格式,但在某些情况下,它仍然会出现明显的块状现象(blocking artifacts)。AVIF 在这方面表现更为出色,能够提供更清晰、更细腻的图像质量。

  5. 多色彩空间和色深支持
    AVIF 支持多种色彩空间(如 RGB、YCbCr 等)和不同的色深(8 位、10 位、12 位),这使得它能够更好地适应不同的图像处理需求。无论是处理高动态范围(HDR)图像,还是需要精确色彩还原的应用,AVIF 都能胜任。

  6. 兼容性和未来趋势
    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 图像。

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 的普及,我们有理由相信它将在未来的图像格式竞争中占据重要地位。

标签:AVIF,avif,文件大小,JPG,有用,图像,sharp
From: https://blog.csdn.net/m0_71975585/article/details/143158839

相关文章

  • 对图像进行傅立叶变换的目的是什么
    傅立叶变换是一种在图像处理和信号处理中非常重要的技术,它能够将信号从时域(时间域)转换到频域(频率域),从而揭示出信号的频谱信息。对图像进行傅立叶变换的主要目的包括以下几个方面: 1.分析图像的频率成分:通过傅立叶变换,可以将图像从空间域转换到频率域,得到图像的频谱图。这有......
  • 图像去雨+图像去噪+图像去模糊一体化模型(图像处理-图像复原-代码+部署运行教程)
    本文主要讲述了一体化模型进行去噪、去雨、去模糊,也就是说,一个模型就可以完成上述三个任务。实现了良好的图像复原功能!先来看一下美女复原.jpg具体的完整代码文章底部推广获取:在图像恢复任务中,需要在恢复图像的过程中保持空间细节和高级上下文信息之间的复杂平衡。在......
  • 机器学习中的图像处理与计算机视觉
    引言在现代计算机科学中,图像处理和计算机视觉已成为最活跃的研究领域之一,这得益于机器学习和深度学习的发展。本文将深入探讨图像处理与计算机视觉的基础概念、常见应用、关键技术、常用工具,以及在这些领域中的代码示例。通过本篇文章,我们将了解如何从头开始构建一个简单的计......
  • 图像采集卡的原理是什么
    图像采集卡的作用是将图像信号采集到计算机中,以数据文件的形式保存在硬盘上,是图像处理不可缺少的硬件设备,通过它我们可以把摄像机拍摄的视频信号从摄像机磁带中传输到计算机中,并利用相关的视频编辑软件对数字视频信号进行后期处理,如剪切画面,添加滤镜、字幕和音效,设置转场效果,添......
  • 如何利用机器学习进行图像识别
    在文章的开始段落,我们将直接回答主题所提出的问题:利用机器学习进行图像识别的关键包括:数据预处理、选择合适的模型、模型训练、性能评估与优化。在这些步骤中,选择合适的模型尤为重要,因为它决定了整个系统识别图像的能力和效率。常见的模型有卷积神经网络(CNN)和深度神经网络(DNN)。......
  • FPGA图像处理之构建3×3矩阵
    免责声明:本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下,作者不对因使用本文内容而导致的任何直接或间接损失承担责任,包括但不限于数据丢失、业务中断或其他经济损失。读者在使用本文信息时,应自行验......
  • whaosoftの图像知识总结
    搬来大佬的笔记啊为了给自己学习啊发贴没任何好处~~图像的组成图像的通道与深度深度:将计算机中存储单个像素所用的bit位,称为图像的深度例如:通道:描述一个像素点,如果是灰度图,只须用一个数值来表示,就是单通道。如果一个像素点有RGB三种颜色来描述,就是三通道,如果用RGB+alp......
  • Python图像信息隐藏技术的实现<免费开题>全套源码+文章lw+毕业设计+课程设计+数据库+ppt
    Python图像信息隐藏技术的实现<免费开题>全套源码+文章lw+毕业设计+课程设计+数据库+ppt摘要在当下的时代中,人们获取信息的渠道随着网络的普及而变得非常的便捷。现在人们通过网络就能获得多种多样的、丰富多彩的信息内容。人们越来越希望能够通过网络进行信息的分享,从而......
  • 前端学习Day8 CSS常用声明 (文本 、图像篇)
    目录一、文本1.1.1、字体样式的常用属性1.1.2、语法格式1.2.1、文本样式1.2.2、语法格式 二、图像2.1.1、图像控制的常用属性2.1.2、语法格式一、文本1.1.1、字体样式的常用属性属性说明font-family设置字体的类型font-weight设置字体的粗细font-size设置字体的......
  • Comfyui如何快速选出图像的高光和阴影 _ layerstyle节点
    ✨背景comfyui中,除了AI图像生成本身以外,还会有很多图像处理的工作要做,比如说调整色阶、饱和度,或者还原商品细节。在最近探索的一个场景中,需要将图像中的高光部分提取出来做光源模拟,发现layerstyle这个节点组中包含了这个功能,所以简单分享一下。✨layerMask:ShadowHighlight......