常见图像文件类型描述

前言

世界上有非常多的图像文件格式。下面列举了网页上常用的格式，其中 BMP 由于浏览器支持限制而不被推荐，通常应该避免在网页内容中使用。

图像文件类型

APNG（动画便携式网络图形）

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

APNG 适用于不需要与其他活动或音轨同步的基本动画，如进度指示器、活动节拍器和其他动画序列。例如，在为 Apple 的 iMessage 应用程序（和 iOS 上的 "信息 "应用程序）创建动画贴纸时，APNG 就是支持的格式之一。它们也常用于网页浏览器用户界面的动画部分。

BMP（位图文件）

BMP（位图图像）文件类型在 Windows 计算机上最为常见，一般只用于网络应用程序和内容中的特殊情况。
BMP 理论上支持多种内部数据表示。最简单也是最常用的 BMP 文件形式是一种未压缩的光栅图像，每个像素占 3 个字节，分别代表其红、绿、蓝三部分，每行用 0x00 字节填充，宽度为 4 字节的倍数。

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

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

通常应避免将 BMP 用于网站内容，因为这不是一种普遍接受的格式。

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（微软视窗图标）

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

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

ICO 文件不应在网页内容中使用。此外，如《为不同的使用环境提供图标》一文所述，ICO 文件在收藏夹中的使用已经减少，转而使用 PNG 文件和 <link> 元素。

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

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

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

PNG（便携式网络图形）

PNG（读作 “ping”）图像格式使用无损压缩或有损压缩来提供更高效的压缩，支持比 GIF 更高的颜色深度，并支持完全的 Alpha 透明度。

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

SVG（可缩放矢量图形）

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

SVG 文件是包含源代码的文本文件，在解释后可绘制出所需的图像。

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

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

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

TIFF（标记图像文件格式）

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

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

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

单个 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> 元素。

选择合适的图像

照片

照片一般都能很好地进行有损压缩（取决于编码器的配置）。因此，JPEG 和 WebP 是照片的不错选择，JPEG 的兼容性更好，但 WebP 的压缩效果可能更好。为了最大限度地提高质量和减少下载时间，可以考虑使用后备方案，将 WebP 作为第一选择，JPEG 作为第二选择。否则，JPEG 是兼容性的安全选择。

图标

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

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

屏幕截图

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

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

示意图、绘图和图表

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

提供后备图像

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

<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>

您可以指定任意数量的 <源>，但通常只需 2 或 3 个即可。

结语

翻译自 常见图像文件类型 .希望对你有所帮助。