探索现代图片格式：从GIF到HEIF，优势与适用场景一览

╰半橙微兮° 2024-04-22 19:18 65阅读 0赞

### 大厂学习资料 ###

> 这是我整理的学习资料，非常系统和完善，欢迎一起学习

*  **[现代JavaScript高级小册][JavaScript]**
 *  **[深入浅出Dart][JavaScript]**
 *  **[现代TypeScript高级小册][JavaScript]**
 *  **[linwu的算法笔记?][linwu]**

### 引言 ###

最近在掘金看到很多动图头像，但都失真了，好奇就研究了下前端各种图片格式

![format_png][]

![format_png 1][]

![format_png 2][]

![format_png 3][]

### 视觉属性 ###

> 图片的透明性和色彩丰富程度是两个重要的视觉属性，对于图像的呈现和使用都有着关键的影响。

#### **色彩（Color）**： ####

*  色彩丰富程度是指图像中可以显示的颜色数量。它通常以位（bit）为单位表示，例如8位色彩意味着可以显示2^8 = 256种颜色。  
    更高的色彩丰富程度意味着图像可以呈现更多的颜色细节和平滑的渐变效果。对于照片、图形和图像处理等领域，较高的色彩丰富程度非常重要，因为它可以确保图像在不同设备上显示更真实和细腻。
 *  常见的色彩丰富程度有8位（256色）、16位（65,536色）、24位（约1600万色）和32位（约1677万色）等。  
    关注图片的透明性和色彩丰富程度对于选择正确的图像格式以及在设计和处理图像时都至关重要。对于需要有透明效果或需要在不同背景上使用的图像，选择支持透明性的格式（如PNG或GIF）是很重要的。而对于需要更高质量和更真实颜色表现的图像，选择具有较高色彩丰富程度的格式（如24位或32位的PNG或JPEG）是明智的选择。

##### 8位色 #####

每个像素所能显示的彩色数为2的8次方，即256种颜色。这种彩色深度适用于较古老的显示设备和简单的图像场景。它在色彩表现方面相对较弱，颜色过渡可能显得不够平滑，导致图像呈现出颗粒感，不适合表现细腻的色彩变化。

##### 16位增强色 #####

每个像素所能显示的彩色数为2的16次方，即65536种颜色。这种彩色深度相对于8位色有了明显的提升，能够更好地表现色彩细节和平滑的过渡效果。它适用于一些对色彩表现要求较高的场景，但仍然有一定的局限性。

##### 24位真彩色 #####

每个像素所能显示的彩色数为24位，即2的24次方，约为1680万种颜色。真彩色是最常见的彩色深度标准，它具备较好的色彩表现能力，可以呈现丰富的色彩细节和平滑的过渡效果，适用于绝大多数图像场景。

##### 32位真彩色 #####

32位真彩色在24位真彩色的基础上再增加了一个表示图像透明度信息的Alpha通道，通常称为32位色。这使得图像可以支持半透明效果，使得图像在叠加时能够更好地融合。32位真彩色并非是2的32次方的色数，它实际上也是约为1680万种颜色，但因为增加了Alpha通道，为了方便称呼，就规定它为32位色。

不同彩色深度的选择取决于图像的具体需求和展示平台的支持能力。较为复杂的图像和对色彩表现要求高的场景通常会选择较高的彩色深度，而简单的图像或者需要考虑性能的场景可能会选择较低的彩色深度。

#### **对比度（Contrast）**： ####

*  图像中不同颜色或亮度之间的差异程度，影响图像的明暗分界
 *  高对比度和低对比度的区别，对图像整体视觉效果的影响

#### **亮度（Brightness）**： ####

*  图像的整体明暗程度，决定图像的整体明亮度
 *  明亮图像和较暗图像的效果，影响图像的视觉表现和情感传递

#### **清晰度（Sharpness）**： ####

*  图像中细节的清晰程度，关系到图像的清晰度和细节表现
 *  清晰度对图像质量的影响，影响图像的真实感和清晰感

#### **透明性（Transparency）**： ####

*  图片的透明性决定了图像中的哪些部分是透明的，即允许背景或下层图像透过。有透明性的图像可以让您将图像放置在其他背景上，形成无缝融合的效果。这在图标、徽标和图形设计中非常常见。
 *  常见的支持透明性的图像格式是PNG和GIF，它们允许指定图像的某些区域为透明。例如，一个PNG图像可以有部分是不透明的，部分是透明的。

#### **色调（Hue）**： ####

*  图像中不同色彩的种类，涉及不同颜色的命名和区分
 *  色调对图像氛围和情绪的影响，色调的选择传递特定的感觉和意境

#### **饱和度（Saturation）**： ####

*  图像中颜色的纯度和鲜艳程度，决定颜色的饱满度
 *  高饱和度和低饱和度的视觉效果，影响图像的色彩感受和视觉强度

#### **纹理（Texture）**： ####

*  图像中表面的质感或细节，包括粗糙、光滑、木纹等
 *  纹理在艺术创作中的应用，可以增加图像的趣味和观赏性

#### **形状（Shape）**： ####

*  图像中物体或对象的外形特征，涉及基本几何形状和轮廓
 *  形状在视觉感知和图像识别中的重要性，影响图像的认知和理解

#### **动态（Motion）**： ####

- 动态图像和动画的视觉效果，涉及图像中运动和变化的表现
    - 动态图像传递的信息和视觉冲击，对视觉表达具有独特影响

这些视觉属性涵盖了图片中常见的各种特征和效果，对于图像设计、图像处理、艺术创作以及视觉感知都有着重要的作用。深入了解和掌握这些属性有助于更好地理解图像，进行更有意义的图像创作和处理。

### 图的分类 ###

#### 光栅图和矢量图 ####

图片一般分为两类：光栅图和矢量图。

##### 光栅图： #####

光栅图是基于像素构成的图像。每个像素都有自己的颜色值，是图像最小的可见单元。光栅图格式常见的有JPEG、PNG、WEBP等。

##### 矢量图： #####

矢量图使用点、线、多边形等几何形状来构图，而不是像素。矢量图具有高分辨率和无损缩放的特点，适合用于图标、徽标和需要频繁缩放的设计。SVG是一种常见的矢量图格式。

##### 几何元素： #####

几何元素就像是用几何图形来拼接的图像。假设你想要画一条线，你可以用两个点来定义这条线的起点和终点，而这两个点就是几何元素。同样，你还可以用一些点来定义一个矩形、圆形、三角形等。这些点和形状的坐标信息被保存在计算机中，就像一张图纸一样，它们可以组合成更复杂的图形。

##### 矢量图像与栅格化： #####

当矢量图像显示在屏幕上时，计算机会将矢量图形转换为像素图像的过程称为栅格化（Rasterization）。栅格化是将矢量图像中的几何元素和路径等转换为像素的过程。计算机会根据屏幕的分辨率和显示大小，将图像中的几何元素映射到屏幕上的像素点。

在栅格化过程中，计算机会根据矢量图像的数学公式和几何信息，决定每个像素点的颜色和亮度，然后在屏幕上以像素为单位绘制图像。这个过程中，矢量图像的优势在于可以无损地缩放，但在栅格化时，由于像素的有限性，可能会导致细节丢失或锯齿状的边缘（锯齿效应），尤其是在图像放大时

在矢量图像经过栅格化后，实际上仍然可以无损地缩放而不会失真。栅格化的过程将矢量图像中的几何元素和路径转换为像素图像，但这并不改变矢量图形的数学描述和几何信息。所以，当您放大矢量图像时，计算机会重新栅格化图像，并且会根据新的分辨率和显示大小生成更多的像素点，从而保持图像的清晰度和质量。

这是矢量图像的一个重要优点：在任何缩放级别下，它们都能保持较好的质量。因为矢量图像是使用数学公式描述的，所以不受像素数量的限制，可以无限制地放大或缩小而不会出现像素化或失真问题。

对比光栅图像（像素图像），它们在放大时会出现像素化问题，因为它们的像素数量是固定的。在放大光栅图像时，计算机只是简单地放大像素，导致图像变得模糊，并且在极端情况下，可能会出现马赛克效果

#### 压缩分类 ####

图片的压缩方式可以分为三类：无压缩、无损压缩和有损压缩。

##### 无压缩： #####

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。其中，BMP是一种无压缩格式，保留了图像的所有信息，但文件体积较大。

##### 无损压缩： #####

无损压缩算法对图片的所有数据进行编码压缩，能在保证图片质量的同时降低图片的尺寸。无损压缩格式中，PNG是常见的代表。PNG文件通常比BMP小，而且保持了图像的质量，适用于需要高质量和透明背景的情况。

##### 有损压缩： #####

有损压缩算法会在压缩过程中去除图片中人眼无法察觉的细节，从而降低图片的尺寸。虽然有损压缩会导致一定程度的图像质量损失，但对于一般应用来说，这些损失是可以接受的。有损压缩格式中，JPEG是最常见的代表。JPEG文件通常较小，适用于在网页上显示图片和储存大量照片。

### 图片格式 ###

#### GIF（Graphics Interchange Format）: ####

> GIF（图形交换格式）是一种常见的图片格式，具有以下特点：

#### **优点：** ####

1.  **支持动画和透明度：** GIF支持多帧动画，使其在展示简单动画和表情包等方面非常适用。同时，它也支持透明度，可以创建带有透明背景的图像。
2.  **广泛兼容性：** GIF格式被广泛支持，几乎所有的现代浏览器和图像编辑软件都可以正常显示GIF图像。
3.  **无损压缩：** GIF使用无损压缩算法，保持图像质量，适用于一些需要保留细节的图像场景。
4.  **适用于简单图标和动画表情包：** 由于其支持动画和透明度，GIF常用于制作简单的图标和有趣的动画表情包。

#### **缺点：** ####

1.  **有限的颜色深度：** GIF仅支持256色，对于照片等颜色丰富的图像，会出现色彩丢失和较低的图像质量。
2.  **不适合保存高质量照片：** 由于有限的颜色深度，GIF不适合保存高质量的照片，特别是那些需要更多色彩细节的照片。
3.  **文件较大：** 由于无损压缩，GIF图像文件较大，不适合在网页上频繁使用或作为高质量图片的存储格式。

#### **使用场景：** ####

GIF适用于需要展示简单动画和透明背景的场景，例如动画表情包、简单图标、以及一些简易的动画图像。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmtj6Y1i-1690278166555)(<转存失败，建议直接上传图片文件 https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating\_earth\_%28large%29.gif>)\]

#### JPEG（Joint Photographic Experts Group）: ####

> JPEG是一种广泛使用的图片格式，具有以下特点：

#### **优点：** ####

1.  **广泛兼容性：** JPEG是一种通用的图片格式，在几乎所有现代设备和软件上都得到支持，包括电脑、手机、相机等。
2.  **有损压缩：** JPEG使用有损压缩算法，可以显著减小图像文件的大小，同时保持适度的图像质量。这使得JPEG成为存储和传输照片的理想格式。
3.  **适合保存照片和复杂图像：** JPEG对颜色细节的损失通常不会对照片和复杂图像造成明显影响，使其成为摄影、艺术品和复杂图像的首选格式。

#### **缺点：** ####

1.  **不支持透明度：** JPEG不支持透明度，因此不适合用于制作带有透明背景的图像。
2.  **压缩损失：** JPEG使用有损压缩，图像质量会在一定程度上受损。较高的压缩率会导致更明显的图像失真。
3.  **不适合无损图像需求：** 由于压缩损失，JPEG不适合对图像完整性要求极高的场景，如医学图像、图像编辑等领域。

#### **使用场景：** ####

JPEG适用于各种需要高度压缩、广泛兼容性以及不需要透明背景的场景。它特别适用于摄影、照片、艺术品等复杂图像的存储和展示。

![JPEG][]

### PNG（Portable Network Graphics）: ###

> PNG（便携式网络图形）是一种常见的无损图片格式，具有以下特点：

#### **优点：** ####

1.  **支持透明度：** PNG支持完整的透明度，可以创建带有透明背景的图像，使其在网页设计和图标制作等场景中非常有用。
2.  **无损压缩：** PNG使用无损压缩算法，保留了图像的完整性和质量，不会引起图像失真。这使得PNG适用于需要保持高质量图像的需求。
3.  **保留图像质量：** PNG在压缩图像的同时，不会丢失图像细节和色彩，适用于需要高质量图像的应用场景。

#### **缺点：** ####

1.  **文件较大：** 由于使用无损压缩，PNG图像文件通常较大，相比JPEG格式的压缩率较低，不适合在网页上频繁使用大尺寸的PNG图像。
2.  **不适合保存动画：** PNG不支持动画功能，因此对于动画图像，不如GIF或APNG（Animated Portable Network Graphics）这样的格式。

#### **使用场景：** ####

PNG适用于需要透明背景、保持图像质量以及不需要动画的场景。它特别适用于图标、网页上需要透明背景的图像、以及图像编辑中的临时存储格式。

![PNG][]

### APNG（Animated Portable Network Graphics）: ###

> APNG（动画便携式网络图形）是一种支持动画和透明度的图片格式，它是PNG的扩展版本，具有以下特点：

#### **优点：** ####

1.  **支持动画和透明度：** APNG能够实现多帧动画和完整的透明度，使其成为一种用于制作动画图像的高级格式。
2.  **文件较小：** 相较于GIF格式，APNG在保持相似动画效果的情况下，通常具有更小的文件大小，因为它采用了更高效的压缩算法。
3.  **质量较好：** 由于使用PNG的无损压缩，APNG保持了较好的图像质量，不会引起显著的图像失真。

#### **缺点：** ####

1.  **浏览器兼容性不完善：** 尽管APNG具有更好的动画效果和文件大小，但并不是所有的浏览器都完全支持它。在某些旧版本的浏览器中，APNG可能无法正确加载或播放。

#### **使用场景：** ####

APNG适用于制作带有透明背景和动画效果的图像，特别是替代GIF的情况。它可以用于制作复杂的动画表情包、网页上的动画图像等。

![image.png][]

#### WebP: ####

> WebP是一种现代的图片格式，由Google推出，具有以下特点：

#### **优点：** ####

1.  **有损和无损压缩两种模式：** WebP支持有损压缩和无损压缩两种模式，可以根据需要选择压缩程度，实现更高的压缩率或更高的图像质量。
2.  **文件较小：** WebP采用先进的压缩算法，通常比JPEG和PNG具有更小的文件大小，可以减少网页加载时间，提高网页性能。
3.  **支持透明度和动画：** WebP支持完整的透明度和动画功能，使其成为制作动画和带有透明背景的图像的理想格式。

#### **缺点：** ####

1.  **浏览器兼容性较差：** 尽管WebP有许多优点，但并不是所有的浏览器都完全支持它。在一些旧版本的浏览器中，可能无法正确加载或显示WebP格式的图片。

#### **使用场景：** ####

WebP适用于需要高度压缩和带有透明背景或动画效果的图像。它特别适用于网页图像、动画图像，以及对文件大小敏感的场景。

![WebP][]

### SVG (Scalable Vector Graphics): ###

> SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面元素的流行选择。

#### **优点：** ####

1.  **基于矢量图形：** SVG是基于矢量图形的格式，它使用数学方程式来描述图像，因此不会因放大或缩小而失去清晰度，适合各种尺寸的显示。
2.  **文件小：** SVG文件通常很小，因为它只保存描述图像的数学坐标和指令，而不保存像素信息。这有助于减少文件大小和加快加载速度。
3.  **广泛兼容性：** SVG格式在各种设备和浏览器上具有广泛的兼容性，因为它是一种开放标准，并且被主流浏览器支持。
4.  **可无限缩放：** 由于是矢量图形，SVG图像可以无限缩放而不失真，使其适用于需要高质量图形的场景。

#### **缺点：** ####

1.  **不适合保存复杂的光栅图像：** SVG适合保存简单的图形和图标，但不适合保存复杂的光栅图像（例如照片），因为它会导致文件过大。

#### **使用场景：** ####

SVG适用于需要无限缩放、高度保持清晰度的图标、线条图形，以及在网页上实现矢量图形效果的场景。它特别适合用于制作网页图标、图表、地图等。

![SVG][]

#### AVIF (AV1 Image File Format): ####

AVIF (AV1 Image File Format) 是一种现代的图片格式，它是由 Alliance for Open Media（开放媒体联盟）开发的，使用了高级视频编码 AV1 来进行图像压缩。AV1 是一种开放、免版税的视频编码格式，因为其高效的压缩性能，也被应用于图像编码领域，形成了 AVIF 图片格式。

#### **优点：** ####

1.  **高效的压缩：** AVIF 使用 AV1 编码技术，可以显著减小文件大小，尤其在保持良好图像质量的同时，能比其他图片格式更高效地压缩图像。
2.  **支持高级功能：** 类似于 HEIF，AVIF 也支持多帧图像、动画、深度图像以及高动态范围图像 (HDR) 等高级功能，使其成为一种功能丰富的图片格式。
3.  **免费开放：** AVIF 和 AV1 都是开放标准，没有专利费用，任何人都可以使用和部署，这促进了其广泛应用和推广。
4.  **未来性：** 由于 AV1 技术的优越性，AVIF 可能成为未来图片压缩的主流格式之一，逐渐取代一些传统格式。

当然！补充AVIF图片格式的缺点：

#### **缺点：** ####

1.  **浏览器兼容性不完善：** 目前，尽管AVIF是一种高效的图片格式，但并不是所有的浏览器都完全支持它。一些旧版本的浏览器可能无法正确加载或显示AVIF格式的图片，这可能会限制其在某些环境中的使用。
2.  **编码速度较慢：** 由于AV1编码技术的复杂性，AVIF图片格式的编码速度相对较慢。在处理大量图片或需要实时编码的情况下，可能会导致一些性能方面的挑战。
3.  **解码要求较高：** 虽然AVIF可以实现高效的压缩，但解码过程对设备性能要求较高。在一些低端设备上，可能会导致图片加载速度较慢或增加能耗。
4.  **文件格式复杂性：** AVIF图片格式采用AV1视频编码作为基础，因此文件格式相对复杂。这可能导致一些图片编辑或处理软件在处理AVIF格式时遇到困难或需要进行适当的更新。

#### **使用场景：** ####

AVIF 图片格式适用于各种用途，特别是在需要高质量图像的情况下，如摄影、艺术品展示、专业图形设计等。它也可用于网络上的图像，可以显著减少图片加载时间，提高网页性能。

### HEIF（High Efficiency Image File Format） ###

> 它是一种现代的图像文件格式，由Moving Picture Experts Group（MPEG）开发。它采用了先进的编码技术，如高级视频编码（H.265/HEVC）和多帧图像（MIAF），以实现高效的图像压缩和更好的图像质量。

#### HEIF的特点和优势包括： ####

**1. 高效的压缩：** HEIF使用H.265/HEVC编码，相较于传统的JPEG图像，可以显著减小文件大小，节省存储空间和网络传输带宽。

**2. 支持多种图像类型：** HEIF不仅支持单个静态图像，还可以包含序列图像、深度图像和高动态范围图像（HDR），使其成为一种功能丰富的图像格式。

**3. 动态图像：** HEIF可以保存多帧图像，从而支持动态图像、短视频和动画，类似于GIF或APNG，但具有更好的压缩性能。

**4. 兼容性：** HEIF在现代设备和平台上得到广泛支持，包括iOS、Android、macOS、Windows等操作系统，并被多个主流浏览器支持。

**5. 缺失部分补偿：** HEIF可以在图像数据丢失时通过参考其他帧进行补偿，提高了容错性和恢复能力。

#### **缺点：** ####

1.  **兼容性问题：** 尽管HEIF在现代设备和平台上得到广泛支持，但仍然存在一些旧版本的软件、操作系统或设备不支持HEIF格式的问题。这可能导致在某些环境中无法正确显示或处理HEIF图像。
2.  **解码复杂性：** HEIF使用H.265/HEVC编码技术，这是一种相对复杂的编码标准。因此，在一些较低性能的设备上，解码HEIF图像可能会导致一定的处理延迟或资源占用。
3.  **专利费用：** HEIF使用了H.265/HEVC编码技术，这是一个受专利保护的标准，因此在一些情况下可能需要支付专利费用，特别是在商业使用时。

**使用场景：**

#### 使用场景 ####

HEIF适用于多种用途，特别是在需要高效压缩和丰富图像功能的场景：

1.  **移动设备和社交媒体：** 由于HEIF可以在相同质量下实现更小的文件大小，它在移动设备上的应用广泛。在社交媒体平台上，HEIF可以减少图像上传和下载时间，提高用户体验。
2.  **摄影领域：** 对于摄影师和摄影爱好者来说，HEIF是一种优秀的格式，可以在保持图像质量的同时减少照片占用的存储空间，方便图片的管理和传输。
3.  **动态图像和动画：** HEIF支持多帧图像和动态图像，适用于制作GIF或APNG类似的动画效果，但在文件大小和图像质量上具有更好的表现。
4.  **在线共享图像：** 在网络共享图像的情况下，HEIF可以减少图像加载时间，提高网页性能，特别是对于移动端用户来说更加重要。
5.  **深度图像和HDR图像：** HEIF支持深度图像和高动态范围图像，可以在显示设备支持时提供更好的图像效果和视觉体验。

![HEIF][]

[JavaScript]: https://www.coding-time.cn
[linwu]: https://www.coding-time.cn/lc
[format_png]: https://img-blog.csdnimg.cn/img_convert/2bbbe3a2db3e7d3da2b308335d8e48e7.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/56c5c1e9c7b927fb6faea51499ea6690.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/fa0f22d52410201f7f3223638853c08a.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/27fd92d36a2c96e89c79a5660567fb34.webp?x-oss-process=image/format,png
[JPEG]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/17e3ec4e9e2349aab2d10d6f2b41b2bb.jpeg
[PNG]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b12ef758ad224d84bebe0066f3b114d8.png
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/03a4739d22d54710af869c204ff5a21a.png
[WebP]: https://img-blog.csdnimg.cn/img_convert/215694618ea1bbbc0ac860b0beffcba6.webp?x-oss-process=image/format,png
[SVG]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a045a1ad7b3c429ba9fdb4fa2a664cc2.png
[HEIF]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4657bb9a2b2047b7b708de20c08c8390.jpeg