常见图片PNG/JPEG/WEBP/HEIF/AVIF格式介绍

这篇文章首先梳理了图片压缩格式的发展历程，并从中挑选了当前主流图片格式展开介绍，主要介绍不同格式的压缩方式及压缩性能对比，以期大家对不同的图片格式能有更清晰的了解，结合需求选择更适合自己的图片压缩的格式。

前提背景

随着终端设备的发展，高清及超高清图片的生产愈发便捷，图片上传、传输、下载的带宽成本也随之增长，常见的图片压缩方式PNG、JPEG等也可以进行一定程度的压缩，但是压缩率还是不能满足日益增长的图片文件的大小，因此新的图片压缩格式不断被提出，例如HEIC、WebP、AVIF，这些新的压缩方式可以保持和JPEG、PNG等格式相同的画质前提下做到更大的体积压缩。

图片发展历程

从上图可以看出JPEG及PNG都是提出比较久的压缩格式，WebP、HEIF及AVIF是提出的时间不久新兴图片格式，但以其出色的压缩率已经在逐步替代JPEG、PNG等图片格式在各终端设备及浏览器的地位。下面将逐步介绍几种不同格式图片的压缩方式和主要特性。

图片格式简介

PNG简介

便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。

PNG定义了两种类型的数据块，一种是称为关键数据块(critical chunk)，这是标准的数据块，另一种叫做辅助数据块(ancillary chunks)，这是可选的数据块。关键数据块定义了4个标准数据块，每个PNG文件都必须包含它们，PNG读写软件也都必须要支持这些数据块。

这里介绍一下标准数据块中IHDR作用：文件头数据块IHDR(header chunk)，它包含有PNG文件中存储的图像数据的基本信息，并要作为第一个数据块出现在PNG数据流中，而且一个PNG数据流中只能有一个文件头数据块。文件头数据块由13字节组成：

压缩流程

PNG的压缩过程是完全无损的;这意味着压缩文件可以准确地重建源图像。PNG的压缩流程主要包括：

通道提取可以把一张大图分解为若干小图

过滤

PNG格式使用称为“filtering”的delta编码格式。基本上，对于每一个像素扫描线，当前像素都是按照与左边像素、上面像素和上面左侧像素的某种关系进行编码的。

假设有一图片块如上图，现需要使用过滤器预测”X”这个未知值。PNG允许选择五种模式中的一种，每行:

不使用filtering
X和A的差
X和B的差值
X与(A + B)/2的差值(即平均值)
Paeth预测器(A,B,C的线性函数)

每一行都可以为自己选择最好的filtering方法，这样就可以产生最少的唯一符号（重复符号越多，压缩效果越好）。这些过滤器是按通道而不是按像素设置的。这意味着该过滤器应用于扫描线的一个像素的所有红色值，然后单独应用于扫描线的所有蓝色值。

压缩

一旦在扫描线上进行了滤波，它将传递给LZ77算法的变种，称为DEFLATE；该算法结合了LZ77编码和一个霍夫曼编码器。

JPEG简介

JPEG 是 Joint Photographic Experts Group 的缩写，即 ISO 和 IEC 联合图像专家组，负责静态图像压缩标准的制定，这个专家组开发的算法就被称为 JPEG 算法，并且已经成为了大家通用的标准，即 JPEG 标准。JPEG 压缩为有损压缩。

压缩流程

JPEG压缩模块中产生画质损失的步骤在进行YUV采样、量化过程。YUV采样是基于人眼对色度的敏感度低于对亮度的敏感度，将YUV444的像素格式采样为YUV420的采样格式，可节省了50%的文件体积。量化是编码过程中有损过程，量化步长越大，图片体积越小，图片画质越差。可以通过不同的量化矩阵选择控制不同的图片压缩质量。

WEBP简介

WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。WebP支持的像素最大数量是16383×16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之ARGB色彩空间。WebP的有损压缩算法是基于VP8视频格式的帧内编码，并以RIFF作为容器格式。

RIFF：资源交换文件格式（英语：Resource Interchange File Format，缩写为RIFF），又译资源互换文件格式，是一种文件格式（meta-format）标准，把资料存储在被标记的区块（tagged chunks）中。

压缩流程

块大小：最大块16×16，最小4×4
预测模式：四种帧内预测模式

H_PRED(horizontal prediction):使用block左边的一列L来填充block中的每一列
V_PRED(vertical prediction):使用block上边的一行A来填充block中的每一行
DC_PRED(DC prediction):使用L和A中所有像素的平均值作为唯一的值填充block
TM_PRED(TrueMotionprediction):

HEIF简介

High Efficiency Image File Format (HEIF, 发音为：heef)，由 Moving Picture Experts Group ( MPEG，即动态图像专家组) 于2013年开发，它基于ISOBMFF标准。HEIF是一个容器的图片格式，它可以包含图片和图片序列（一个文件可以包含不止一个图片）。当前的编码格式有：HEVC 和H.264/MPEG-4 AVC 两种，并且未来可能有新的编码格式加入。.heic 只是一个HEIF文件格式的一种扩展名。.heif 和 .avci，它们都是属于HEIF文件格式。当然，常见的只有 .heif 和 .heic 这两种，而 .avci 很少见。

ISOBMFF标准(=ISO Base Media File Format)
HEIF格式正是基于该标准设计而成，该标准用于：存储基于时间轴或者无时间的媒体数据，其前身是苹果的QuilckTime File Format(.mov)格式。
它的设计理念—-容器结构：
1.定义了盒子结构(box-structured)文件，意味着数据被分配在这些盒子中。
2.允许盒子中包含其他盒子。
3.每个盒子的头部包含着盒子类型的信息，和这个盒子的大小。这样做使之成为可能：读程序可以跳过不必要的信息和不支持的盒子。
4.使用4个ASCII码作为不同的入口，标示盒子的类型。这些4字节通常称为 FourCC or 4CC。

压缩流程

HEIF的压缩流流程和WebP的压缩流程是相似的，不同的是HEIF使用了HEVC的帧内编码技术，具有HEVC帧内编码工具集，达到了更高的压缩率更好的画质。

块大小：编码单元尺寸可达64×64，最小块4×4
预测模式：35种帧内预测模式

AVIF简介

AV1图像文件格式(AVIF)是由开放媒体联盟(aomedia.org)与Google、Cisco以及 Xiph.org 合作开发的开放、免版权费的图像文件格式规范，用于存储用AV1压缩的HEIF容器格式的图像或图像序列。AVIF支持全分辨率的10位和12位色彩以及HDR，支持有损和无损编码两种方式。

压缩流程

AVIF的压缩流流程和WebP的压缩流程也是相似的，不同的是AVIF使用了AV1的帧内编码技术，具有AV1帧内编码工具集，有更高压缩能力、更佳画面细节。