图像文件类型与格式指南

在本指南中,我们将介绍 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 bugFirefox 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> 元素(或其他方法)提供 WebPJPEGPNG 格式的回退。

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 文件支持多种压缩算法,图像数据也可以使用 JPEGPNG 格式存储。

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 和 XBMHTML 最早支持的两种图形格式之一。

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(JPEG File Interchange Fformat)规范描述了我们认为的“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 W3CMITERCIMKeio),保留所有权利。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 W3CMITERCIMKeioBeihang),保留所有权利。W3C 责任商标文档使用软件授权适用。没有已知的专利使用费。

TIFF(标签图像文件格式)

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

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

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

标签 类型 大小
0x0100ImageWidth 0x0003SHORT 0x00000001(1 个条目) 0x0280(640 像素)

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

标签 类型 大小
0x0100ImageWidth 0x0004LONG 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 目前已在主要网络浏览器的最新版本中获得广泛支持,但还没有深入的历史支持。需要提供 JPEGPNG 格式的回退,例如 <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 23
25
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/xbmimage-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
压缩 无损
许可 开源

选择合适的图像格式

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

照片

有损压缩(取决于编码器的配置)通常能很好地压缩照片。这使得 JPEGWebP 成为照片的不错选择,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 个就足够了。

参见