常见的图像文件类型
下面列出了网络上最常用的图像文件格式。
缩写
文件格式
MIME 类型
文件扩展名
总结
APNG
动画便携式网络图形
image/apng
.apng, .png
无损动画序列的不错选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持不如 APNG 广泛。
支持：Chrome, Edge, Firefox, Opera, Safari。
AVIF
AV1 图像文件格式
image/avif
.avif
由于其高性能和免版税图像格式，是图像和动画图像的不错选择。它提供比 PNG 或 JPEG 更好的压缩，并支持更高的色深、动画帧、透明度等。请注意，使用 AVIF 时，应包含对浏览器支持更好的格式的回退（即使用
支持：Chrome, Edge, 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
当需要更精确地再现源图像或需要透明度时，PNG 优于 JPEG。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 提供略微更好的压缩，但在浏览器中的支持不如 WebP 广泛，并且不支持渐进式渲染。
支持：Chrome, Edge, Firefox, Opera, Safari
注意：与 WebP 和 AVIF 等较新格式相比，PNG、JPEG、GIF 等旧格式性能较差，但拥有更广泛的“历史”浏览器支持。随着不支持这些新格式的浏览器变得越来越不重要（即市场份额几乎为零），较新的图像格式越来越受欢迎。
以下列表包含网络上出现的图像格式，但应避免用于网络内容（通常是因为它们没有广泛的浏览器支持，或者有更好的替代品）。
缩写
文件格式
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 错误和 Firefox 错误。
图像文件类型详情
以下部分简要概述了网络浏览器支持的每种图像文件类型。
在下表中，术语每分量位数指的是用于表示每个颜色分量的位数。例如，8 的 RGB 色深表示红色、绿色和蓝色每个分量都由一个 8 位值表示。另一方面，位深是用于表示内存中每个像素的总位数。
APNG（动画便携式网络图形）
APNG 是一种由 Mozilla 首次引入的文件格式，它扩展了 PNG 标准，以增加对动画图像的支持。APNG 在概念上类似于已使用数十年的动画 GIF 格式，但功能更强大，因为它支持各种色深，而动画 GIF 仅支持 8 位索引颜色。
APNG 非常适合不需要与其他活动或音轨同步的基本动画，例如进度指示器、活动旋转器和其他动画序列。例如，APNG 是 Apple iMessage 应用程序（以及 iOS 上的消息应用程序）创建动画贴纸时支持的格式之一。它们也常用于网络浏览器用户界面的动画部分。
MIME 类型
image/apng
文件扩展名
.apng, .png
规范
W3C PNG 规范
浏览器兼容性
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 位深度。
带 alpha 的灰度
8 和 16
每个像素由两个 D 位值表示：灰度像素的强度和 alpha 样本，指示像素的不透明度。
带 alpha 的真彩色
8 和 16
每个像素由四个 D 像素颜色分量组成：红色、绿色、蓝色和 alpha 样本，指示像素的不透明度。
压缩
无损
许可
根据 知识共享署名-相同方式共享许可协议 (CC-BY-SA) 3.0 或更高版本免费开放。
AVIF 图像
AV1 图像文件格式 (AVIF) 是一种功能强大、开源、免版税的文件格式，它将 AV1 比特流编码为高效图像文件格式 (HEIF) 容器。
注意：AVIF 有潜力成为网络内容图像共享的“下一个大事件”。它提供了最先进的功能和性能，并且没有阻碍类似替代方案的复杂许可和专利版税的困扰。
AV1 是一种最初为互联网视频传输而设计的编码格式。该格式受益于近年来视频编码的重大进步，并可能受益于相关的硬件渲染支持。然而，它在某些情况下也有缺点，因为视频和图像编码有一些不同的要求。
该格式提供
与 JPG 和 PNG 相比，在视觉相似的压缩级别下具有出色的有损压缩（例如，有损 AVIF 图像比 JPEG 图像小约 50%）。
通常，AVIF 比 WebP 具有更好的压缩——相同 JPG 集的平均压缩率为 50% vs. 30%（来源：AVIF WebP 比较 (CTRL Blog)）。
无损压缩。
动画/多图像存储（类似于动画 GIF，但压缩效果更好）
Alpha 通道支持（即透明度）。
高动态范围 (HDR)：支持存储能够表示图像最亮和最暗部分之间更大对比度的图像。
宽色域：支持包含更大范围颜色的图像。
AVIF 不支持渐进式渲染，因此文件必须完全下载才能显示。这通常对实际用户体验影响不大，因为 AVIF 文件比等效的 JPEG 或 PNG 文件小得多，因此可以更快地下载和显示。对于更大的文件大小，影响可能会变得显著，您应该考虑使用支持渐进式渲染的格式。
Chrome、Edge、Opera、Safari 和 Firefox 支持 AVIF。由于支持尚不全面（且历史深度较浅），您应该使用
MIME 类型
image/avif
文件扩展名
.avif
规范
AV1 图像文件格式 (AVIF)
浏览器兼容性
Chrome 85, Edge 121, Opera 71, Firefox 93, 和 Safari 16.1。
Firefox 93 支持静态图像，并支持全范围和有限范围的颜色空间，以及镜像和旋转的图像变换。偏好设置 image.avif.compliance_strictness 可用于调整与规范的合规严格性。
Firefox 113 及更高版本支持动画图像。
最大尺寸
2,147,483,647×2,147,483,647 像素
支持的颜色模式
颜色模式支持信息在 AV1 比特流和解码过程规范的 6.4.2 节：颜色配置语义中提供。
非详尽的摘要是
颜色模式：YUV444, YUV422, YUV420
灰度支持：YUV400
位数：8/10/12 位
Alpha 支持
ICC 配置文件支持
NCLX 支持：sRGB, 线性 sRGB, 线性 Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3 等。
分块支持
压缩
有损和无损。
许可
免版税。许可信息可在 许可页面获得。
BMP（位图文件）
BMP（位图图像）文件类型在 Windows 计算机上最为普遍，通常仅用于网络应用和内容中的特殊情况。
警告：您通常应避免在网站内容中使用 BMP 文件。最常见的 BMP 文件形式将数据表示为未压缩的栅格图像，导致文件大小与 PNG 或 JPG 图像类型相比过大。存在更高效的 BMP 格式，但它们并未广泛使用，也很少在网络浏览器中受支持。
BMP 理论上支持各种内部数据表示。最简单、最常用的 BMP 文件形式是未压缩的栅格图像，每个像素占用 3 字节，表示其红色、绿色和蓝色分量，每行用 0x00 字节填充到 4 字节的倍数。
虽然规范中定义了其他数据表示，但它们并未广泛使用，并且通常完全未实现。这些功能包括：支持不同的位深、索引颜色、alpha 通道和不同的像素顺序（默认情况下，BMP 从左下角向右和向上写入，而不是从左上角向右和向下写入）。
理论上，支持几种压缩算法，并且图像数据也可以以 JPEG 或 PNG 格式存储在 BMP 文件中。
MIME 类型
image/bmp
文件扩展名
.bmp
规范
无规范；但是，Microsoft 在 docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage 提供了一般格式文档。
浏览器兼容性
所有版本的 Chrome、Edge、Firefox、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 位的值表示，作为颜色表的索引。
带 alpha 的灰度
不适用
BMP 没有独特的灰度格式。
带 alpha 的真彩色
8 和 16
每个像素由四个值表示红色、绿色、蓝色和 alpha 颜色分量；每个都是 D 位。
压缩
支持多种压缩方法，包括有损或无损算法
许可
受 Microsoft Open Specification Promise 涵盖；虽然 Microsoft 对 BMP 拥有专利，但他们已发布承诺，只要满足特定条件，就不主张其专利权。但这与许可证不同。BMP 包含在 Windows Metafile Format (.wmf) 中。
GIF（图形交换格式）
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 用于无损动画序列。
MIME 类型
image/gif
文件扩展名
.gif
规范
GIF87a 规范GIF89a 规范
浏览器兼容性
所有版本的 Chrome、Edge、Firefox、Opera 和 Safari
最大尺寸
65,536×65,536 像素
支持的颜色模式
颜色模式
每分量位数（D）
描述
灰度
不适用
GIF 不包含专用灰度格式。
真彩色
不适用
GIF 不支持真彩色像素。
索引颜色
8
GIF 调色板中的每种颜色都定义为红色、绿色和蓝色各 8 位（每个像素总共 24 位）。
带 alpha 的灰度
不适用
GIF 不提供专用灰度格式。
带 alpha 的真彩色
不适用
GIF 不支持真彩色像素。
压缩
无损 (LZW)
许可
虽然 GIF 格式本身是开放的，但 LZW 压缩算法直到 21 世纪初才受到专利保护。截至 2004 年 7 月 7 日，所有相关专利均已过期，GIF 格式可自由使用。
ICO (Microsoft Windows 图标)
ICO (Microsoft Windows 图标) 文件格式由 Microsoft 设计，用于 Windows 系统的桌面图标。然而，早期版本的 Internet Explorer 引入了网站在其根目录中提供名为 favicon.ico 的 ICO 文件以指定 favicon 的功能 — 一个显示在收藏夹菜单以及其他需要网站图标表示的位置的图标。
ICO 文件可以包含多个图标，并以一个目录列表开头，其中包含每个图标的详细信息。目录之后是图标的数据。每个图标的数据可以是不带文件头的 BMP 图像，也可以是完整的PNG 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为 ICO 文件中对 PNG 的支持直到 Windows Vista 才添加，并且可能不受良好支持。
警告：ICO 文件不应用于网络内容。此外，它们用于收藏夹图标的使用已减少，转而使用 PNG 文件和 元素，如为不同使用场景提供图标中所述。
MIME 类型
image/vnd.microsoft.icon（官方）, image/x-icon（Microsoft 使用）
文件扩展名
.ico
规范
浏览器兼容性
所有版本的 Chrome、Edge、Firefox、Opera 和 Safari
最大尺寸
256×256 像素
支持的颜色模式
BMP 格式的图标
颜色模式
每分量位数（D）
描述
灰度
1
每个位代表一个像素，可以是黑色或白色。
真彩色
8 和 16
每个像素由三个值表示红色、绿色和蓝色颜色分量；每个都是 D 位。
索引颜色
2、4 和 8
每个像素由一个 2、4 或 8 位的值表示，作为颜色表的索引。
带 alpha 的灰度
不适用
BMP 没有独特的灰度格式。
带 alpha 的真彩色
8 和 16
每个像素由四个值表示红色、绿色、蓝色和 alpha 颜色分量；每个都是 D 位。
PNG 格式的图标
颜色模式
每分量位数（D）
描述
灰度
1, 2, 4, 8, 和 16
每个像素由一个 D 位值组成，指示灰度像素的亮度。
真彩色
8 和 16
每个像素由三个 D 位值表示，指示红色、绿色和蓝色颜色分量的级别。
索引颜色
1, 2, 4, 和 8
每个像素是一个 D 位值，指示 APNG 文件中 PLTE 块中包含的颜色调色板的索引；调色板中的颜色都使用 8 位深度。
带 alpha 的灰度
8 和 16
每个像素由两个 D 位值表示：灰度像素的强度和 alpha 样本，指示像素的不透明度。
带 alpha 的真彩色
8 和 16
每个像素由四个 D 像素颜色分量组成：红色、绿色、蓝色和 alpha 样本，指示像素的不透明度。
压缩
BMP 格式的图标几乎总是使用无损压缩，但也有有损方法。PNG 图标总是无损压缩的。
许可
—
JPEG（联合图像专家组图像）
JPEG（通常发音为“jay-peg”）图像格式是目前最广泛使用的静态图像有损压缩格式。它特别适用于照片；对需要锐度的内容（如图表）应用有损压缩可能会产生不尽如人意的结果。
JPEG 实际上是压缩照片的数据格式，而不是文件类型。JFIF（JPEG File Interchange Format）规范描述了我们所说的“JPEG”图像文件的格式。
MIME 类型
image/jpeg
文件扩展名
.jpg, .jpeg, .jpe, .jif, .jfif
规范
jpeg.org/jpeg/
浏览器兼容性
所有版本的 Chrome、Edge、Firefox、Opera 和 Safari
最大尺寸
65,535×65,535 像素
支持的颜色模式
颜色模式
每分量位数（D）
描述
灰度
不适用
可以使用单个亮度通道 (Y) 支持真灰度。
真彩色
8
每个像素由红色、蓝色和绿色颜色分量描述，每个分量为 8 位。
索引颜色
不适用
JPEG 不提供索引颜色模式。
带 alpha 的灰度
不适用
JPEG 不支持 alpha 通道。
带 alpha 的真彩色
不适用
JPEG 不支持 alpha 通道。
压缩
有损；基于离散余弦变换
许可
截至 2006 年 10 月 27 日，所有美国专利均已过期。
PNG（便携式网络图形）
PNG（发音为“ping”）图像格式使用无损压缩，同时支持比 GIF 更高的色深，效率更高，并具有完整的 alpha 透明度支持。
PNG 得到广泛支持，所有主要浏览器都对其功能提供全面支持。
MIME 类型
image/png
文件扩展名
.png
规范
便携式网络图形 (PNG) 规范
浏览器兼容性
所有版本的 Chrome、Edge、Firefox、Opera 和 Safari
最大尺寸
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 位深度。
带 alpha 的灰度
8 和 16
每个像素由两个 D 位值表示：灰度像素的强度和 alpha 样本，指示像素的不透明度。
带 alpha 的真彩色
8 和 16
每个像素由四个 D 像素颜色分量组成：红色、绿色、蓝色和 alpha 样本，指示像素的不透明度。
压缩
无损，可选索引颜色，如 GIF
许可
©2003 W3C (MIT, ERCIM, 庆应义塾大学), 版权所有。W3C 免责声明, 商标, 文档使用 和 软件许可 规则适用。无已知版税专利。
SVG（可伸缩矢量图形）
SVG 是一种基于 XML 的矢量图形格式，它将图像内容指定为一组绘制命令，这些命令创建形状、线条、应用颜色、滤镜等。SVG 文件非常适合图表、图标和需要精确绘制的各种尺寸的其他图像。因此，SVG 在现代网页设计中常用于用户界面元素。
SVG 文件是包含源代码的文本文件，当解释时，这些源代码会绘制出所需的图像。例如，此示例定义了一个初始尺寸为 100x100 单位的绘图区域，其中包含一条对角线穿过框的线条
html
SVG 可以在网络内容中以三种方式使用
SVG 图像可以使用