图像文件类型与格式指南

常见图像文件类型

下面列出了网络上最常用的图像文件格式。

下面列出了 web 上出现的图像格式，但 web 内容应避免使用这些格式（通常是因为这些格式没有广泛的浏览器支持，或者有更好的替代格式）。

图像文件类型详介

下文将简要介绍 web 浏览器支持的每种图像文件类型。

在下表中，每分量比特是指用于表示每种色彩分量的比特数。例如，RGB 颜色深度为 8 表示红、绿、蓝三原色各用 8 位数值表示。另一方面，比特深度是指用于表示内存中每个像素的总比特数。

APNG（动态可移植网络图形）

APNG 是 Mozilla 首次推出的一种文件格式，它扩展了 PNG 标准，增加了对动画图像的支持。在概念上，APNG 与已经使用了几十年的动画 GIF 格式相似，但 APNG 的功能更强，它支持多种颜色深度，而动画 GIF 只支持 8 位索引颜色。

APNG 适用于无需与其他活动或音轨同步的基本动画，如进度指示器、活动加载器和其他动画序列。例如，APNG 是苹果 iMessage 应用程序（和 iOS 上的“信息”应用程序）创建动画贴纸时支持的格式之一。它们也常用于 web 浏览器用户界面的动画部分。

AVIF 图像

AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。

AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。

该格式可以提供：

• 与 JPG 和 PNG 相比，在视觉上相似的压缩水平下，有损压缩效果极佳（例如，有损 AVIF 图像比 JPEG 图像小 50%）。
• 一般来说，AVIF 比 WebP 有更好的压缩效果。对于相同的 JPG 图像集，中值压缩率为 50%，而 WebP 为 30%（资料来源：AVIF 与 WebP 的对比（CTRL 博客））。
• 无损压缩。
• 动画/多图像存储（类似于 GIF 动画，但压缩效果更好）
• 支持 Alpha 通道（即透明）。
• 高动态范围（HDR）：支持存储图像，使图像最亮和最暗部分之间的对比度更大。
• 宽色域：支持包含更大色彩范围的图像。

AVIF 不支持渐进式渲染，因此文件必须完全下载后才能显示。这通常对真实世界的用户体验影响不大，因为 AVIF 文件比同等的 JPEG 或 PNG 文件小得多，因此下载和显示的速度也快得多。文件大小越大，影响就越大，因此应考虑使用支持渐进式渲染的格式。

Chrome、Opera、Safari 和 Firefox 支持 AVIF（Firefox 支持静态图像，但不支持动画），但 Edge 和 IE 不支持。由于支持尚不全面（而且没有什么历史深度），应使用 <picture> 元素（或其他方法）提供 WebP、JPEG 或 PNG 格式的回退。

BMP（位图文件）

BMP（位图图像）文件类型在 Windows 计算机上最为常见，一般只用于 web 应用程序和内容中的特殊情况。

BMP 理论上支持多种内部数据表示。最简单也是最常用的 BMP 文件形式是一种未压缩的光栅图像，每个像素占 3 个字节，分别代表其红、绿、蓝三部分，每行用 0x00 字节填充，宽度为 4 字节的倍数。

虽然规范中定义了其他数据表示方式，但它们并没有被广泛使用，通常完全没有实现。这些功能包括：支持不同的位深度、索引颜色、alpha 通道和不同的像素顺序（默认情况下，BMP 从左下角向右上角写入，而不是从左上角向右下角写入）。

从理论上讲，BMP 文件支持多种压缩算法，图像数据也可以使用 JPEG 或 PNG 格式存储。

GIF（图像互换格式）

1987 年，CompuServe 在线服务提供商推出了 GIF（图像互换格式）图像文件格式，为其服务的所有成员提供一种可使用的压缩图形格式。GIF 使用 Lempel-Ziv-Welch（LZW）算法对 8 位索引彩色图形进行无损压缩。GIF 和 XBM 是 HTML 最早支持的两种图形格式之一。

GIF 中的每个像素都由一个 8 位值表示，作为 24 位颜色（红、绿、蓝各 8 位）调色板的索引。颜色表的长度总是 2 的幂次（即每个调色板有 2、4、8、16、32、64 或 256 个条目）。要模拟 255 或 256 色以上的颜色，一般使用抖动。技术上可以对多个图像块进行平铺，每个图像块都有自己的调色板，以创建真彩色图像，但在实践中很少这样做。

像素是不透明的，除非特定的颜色指数被指定为透明，在这种情况下，染上该值的像素是完全透明的。

GIF 支持简单的动画，即在最初的全尺寸帧之后，提供一系列反映每帧图像变化部分的图像。

几十年来，GIF 因其简洁性和兼容性而广受欢迎。在社交媒体时代，GIF 动画开始被广泛用于制作短“视频”、备忘录和其他简单的动画序列。

GIF 的另一个流行特性是支持隔行扫描，即像素行的存储顺序会被打乱，因此部分接收的文件可以较低的质量显示。这在网络连接速度较慢时尤其有用。

GIF 是简单图像和动画的不错选择，不过将全彩图像转换为 GIF 可能会导致不理想的抖动。通常情况下，现代内容应使用 PNG 制作无损和索引静态图像，并应考虑使用 APNG 制作无损动画序列。

ICO（Microsoft Windows 图标）

ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌面图标而设计的。不过，早期版本的 Internet Explorer 允许网站在其根目录中提供名为 favicon.ico 的 ICO 文件，以指定一个 favicon——一个显示在收藏夹菜单和其他对网站图标有用的地方的图标。

一个 ICO 文件可以包含多个图标，文件开头有一个目录，列出每个图标的详细信息。目录之后是图标的数据。每个图标的数据既可以是不带文件头的 BMP 图像，也可以是完整的 PNG 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为直到 Windows Vista 才添加了对 ICO 文件内的 PNG 的支持，而且这种支持可能并不完善。

JPEG（联合图像专家小组图像）

JPEG（通常发音为“jay-peg”）图像格式是目前最广泛使用的静态图像有损压缩格式。它尤其适用于照片；将有损压缩应用于需要清晰度的内容，如图表，可能会产生令人不满意的效果。

JPEG 实际上是一种压缩照片的数据格式，而不是一种文件类型。JFIF（JPEG File Interchange Fformat）规范描述了我们认为的“JPEG”图像的文件格式。

PNG（便携式网络图形）

PNG（读作“ping”）图像格式使用无损压缩，同时支持比 GIF 更高的颜色深度，效率更高，并具有完全支持 alpha 透明度的特点。

PNG 受广泛支持，所有主要浏览器都完全支持其特性。Internet Explorer 在第 4-5 版中引入了对 PNG 的支持，但直到 IE 9 才完全支持该特性，并且在其间的许多年里出现了许多臭名昭著的错误，包括在曾经风靡一时的 Internet Explorer 6 中。这减缓了 PNG 的应用，但现在它已被普遍使用，尤其是在需要精确复制源图像时。

SVG（可缩放矢量图形）

SVG 是一种基于 XML 的矢量图形格式，它将图像的内容指定为一系列绘图命令，这些命令可以创建形状、线条、应用颜色、滤镜等。SVG 文件非常适合用于图表、图标和其他可精确绘制任何尺寸的图像。因此，SVG 在现代网页设计的用户界面元素中很受欢迎。

SVG 文件是包含源代码的文本文件，解释后可绘制所需的图像。例如，此示例定义了一个初始大小为 100 x 100 单位的绘图区域，其中包含一条斜穿方框的线：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

在网页内容中使用 SVG 有两种方式：

1. 你可以直接在 HTML 中写入 <svg> 元素，包含 SVG 元素来绘制图像。
2. 你可以在任何可以使用其他图像类型的地方显示 SVG 图像，包括使用 <img> 和 <picture> 元素、background-image CSS 属性等。

对于可以使用一系列绘图命令来表示的图像来说，SVG 是一个理想的选择，尤其是当图像的渲染尺寸未知或可能变化时，因为 SVG 可以平滑地缩放到所需的尺寸。对于严格意义上的位图或照片图像，SVG 通常并不适用，尽管可以在 SVG 中包含位图图像。

TIFF（标签图像文件格式）

TIFF 是一种光栅图形文件格式，用于存储扫描照片，但也可以是任何类型的图像。这是一种有点“重”的格式，因为 TIFF 文件往往比其他格式的图像要大。这是因为通常包含元数据，而且大多数 TIFF 图像要么未经压缩，要么使用压缩算法，压缩后的文件仍然相当大。

TIFF 支持多种压缩方法，但最常用的是传真软件使用的 CCITT 第 4 组（对于较早的传真系统，则为第 3 组）压缩系统，以及 LZW 和有损 JPEG 压缩。

TIFF 文件中的每个值都使用其标签（表示信息的类型，如图像的宽度）和类型（表示数据的存储格式）来指定，然后是要分配给该标签的数组值的长度（所有属性都存储在数组中，即使是单个值）。这样，相同的属性就可以使用不同的数据类型。例如，图像的宽度 ImageWidth 使用标签 0x0100 存储，是一个单项数组。通过指定类型 3（SHORT），ImageWidth 的值将存储为 16 位值：

指定类型 4（LONG）可将宽度存储为 32 位值：

单个 TIFF 文件可包含多个图像；例如，可用于表示多页文件（如多页扫描文件或收到的传真）。不过，读取 TIFF 文件的软件只需支持第一个图像。

TIFF 不仅支持 RGB，还支持多种色彩空间。这些空间包括 CMYK、YCbCr 等，这使得 TIFF 成为存储用于印刷、电影或电视媒体的图像的良好选择。

很久以前，一些浏览器支持在网页内容中使用 TIFF 图像；但如今，你需要使用特殊的库或浏览器插件才能做到这一点。因此，TIFF 文件在网页内容中并不实用，但在分发照片和其他用于精确编辑或打印的艺术品时，提供可下载的 TIFF 文件是很常见的。

WebP 图像

WebP 支持通过基于 VP8 视频编解码器的预测编码进行有损压缩，以及通过替换重复数据进行无损压缩。有损 WebP 图像比视觉上压缩级别相似的 JPEG 图像平均小 25-35%。无损 WebP 图像通常比 PNG 格式的相同图像小 26%。

WebP 还支持动画：在有损 WebP 文件中，图像数据由 VP8 比特流表示，其中可能包含多个帧。无损 WebP 包含描述动画的 ANIM 块和表示动画序列一帧的 ANMF 块。支持循环播放。

WebP 目前已在主要网络浏览器的最新版本中获得广泛支持，但还没有深入的历史支持。需要提供 JPEG 或 PNG 格式的回退，例如 <picture> 元素。

XBM（X Window 系统位图文件）

XBM（X 位图）文件是网络上最早支持的文件，但现在已不再使用，应避免使用，因为其格式存在潜在的安全隐患。现代浏览器多年来一直不支持 XBM 文件，但在处理旧内容时，你可能会发现其中一些仍然存在。

XBM 使用一段 C 代码将图像内容表示为一个字节数组。每个图像由 2 到 4 个 #define 指令组成，提供位图的宽度和高度（如果图像设计为光标，还可选择热点），后面是一个 unsigned char 数组，其中每个值包含 8 个 1 位单色像素。

图像宽度必须是 8 像素的倍数。例如，以下代码表示一幅 8 像素乘 8 像素的 XBM 图像，这些像素呈黑白棋盘图案：

#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};

选择合适的图像格式

选择最适合你的需求的图像格式可能比视频格式更容易，因为支持广泛的选择较少，而且每种格式往往都有一套特定的用例。

照片

有损压缩（取决于编码器的配置）通常能很好地压缩照片。这使得 JPEG 和 WebP 成为照片的不错选择，JPEG 的兼容性更好，但 WebP 的压缩效果可能更好。为了最大限度地提高质量和减少下载时间，可以考虑同时提供这两种格式的回退图像，WebP 是首选，JPEG 是次选。否则，为了兼容性，JPEG 是安全的选择。

图标

对于图标等较小的图像，应使用无损格式，以避免在大小受限的图像中丢失细节。虽然无损 WebP 是实现这一目的的理想选择，但其支持尚未普及，因此 PNG 是更好的选择，除非你提供回退选项。如果图像包含的颜色少于 256 种，GIF 也是一种选择，不过 PNG 通过其索引压缩选项（PNG-8）通常可以压缩得更小。

如果图标可以用矢量图形表示，可以考虑使用 SVG，因为它可以在各种分辨率和尺寸下缩放，非常适合响应式设计。虽然 SVG 支持良好，但仍值得为旧版浏览器提供 PNG 回退功能。

截图

除非你愿意在质量上妥协，否则应该使用无损格式截图。如果截图中有文字，这一点尤为重要，因为在有损压缩的情况下，文字很容易变得模糊不清。

PNG 可能是最好的选择，但无损 WebP 的压缩效果可能更好。

示意图、绘图和图表

对于任何可以使用矢量图形表示的图像，SVG 都是最佳选择。否则，应使用 PNG 等无损格式。如果选择有损格式（如 JPEG 或有损 WebP），请仔细权衡压缩级别，以避免导致文本或其他图形变得模糊或不清晰。

提供回退图像

虽然标准 HTML <img> 元素不支持图片的兼容性回退，但 <picture> 元素支持。<picture> 被用作多个 <source> 元素的包装器，每个元素都指定了不同格式或不同媒体条件下的图像版本，以及一个 <img> 元素，该元素定义了图像的显示位置以及默认或“最兼容”版本的回退。

例如，如果要显示一个最好使用 SVG 显示的图表，但希望提供一个 PNG 或 GIF 图表的回退选项，可以这样做：

<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <source srcset="diagram.png" type="image/png" />
  <img src="diagram.gif" width="620" height="540" alt="数据通道示意图" />
</picture>

你可以指定任意数量的 <source>，但通常 2 或 3 个就足够了。

参见

• 媒体类型和格式指南
• Web 媒体技术
• web 视频编解码器指南
• HTML <img> 和 <picture> 元素
• CSS background-image 属性
• Image() 构造函数和 HTMLImageElement 接口