图像编码的压缩原理（下一代图像压缩格式科普）

目录

背景

什么是HEIF？

小结

什么是AVIF？

有什么好处？

为什么要使用新的图像格式？

采用AV1和AVIF

注意事项

关于基准测试的注意事项

今天如何以及何时启用AVIF？

上一篇文档主要讲了一下ImageX支持的图片压缩格式，看起来压缩率比较高，但是有些同学会问这些格式和编码方式有什么不同，所以，本篇文档主要讲一下图片格式和图片编码相关的科普类说明；

来自wiki上的说明

高效率图像文件格式（英语：High Efficiency Image File Format, HEIF；也称高效图像文件格式[1]）是一个用于单张图像或图像序列的文件格式。它由动态影像专家小组（MPEG）开发，并在MPEG-H Part 12（ISO/IEC 23008-12）中定义。

HEIF规范也定义了高效率视频编码（HEVC）编码的内嵌图像和HEVC编码的图像序列的存储方式，其中以受约束的方式应用帧间预测。

• 存储单个或多个图像及其缩略图
• 存储连拍照片
• 支持同时捕获视频和静止图像，即将静止图像和定时图像序列存储在同一文件中
• 高效地表示动画和动态静图
• 存储焦点堆叠和曝光堆叠到同一个容器文件
• 存储从其他图像文件派生的图像，无论是以非破坏性图像编辑操作为目的派生的图像，还是作为预先计算派生的图像
• 支持存储其他媒体，例如音频和定时的文本，将定时的图像序列存储在同一个容器文件中，并且同步播放。

从这里，我们也知道，苹果公司优先在手机里支持了heic格式，相比于其他图片格式有太多的优点了；在iphone 使用优点如下：

• 压缩率极大提升，照片类型图片同样质量是JPEG的一半尺寸。相当于对于拍照来说iPhone X，7和8的有效存储空间是128G-512G。
• 对于一些色块，线条类型图片压缩比例更是惊人，而且完全没有jpeg那种边缘噪点。有时候只需要五分之一的空间。
• 支持高色深，10-bit，12-bit内容。这是HDR普及所必须的，jpeg完全不行必死无疑。另外iphone已经可以拍这些高色深格式的HDR图片，安卓机则不行，当然这里在android P 以上版本陆续可以支持heif格式的图像了。
• 支持透明度
• 支持多通道，比如iPhone的人像模式拍出来是两张图，其中原图附带了景深通道，第三方应用可以直接调用做出自定义的虚化效果。而安卓机只能是通过文件命名，速度慢，文件乱，没法导出，不支持第三方应用。
• 支持多文件，同一个文件里可以有多张图片，比如上述原图和渲染好的虚化图，还可以有视频动图。安卓再次扑街，完全不行，只能尝试放在一个文件夹里。
• 支持多帧复合压缩，比如上述虚化图和原图，都不需要存储两张图，对比压缩以后只存储一部分虚化背景就可以。又因为背景被虚化信息量很小，拍人像模式的照片占用空间更是远远低于安卓机

小结:

从昨天的的文章对比的：https://blog.csdn.net/weixin_44643524/article/details/112550247 能看到 ImageX 这个云服务支持的heic 压缩率也是极高的；不过目前，从动图这块看，ImageX 家的动图支持的还是非常不错的，我有去尝试过其他家自研的格式，比如腾讯的TPG、快手KPG还有京东的一个图片格式来看，自研的图片格式压缩效果确实好于开源格式，不过缺点也明显一般这些格式都需要配合SDK或者解码库使用；

HEIF 这个格式的优势，随着新版的操作系统的普及Android P 以上版本和 iOS 11 以上操作系统的普及，系统默认支持heif 格式的图像指日可待了；

下面主要聊聊AVIF

什么是AVIF？

AVIF是HEIF ISO标准和Mozilla，Xiph，Google，Cisco等许多公司的免版税AV1编解码器的组合。

当前，JPEG是Web上最流行的图像格式。它的使用年限非常出色，而且由于其出色的兼容性，它很可能会在未来几年保持流行。以前有很多尝试替换JPEG的尝试，例如JPEG 2000，JPEG XR和webp。但是，这些格式仅提供了适度的压缩改进，并不总是在图像质量上胜过JPEG。AVIF的压缩率和图像质量要比所有其他方法都要好，而且差距很大。

有什么好处？

平均网站带宽的一半以上用于图像。改进的图像压缩可以节省带宽并提高Web的整体性能。AVIF中的压缩效果非常好，图像可以缩小到JPEG和WebP的一半大小

为什么要使用新的图像格式？

AVIF要做的一件大事就是修复了WebP的最大缺陷。WebP已有10多年的历史了，AVIF是WebP格式的主要升级。这两种格式在技术上相关：它们都基于VPx系列的视频编解码器。WebP使用旧的VP8版本，而AVIF基于AV1。

WebP限于8位颜色深度，并且在其最佳压缩操作模式下，它只能存储图像分辨率的一半的颜色（称为色度二次采样）。这将导致饱和色彩的边缘在WebP中被弄脏或像素化。AVIF支持全分辨率的10位和12位色彩以及高动态范围（HDR）。

JPEG格式

​WebP

​WebP（锐化YUV选项）

​AVIF

AV1还使用一种新的压缩技术：亮度色度。大多数图像格式将亮度与色相分开存储。AVIF使用亮度通道来猜测颜色通道的外观。它们通常是相关的，因此很好地猜测可以得出较小的文件大小和更清晰的边缘。

采用AV1和AVIF

VP8和WebP遭受了勉强的行业采用。Safari仅在Chrome推出10年后才添加WebP支持。

Chrome 85已经支持AVIF。其他基于Chromium的浏览器和Firefox仍在进行中。苹果尚未宣布Safari是否支持AVIF。但是，这次苹果公司是AVIF的创建者开放媒体联盟的公司之一。与以前的免版税编解码器相比，AV1编解码器的采用速度更快。来自Nvidia，AMD和Intel的最新GPU已经具有对AV1的硬件解码支持。

AVIF使用与iOS相机中使用的HEIC格式相同的HEIF容器。AVIF和HEIC提供类似的压缩性能。

注意事项

AVIF是功能丰富的格式。它的大多数功能都适用于智能手机相机，例如“实时”照片，深度图，连拍，HDR和无损编辑。浏览器将仅支持其中一部分功能。在“图像调整大小”的实现中，我们仅支持静态范围的图像。

AVIF中的两个最大问题是编码速度和渐进渲染的缺乏。

测试图集

开放测试图集地址:https://github.com/AOMediaCodec/av1-avif/tree/master/testFiles

关于基准测试的注意事项

公平而准确地判断哪种有损编解码器更好是令人惊讶的困难。有损编解码器经过专门设计，主要用于压缩肉眼看不到的细微图像细节，因此“看起来几乎相同，但是文件更小！” 是所有有损编解码器的共同特征，但不够具体，不足以得出有关其性能的结论。

有损编解码器无法仅通过比较文件大小来进行比较。有损编解码器可以轻松制作任何大小的文件。它们的效果在于文件大小与可达到的视觉质量之间的比例。

比较编解码器的最佳方法是，使每个编解码器将图像压缩到完全相同的文件大小，然后比较它们所达到的实际视觉质量。如果文件大小不同，则任何判断都可能是不公平的，因为生成较大文件的编解码器可能这样做只是因为要求其保留更多详细信息，而不是因为无法更好地压缩。

AVIF图像在完全下载之前不会在屏幕上显示任何内容。相反，渐进式JPEG仍在加载时，可以非常快速地显示较低质量的图像近似值。渐进式JPEG交付良好时，它们使网站加载速度似乎更快。渐进JPEG看起来可以加载为文件大小的一半。AVIF可以完全以JPEG大小的一半加载，因此它以纯粹的压缩优势克服了渐进式渲染的不足。在这种情况下，只剩下WebP，既没有渐进式渲染也没有强大的压缩。

与其他编解码器相比，解码AVIF图像进行显示需要更多的CPU能力，但实际上它应该足够快。即使是低端的Android设备也可以在没有硬件加速帮助的情况下以全高清格式播放AV1视频，而AVIF图像只是AV1视频的一帧。但是，AVIF图像的编码要慢得多。创建单个图像可能甚至需要几秒钟。AVIF支持平铺，这可以加速多核CPU上的编码。我们有很多CPU内核，因此我们可以利用它来加快编码速度。“图像调整大小”为使用AVIF中可能的最大压缩级别来进一步提高压缩速度。调整大小的图像将被缓存，因此仅在缓存未命中时，编码速度才明显。

我们还将在波兰语中添加AVIF支持。波兰语会在后台异步转换图像，从而完全隐藏了编码延迟，并且与“图像调整大小”相比，它能够更好地压缩AVIF图像。

今天如何以及何时启用AVIF？

即使目前尚不支持AVIF，我们仍然可以将HTML格式的HTML格式与<picture>元素一起使用。该<picture>元素允许逐步支持，因为我们可以按照要加载的顺序列出图像源，浏览器将加载它支持的第一个图像源。如果浏览器根本不支持<picture>，它将退回到使用default <img>。

<picture> <source srcset="img/photo.avif" type="image/avif"> <source srcset="img/photo.webp" type="image/webp"> <img src="img/photo.jpg" alt="Description of Photo"> </picture>

当然了，我昨天的测试文档发现使用 ImageX（感觉做的比较专业） 可以快速地将 图片转换为AVIF格式，比如这个例子：http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.avif 如果恰巧也有计划将网站迁移到avif使用可以去试用一下他们家的服务；

下一篇打算重点讲一下，如何通过一个JS的SDK 来解决在web 浏览器加载HEIF和avif的图像格式；敬请期待；

,