图像文件类型和格式指南

以下列出了 Web 上最常用的图像文件格式。

以下列出了出现在 Web 上但应避免用于 Web 内容的图像格式（通常是因为它们没有广泛的浏览器支持，或者因为存在更好的替代方案）。

以下部分简要概述了 Web 浏览器支持的每种图像文件类型。

在下表中，术语每组件位数指的是用于表示每个颜色组件的位数。例如，8 位的 RGB 色深表示红色、绿色和蓝色组件中的每一个都由一个 8 位值表示。另一方面，位深度是用于在内存中表示每个像素的总位数。

APNG 是一种最初由 Mozilla 引入的文件格式，它扩展了PNG标准以添加对动画图像的支持。从概念上讲，它类似于已使用数十年的动画 GIF 格式，但 APNG 更加强大，因为它支持各种色彩深度，而动画 GIF 只支持 8 位索引色。

APNG 非常适合不需要与其他活动或音轨同步的基本动画，例如进度指示器、活动转轮和其他动画序列。例如，APNG 是Apple iMessage 应用程序（以及 iOS 上的 Messages 应用程序）在创建动画贴纸时支持的格式之一。它们也常用于 Web 浏览器用户界面的动画部分。

AV1 图像文件格式 (AVIF) 是一种强大的开源、免版税的文件格式，它将AV1 位流编码到高效图像文件格式 (HEIF) 容器中。

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

该格式提供了

• 与 JPG 和 PNG 相比，对于视觉上相似的压缩级别，具有出色的有损压缩（例如，有损 AVIF 图像比 JPEG 图像小约 50%）。
• 通常，AVIF 的压缩比 WebP 更好——对于同一组 JPG，中位数为 50% 对 30% 的压缩（来源：AVIF WebP 比较 (CTRL 博客)）。
• 无损压缩。
• 动画/多图像存储（类似于动画 GIF，但压缩率更高）
• 支持 Alpha 通道（即用于透明度）。
• 高动态范围 (HDR): 支持存储图像，这些图像可以表示图像最亮和最暗部分之间更大的对比度。
• 宽色域: 支持包含更大范围颜色的图像。

AVIF 不支持渐进式渲染，因此文件必须完全下载才能显示。这通常对真实用户体验的影响很小，因为 AVIF 文件比等效的 JPEG 或 PNG 文件小得多，因此可以更快地下载和显示。对于更大的文件大小，影响可能会变得很大，您应该考虑使用支持渐进式渲染的格式。

AVIF 在 Chrome、Edge、Opera、Safari 和 Firefox 中得到支持。由于支持尚未完全普及（而且历史深度有限），您应该使用 WebP、JPEG 或 PNG 格式提供回退，使用 <picture> 元素（或其他方法）。

BMP（位图图像）文件类型在 Windows 计算机上最为普遍，通常仅用于 Web 应用程序和内容中的特殊情况。

BMP 理论上支持各种内部数据表示。最简单也是最常用的 BMP 文件形式是未压缩的栅格图像，每个像素占用 3 个字节，表示其红色、绿色和蓝色分量，并且每行用 0x00 字节填充到 4 个字节的倍数。

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

理论上，支持几种压缩算法，图像数据也可以存储在 JPEG 或 PNG 格式的 BMP 文件中。

1987 年，CompuServe 在线服务提供商引入了 GIF（图形交换格式）图像文件格式，以提供所有成员都可以使用的压缩图形格式。GIF 使用 Lempel-Ziv-Welch (LZW) 算法对 8 位索引颜色图形进行无损压缩。GIF 是 HTML 支持的两种图形格式之一，另一种是 XBM。

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 图标）文件格式由 Microsoft 设计，用于 Windows 系统的桌面图标。但是，早期版本的 Internet Explorer 引入了网站提供名为 favicon.ico 的 ICO 文件的功能，该文件位于网站的根目录中，用于指定 favicon — 一个将在收藏夹菜单中以及其他需要网站图标表示的地方显示的图标。

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

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

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

PNG（发音为“ping”）图像格式使用无损压缩，同时支持比 GIF 更高的颜色深度，并且效率更高，以及完整的 alpha 透明度支持。

PNG 受到广泛支持，所有主要浏览器都完全支持其功能。

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

SVG 文件是包含源代码的文本文件，当解释这些代码时，会绘制所需的图像。例如，此示例定义了一个初始尺寸为 100 乘 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 中包含位图图像。

TIFF 是一种光栅图形文件格式，最初用于存储扫描照片，尽管它可以是任何类型的图像。它是一种比较“重量级”的格式，因为 TIFF 文件往往比其他格式的图像更大。这是因为通常包含元数据，以及大多数 TIFF 图像要么未压缩，要么使用压缩算法，即使在压缩后也会留下相当大的文件。

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

TIFF 文件中的每个值都使用其 **标签**（指示其是什么类型的信息，例如图像的宽度）和 **类型**（指示数据存储的格式）来指定，然后是分配给该标签的值数组的长度（所有属性都存储在数组中，即使对于单个值也是如此）。这允许对相同属性使用不同的数据类型。例如，图像的宽度 ImageWidth 使用标签 0x0100 存储，并且是一个单条目数组。通过指定类型 3 (SHORT)，ImageWidth 的值存储为一个 16 位值

指定类型 4 (LONG) 将宽度存储为一个 32 位值

单个 TIFF 文件可以包含多个图像；这可以用来表示多页文档，例如（例如，多页扫描文档或接收的传真）。但是，读取 TIFF 文件的软件只需要支持第一个图像。

TIFF 支持多种颜色空间，不仅仅是 RGB。这些包括 CMYK、YCbCr 等等，使得 TIFF 成为存储用于印刷、胶片或电视媒体的图像的理想选择。

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

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

WebP 还支持动画：在有损 WebP 文件中，图像数据由 VP8 位流表示，该位流可能包含多个帧。无损 WebP 包含 ANIM 块，该块描述了动画，以及 ANMF 块，该块表示动画序列的一帧。支持循环。

WebP 现在在最新版本的各大主流 Web 浏览器中得到广泛支持，尽管它没有深厚的历史支持。提供 JPEG 或 PNG 格式的备用方案，例如使用 <picture> 元素。

XBM（X 位图）文件是第一个在 Web 上获得支持的文件，但不再使用，应避免使用，因为它们的格式存在潜在的安全问题。现代浏览器多年来一直不支持 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="Diagram showing the data channels" />
</picture>

您可以根据需要指定任意数量的 <source>，但通常 2 或 3 就足够了。

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