图像文件类型与格式指南
===========

在本指南中，我们将介绍 web 浏览器普遍支持的图像文件类型，并提供一些关于它们的信息与见解，帮助你为你的网站选择最合适的图像格式。

常见图像文件类型
--------

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

| 缩写 | 文件格式 | MIME 类型 | 文件扩展名 | 摘要 |
| --- | --- | --- | --- | --- |
| APNG | 动态可移植网络图形 | `image/apng` | `.apng` | 是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少。**以下浏览器支持**：Chrome、Edge、Firefox、Opera、Safari。 |
| AVIF | AV1 图像档案格式 | `image/avif` | `.avif` | 由于其性能高，且无需版税，是图像和动画图像的理想选择。与 PNG 或 JPEG 相比，它的压缩效果更好，支持更高的色深、动画帧、透明度等。请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（也就是说，要使用 `<picture>` 元素）。**以下浏览器支持**：Chrome、Firefox（只支持静态图，动态图尚未实现）、Opera、Safari。 |
| GIF | 图像互换格式 | `image/gif` | `.gif` | 是简单图像和动画的不错选择。无损*和*有索引的静态图像首选 PNG，动画序列可考虑 WebP、AVIF 或 APNG。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| JPEG | 联合图像专家小组图像 | `image/jpeg` | `.jpg`、`.jpeg`、`.jfif`、`.pjpeg`、`.pjp` | 静态图像有损压缩的理想选择（目前最流行）。如果需要更精确地再现图像，则首选 PNG；如果需要更好的再现效果和更高的压缩率，则首选 WebP/AVIF。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| PNG | 便携式网络图形 | `image/png` | `.png` | 与 JPEG 相比，PNG 能更精确地再现源图像，或在需要透明的情况下更受青睐。WebP/AVIF 可提供更好的压缩和再现效果，但浏览器的支持比较有限。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| SVG | 可缩放矢量图形 | `image/svg+xml` | `.svg` | 矢量图像格式；适用于用户界面元素、图标、图表等，必须以不同尺寸精确绘制。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| WebP | Web 图像格式 | `image/webp` | `.webp` | 是静止图像和动画图像的绝佳选择。WebP 的压缩效果比 PNG 或 JPEG 好得多，而且支持更高的色深、动画帧和透明度等。AVIF 的压缩效果稍好，但在浏览器中的支持度不高，而且不支持渐进式渲染。**以下浏览器支持**：Chrome、Edge、Firefox、Opera、Safari。 |

**备注：** 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。

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

| 缩写 | 文件格式 | MIME 类型 | 文件扩展名 | 支持的浏览器 |
| --- | --- | --- | --- | --- |
| BMP | 位图文件 | `image/bmp` | `.bmp` | Chrome、Edge、Firefox、IE、Opera、Safari |
| ICO | Microsoft 图标 | `image/x-icon` | `.ico`、`.cur` | Chrome、Edge、Firefox、IE、Opera、Safari |
| TIFF | 标签图像文件格式 | `image/tiff` | `.tif`、`.tiff` | Safari |

**备注：** 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。

**备注：** Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 Chromium bug 和 Firefox bug 以了解更多信息。

图像文件类型详介
--------

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

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

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

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

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

|  |  |
| --- | --- |
| MIME 类型 | `image/apng` |
| 文件拓展名 | `.apng` |
| 规范 | wiki.mozilla.org/APNG\_Specification |
| 浏览器兼容性 | Chrome 59、Edge 12、Firefox 3、Opera 46、Safari 8 |
| 最高分辨率 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个 *D* 位值表示，分别代表红、绿、蓝三色的色阶。 |
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有透明度的灰度值 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | 无损 |
| 许可 | 根据创作共用署名-相同方式共享许可（CC-BY-SA）3.0 或更高版本免费开放。 |

### AVIF 图像

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

**备注：** AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。

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 格式的回退。

|  |  |
| --- | --- |
| MIME 类型 | `image/avif` |
| 文件扩展名 | `.avif` |
| 规范 | AV1 图像文件格式（AVIF） |
| 浏览器兼容性 | Chrome 85、Opera 71、Firefox 93 和 Safari 16.1
 * Firefox 93 支持静态图像，色彩空间支持全色和有限范围色彩，图像变换支持镜像和旋转。偏好设置 image.avif.compliance\_strictness 可用于调整符合规范的严格程度。不支持动态图像。
* Firefox 77~92 版本需要将首选项 `image.avif.enable` 设置为 `true`。更早期版本仅提供基本支持。
 |
| 最大尺寸 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 | AV1 比特流 & 解码过程规范，第 6.4.2 节中提供了色彩模式支持信息：颜色配置语义。
不完全的摘要：* 颜色模式：YUV444、YUV422、YUV420
* 灰度支持：YUV400
* 位数：8/10/12-bit
* 透明度支持
* ICC 配置项支持
* NCLX 支持：sRGB、linear sRGB、linear Rec2020、PQ Rec2020、HLG Rec2020、PQ P3、HLG P3 等
* Tiling 支持
 |
| 压缩 | 有损压缩和无损压缩 |
| 许可 | 免版税。有关许可信息，请访问版权页面。 |

### BMP（位图文件）

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

**警告：** 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。

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

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

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

|  |  |
| --- | --- |
| MIME 类型 | `image/bmp` |
| 文件扩展名 | `.bmp` |
| 规范 | 没有规范；不过，微软在 learn.microsoft.com/zh-cn/windows/win32/gdi/bitmap-storage 提供了格式的通用文档。 |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 的所有版本。 |
| 最大尺寸 | 32,767×32,767 像素或 2,147,483,647×2,147,483,647 像素，取决于格式版本 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个比特代表一个像素，可以是黑色或白色。 |
| 真彩色 | 8 和 16 | 每个像素由三个值表示，分别代表红色、绿色和蓝色，每个值为 *D* 位。 |
| 索引颜色 | 2、4 和 8 | 每个像素由一个 2、4 或 8 位的值表示，作为色彩表的索引。 |
| 带有灰度的真彩色 | *n/a* | BMP 没有明显的灰度格式。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个值表示，分别代表红、绿、蓝和 alpha 颜色成分；每个值为 *D* 位。 |

 |
| 压缩 | 支持多种压缩方法，包括有损或无损算法 |
| 许可 | 由 Microsoft Open Specification Promise 记载，虽然微软拥有针对 BMP 的专利，但他们已公布了一项承诺，只要满足特定条件，他们就不会主张其专利权。但这并不等同于许可。BMP 包含在 Windows 元文件格式（`.wmf`）中。 |

### 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 制作无损动画序列。

|  |  |
| --- | --- |
| MIME 类型 | `image/gif` |
| 文件扩展名 | `.gif` |
| 规范 | GIF87a 规范GIF89a 规范 |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 65,536×65,536 像素 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | *n/a* | GIF 不包括专用的灰度格式。 |
| 真彩色 | *n/a* | GIF 不支持真彩色像素。 |
| 索引颜色 | 8 | GIF 调色板中的每种颜色定义为红、绿、蓝各 8 位（每个像素共 24 位）。 |
| 带有灰度的真彩色 | *n/a* | GIF 不提供专用的灰度格式。 |
| 带有透明度的真彩色 | *n/a* | GIF 不支持真彩色像素。 |

 |
| 压缩 | 无损 (LZW) |
| 许可 | 虽然 GIF 格式本身是开放的，但 LZW 压缩算法在本世纪初之前一直受专利保护。截至 2004 年 7 月 7 日，所有相关专利都已过期，GIF 格式可以自由使用。 |

### ICO（Microsoft Windows 图标）

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

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

**警告：** ICO 文件*不应*用于网页内容。此外，如为不同的使用环境提供图标所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 `<link>` 元素。


|  |  |
| --- | --- |
| MIME 类型 | `image/vnd.microsoft.icon`（官方格式），`image/x-icon`（由 Microsoft 使用） |
| 文件扩展名 | `.ico` |
| 规范 |  |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 256×256 像素 |
| 支持的颜色模式 | 

BMP 格式的图标| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个比特代表一个像素，可以是黑色或白色。 |
| 真彩色 | 8 和 16 | 每个像素由三个值表示，分别代表红色、绿色和蓝色，每个值为 *D* 位。 |
| 索引颜色 | 2、4 和 8 | 每个像素由一个 2、4 或 8 位的值表示，作为色彩表的索引。 |
| 带有灰度的真彩色 | *n/a* | BMP 没有明显的灰度格式。 |
| 带有透明度的真彩色 | 8 和 16 | BMP 没有明显的灰度格式。每个像素由四个值表示，分别代表红、绿、蓝和 Alpha 颜色分量；每个值为 *D* 位。 |

PNG 格式的图标| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个*D*位值表示，分别代表红、绿、蓝三色的色阶。 |
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有灰度的真彩色 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 Alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | BMP 格式的图标几乎总是使用无损压缩，但也有有损压缩方法。PNG 图标始终使用无损压缩。 |
| 许可 | — |

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

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

JPEG 实际上是一种压缩照片的数据格式，而不是一种文件类型。JFIF（**J**PEG **F**ile **I**nterchange **F**format）规范描述了我们认为的“JPEG”图像的文件格式。

|  |  |
| --- | --- |
| MIME 类型 | `image/jpeg` |
| 文件扩展名 | `.jpg`、`.jpeg`、`.jpe`、`.jif`、`.jfif` |
| 规范 | jpeg.org/jpeg/ |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 65,535×65,535 像素 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | *n/a* | 使用单 Luma 通道（Y）可支持真正的灰度。 |
| 真彩色 | 8 | 每个像素由红、蓝、绿三种颜色分量描述，每种颜色分量为 8 位。 |
| 索引颜色 | *n/a* | JPEG 不提供索引颜色模式。 |
| 带有灰度的真彩色 | *n/a* | JPEG 不支持透明度通道。 |
| 带有透明度的真彩色 | *n/a* | JPEG 不支持透明度通道。 |

 |
| 压缩 | 有损；基于离散余弦变换 |
| 许可 | 截至 2006 年 10 月 27 日，所有美国专利均已过期。 |

### PNG（便携式网络图形）

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

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

|  |  |
| --- | --- |
| MIME 类型 | `image/png` |
| 文件扩展名 | `.png` |
| 规范 | w3.org/TR/PNG |
| 浏览器兼容性 | 

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 基本支持 | 1 | 12 | 1 | 5 | 3.5.1（Presto）15（Blink） | 1 |
| Alpha 通道 | 1 | 12 | 1 | 5 | 6（Presto）所有（Blink） | 1 |
| 伽玛校正 | 否 | 是 | 1 | 8 | 1 | 损坏的 |
| 颜色校正 | 否 | 是 | 3 | 9 | 否 | 否 |
| 插帧 | 否 | ? | 1 | 损坏的 | 3.5.1 | 否 |

 |
| 最大尺寸 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个*D*位值表示，分别代表红、绿、蓝三色的色阶。 |
|
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有灰度的真彩色 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 Alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | 无损，可选择索引颜色，如 GIF |
| 许可 | 
 ©2003 W3C（MIT、ERCIM、Keio)，保留所有权利。W3C
 免责声明、商标、文档使用和软件授权适用。没有已知的专利使用费。
  |

### SVG（可缩放矢量图形）

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

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


```html
<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 中包含位图图像。

|  |  |
| --- | --- |
| MIME 类型 | `image/svg+xml` |
| 文件扩展名 | `.svg` |
| 规范 | w3.org/TR/SVG2 |
| 浏览器兼容性 | 

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| SVG 支持 | 4 | 12 | 3 | 9 | 10（Presto）15（Blink） | 3.2 |
| SVG 作为图像（`<img>` 等） | 28 | 12 | 4 | 9 | 10（Presto）15（Blink） | 9 |

 |
| 最大尺寸 | 无限制 |
| 支持的颜色模式 | SVG 中的颜色是使用 CSS 颜色语法指定的。 |
| 压缩 | SVG 源可以在传输过程中使用 HTTP 压缩技术进行压缩，也可以在磁盘上以 `.svgz` 文件的形式进行压缩。 |
| 许可 | 
 ©2018 W3C（MIT、ERCIM、Keio、Beihang），保留所有权利。W3C
 责任、商标、文档使用和软件授权适用。没有已知的专利使用费。
  |

### TIFF（标签图像文件格式）

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

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

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

| 标签 | 类型 | 大小 | 值 |
| --- | --- | --- | --- |
| `0x0100`（`ImageWidth`） | `0x0003`（`SHORT`） | `0x00000001`（1 个条目） | `0x0280`（640 像素） |

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

| 标签 | 类型 | 大小 | 值 |
| --- | --- | --- | --- |
| `0x0100`（`ImageWidth`） | `0x0004`（`LONG`） | `0x00000001`（1 个条目） | `0x00000280`（640 像素） |

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

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

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

|  |  |
| --- | --- |
| MIME 类型 | `image/tiff` |
| 文件扩展名 | `.tif`、`.tiff` |
| 规范 | https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#50577413\_pgfId-1035272 |
| 浏览器兼容性 | 没有浏览器集成对 TIFF 的支持；其价值在于作为一种下载格式 |
| 最大尺寸 | 4,294,967,295×4,294,967,295 像素（理论值） |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| Bilevel | 1 | 双字节 TIFF 每个字节存储 8 位，每个像素一位。`PhotometricInterpretation` 字段指定 0 和 1 中哪个是黑色，哪个是白色。 |
| 灰度 | 4 和 8 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 | 所有真彩色 RGB 图像都使用红、绿、蓝各 8 位来存储。 |
| 索引颜色 | 4 和 8 | 每个像素都是 `ColorMap` 记录的索引，该记录定义了图像中使用的颜色。颜色地图列出了所有红色值，然后是所有绿色值，最后是所有蓝色值（而不是 `rgb, rgb, rgb…`）。 |
| 带有灰度的真彩色 | 4 和 8 | 通过在 `SamplesPerPixel` 字段中指定每个像素有 3 个以上的采样点，并指明 Alpha 类型（1 表示关联的、预乘的 Alpha 分量，2 表示非关联的 Alpha（单独的哑光）），可以添加 Alpha 信息；但是，TIFF 文件中很少使用 Alpha 通道，用户的软件可能也不支持。 |
| 带有透明度的真彩色 | 8 | 通过在 `SamplesPerPixel` 字段中指定每个像素有 3 个以上的采样点，并指明 Alpha 类型（1 表示关联的、预乘的 Alpha 分量，2 表示非关联的 Alpha（单独的哑光）），可以添加 Alpha 信息；但是，TIFF 文件中很少使用 Alpha 通道，用户的软件可能也不支持。 |

 |
| 压缩 | 大多数 TIFF 文件未经压缩，但支持无损 PackBits 和 LZW 压缩，以及有损 JPEG 压缩。 |
| 许可 | 无需许可证（除了与你可能使用的库相关的许可证）；所有已知专利均已过期。 |

### WebP 图像

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

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

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

|  |  |
| --- | --- |
| MIME 类型 | `image/webp` |
| 文件扩展名 | `.webp` |
| 规范 | RIFF 容器规范RFC 6386: VP8 Data Format and Decoding Guide（有损压缩）WebP 无损比特流规范 |
| 浏览器兼容性 | 

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 有损 WebP 支持 | 17 | 18 | 65 | no | 11.10（Presto）15（Blink） | 14 |
| 无损 WebP | Android 2325 | 18 | 65 | 否 | 12.10（Presto）15（Blink） | 14 |
| 动画/th> | 32 | 18 | 65 | 否 | 19（Blink） | 14 |

WebP 还可用于从 Firefox 96 和 Chrome 50 的画布中*导出*图像。（参见 `HTMLCanvasElement.toBlob()` 以获取更详细的支持情况） |
| 最大尺寸 | 16,383×16,383 像素 |
| 支持的颜色模式 | 有损 WebP 以 8 位 Y'CbCr 4:2:0 (YUV420) 格式存储图像。无损 WebP 使用 8 位 ARGB 颜色，每个分量 8 位，每个像素共 32 位。 |
| 压缩 | 无损（Huffman、LZ77 或 color cache codes）或有损（VP8） |
| 许可 | 无需许可证；源代码可公开获取。 |

**备注：** 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。

### XBM（X Window 系统位图文件）

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

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

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


```cpp
#define square8\_width 8
#define square8\_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
```


|  |  |
| --- | --- |
| MIME 类型 | `image/xbm`、`image-xbitmap` |
| 文件扩展名 | `.xbm` |
| 规范 | 无 |
| 浏览器兼容性 | Firefox 1–3.5 和 Internet Explorer 1–5 |
| 最大尺寸 | 无限制 |
| 支持的颜色模式 | 

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个字节包含 8 个 1 位像素。 |
| 真彩色 | *n/a* | *n/a* |
| 索引颜色 | *n/a* | *n/a* |
| 带有灰度的真彩色 | *n/a* | *n/a* |
| 带有透明度的真彩色 | *n/a* | *n/a* |

 |
| 压缩 | 无损 |
| 许可 | 开源 |

选择合适的图像格式
---------

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

### 照片

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

| 最佳选择 | 回退方案 |
| --- | --- |
| WebP 或 JPEG | JPEG |

### 图标

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

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

| 最佳选择 | 回退方案 |
| --- | --- |
| SVG、无损 WebP 或 PNG | PNG |

### 截图

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

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

| 最佳选择 | 回退方案 |
| --- | --- |
| 无损 WebP 或 PNG；如果不担心压缩伪影，则使用 JPEG 文件 | PNG 或 JPEG；GIF 用于颜色数较少的屏幕截图 |

### 示意图、绘图和图表

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

| 最佳选择 | 回退方案 |
| --- | --- |
| SVG | PNG |

提供回退图像
------

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

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


```html
<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` 接口