图片基础知识与浏览器支持的图片格式

图片是我们开发中经常会用到的基础资源，互联网上，几乎任何站点都离不开图片，不管是图片上传，还是背景、内容展示或小图标等等，图片资源无处不在。
而且图片资源相比文字内容，通常都较大，会占用大量的带宽。因此，学习一些图片的基础知识，对我们也是至关重要的。

位图和矢量图

我们常见的图片，一般可以分为 位图 和 矢量图。

位图：也叫做点阵图、像素图，基于图像的矩形栅格内的每个像素值来进行编码。位图的最小单位是像素，每一个像素对应一个色彩值，通过像素的色彩值展示出图像。
位图的像素特点导致它缩放的时候图像会失真。常见格式如jpg、png。

矢量图：也叫向量图，通过使用点、线和多边形来描绘图像，一般应用于简单形状的图形，并且能保证在缩放的时候不失真。
矢量图常见格式如svg。

类别	常见格式	特点描述
位图	.jpg、.png	栅格像素、图像丰富、缩放失真
矢量图	.svg、.ai	形状图形、简单图像、不失真

分辨率、像素与颜色

位图放大后，会看到有小格子，最终结果是一个个像素点的格子，每个格子为 1*1 的像素点。
一张图有多少个像素点，与图片的分辨率有关，即常说的图片宽高尺寸，比如一张图的宽是1920、高是1080，则它拥有1920 * 1080 = 2073600 个像素点。这里的 1920 * 1080 就是图像的分辨率。
而像素作为基本单位，在图像中通常是使用不同的颜色模型来描述，最常见的颜色模型就是 RGB，加上透明通道就是 RGBA。颜色模型的知识可见前文 前端需要了解的颜色模型，RGB、HSL和HSV。

RGBA 使用红、蓝、绿三色通道，再加上透明通道，总共四个通道分量，每个分量一般使用1个字节来表示。
每个字节有8个比特位，即1 byte = 8bits，二进制取值在 00000000-11111111，就有 0-255 共256种取值。关于字节与二进制的知识可见前文 前端需要了解的字节与二进制处理对象。

RGB颜色模型三个通道分量，每个都有256种，即 RGB = R(8) * G(8) * B(8) = 256 * 256 * 256，共1600多万色，这里三通道各8位，对应的24位图，即位深度。
RGB三通道再加上 Alpha 透明通道，即多了1个字节8位，就对应了32位图。

表示RGBA的颜色值如下代码：

/*黑色*/
rgb(0, 0, 0)
rgba(0, 0, 0, 1)
/*红色*/
rgba(255, 0, 0, 1)

像素与颜色值的关系可用下图来表示，图左边是一个宽高为 10*10 的图像，总共就有100个像素点，每个像素点都对应一个颜色值，使用 rgba 来表示：

色彩深度

色彩深度又叫作位深度，是针对位图的，表示位图中存储1个像素的颜色所需要的二进制位的数量。
它是位图中的一个重要指标，一般色彩深度越高，可用的颜色就越多，图片的色彩也就会越丰富，对应的图像数据更多，图像的体积就更大。

下面的表格列出几种色彩深度的基本知识点：

位数	颜色数量	说明
1	2	单色，黑白两色
4	16	16种颜色
8	256	256种颜色，gif动图一般都是简单的8位图
16	65536	增强色，人眼能满足的视觉
24	16777216	真彩色，人眼视觉上的极限，jpg是24位
32	16777216	24位颜色+8位透明度，png是32位

单色图，又叫二值图，只有一位二进制，要么是0，要么是1，它的每个像素将只有两个颜色：黑(0)和白(255)。如下bmp格式的黑白图，即是单色黑白图，位深度为1：

bmp格式的图片一般不会压缩，约等于原始图片，可以是 1-32位 的多种位深度的图片。
所有的位图都能查看到图片的详细信息，包括有分辨率和位深度等，如下三张图片的详细信息：

上图所示，系统查看的jpg图片、png图片、gif图片的位深度：
jpg不支持透明通道位深度是24；
png支持透明通道则位深度是32；
gif图的位深度是8。

就像上面所述的一样，位深度是位图才有的，而矢量图，则没有类似的信息，下图所示，是一张svg矢量图片：

还有一种灰度图，RGB三个通道的数值相同，呈现256阶的灰度。

压缩方式

图片的压缩方式一般是三类：

• 无压缩
  几乎不对图片进行压缩处理，尽量以原图的方式呈现图片，如bmp格式的图片就属于这一类。

• 无损压缩
  很多图片都采用无损压缩的方式，如 png、gif等。
  无损压缩采用对图片数据进行编码压缩，以不降低图片质量的情况下减少图片的大小，
  无损压缩只是对像素数据压缩，不会减少像素，几乎没有损耗，所以可以恢复到原始图片。

• 有损压缩
  有损压缩最常见的就是 jpg 格式的图片，它一般是使用去除人眼无法识别的图片像素的方法，降低了图片的质量用以大幅度的减少图片的大小。
  这种情况下，有损压缩减少了图片的像素点，导致图片数据部分丢失了，属于不可逆的，所以无法恢复到原始图片。

webp格式的图片既有无损压缩的，也有有损压缩。

不同格式图片介绍

图片作为互联网上的一种媒体展示资源，在主流浏览器上已经支持的格式，目前一般有7种：jpg、png、gif、svg、bmp、ico、webp。

webp 已在多种主流浏览器上获得支持。
avif 目前Chrome和Firefox已支持，但Edge还不支持。

常见格式的图片：

格式	压缩	透明	动画	其他
jpg	有损	否	否	色彩丰富、文件小
png	无损	是	否	apng支持动画
gif	无损	是	是	256色、文件较小
bmp	无压缩	否	否	大，约等于原图(raw数据格式)
svg	无损	是	是	简单图形，矢量图
ico	无损	是	否	存储单个图案、多尺寸、多色板的图标文件
webp	无损、有损	是	是	目前相对最优
avif	无损	是	是	超压缩，新出，支持少

jpg

jpg格式是最常见的图像格式，我们使用手机、相机等设备拍的照片几乎都是这种格式的，互联网上也有大量jpg格式的图片。根据一些数据显示，jpg格式的图片目前大概能占到七八成的比例。
它的特点是有损压缩，使用这种不可逆的压缩方式，在不影响人眼可分辨的情形下，尽可能大的压缩图片文件大小。
优点：支持24位，色彩丰富，文件较小；
缺点：图片有损压缩导致质量下降，不支持透明度。
适用于色彩丰富的照片、渐变图像，以及通用场景都较合适。

png

png格式也是非常常见的图像格式，在网络传输和资源展示中都用处很大，它相比于jpg，能够支持透明度，并且图片更清晰、逼真，这也是它被广泛使用的原因之一。
优点：支持较高比例的无损压缩，拥有32位色彩深度，颜色丰富，支持透明度，并且文件也相对较小，支持存储附加信息如exif等图片信息。
缺点：相比jpg，压缩较少，文件大小会大一些。
适用于各种通用场景，对图片质量要求较高，或者需要透明度的情况。

gif

gif格式最常应用的场景就是互联网上的表情包和各种图片动画效果，它只支持有8位256种颜色，色彩很简单，加上压缩率也较高，文件大小都很小。
优点：帧动画，带透明效果，文件小；
缺点：色彩简单，图像质量较差。
适用于表情动图、简单的logo、icon等图片，不适合颜色复杂细丰富的图片。

svg

svg格式是浏览器支持的唯一一种矢量图格式，它是一种可伸缩的矢量图形，基于xml语言进行描述的。它缩放不失真的特点对我们在多屏展示图标很有帮助，目前网络上的一些字体图标、icon等很多是svg图片。
优点：矢量图，不失真，文件更小，支持透明度，动效，svg可编程，兼容性也不错；
缺点：过多的svg会导致渲染负担。
适用于需要高效保真的图像，各种图标、logo、icon、图形表等等。

webp

webp是一种相对较新的图像格式，它是谷歌推出的，最大的特点是：视觉效果好、色彩丰富的同时，同样图像的文件大小能比jpg、png减小30%左右。
优点：支持透明度，动画效果，文件更小，图像质量更好，既支持有损也支持无损压缩；
缺点：图像解码稍复杂，可忽略(ie浏览器不支持)。
比较好的一点是，webp目前已经获得大部分主流浏览器的支持，所以使用webp格式的图片也是一种较好选择，能有效减少文件大小，缩短下载时间。甚至，微信小程序都已经支持了。

bmp

bmp格式是一种保存图像原始数据的图片格式，属于window系统中的标准图像格式，它是无损压缩，几乎不会作任何有损图像数据的操作，因此它是图像原始数据的一种来源。它支持多种位数(1\4\8\16\24\32)的色彩深度。
优点：无损压缩，图像数据保存完整，画质也很高；
缺点：图像文件较大。
window系统使用一些，但互联网上一般使用很少。

ico

ico是一种图标文件格式，一个文件可以存储多个尺寸的图像数据，较常见于win系统下的系统图标。
它支持透明度，一般尺寸都较小，互联网开发种常用的网站站点图标就是使用这种格式：favicon.ico，显示在浏览器页面的标签tab上。

avif

avif是一种更新也更高效的图像格式，它基于高效视频编码方案而生成的最新的一种图像文件格式。
avif可以使用无损或有损压缩来处理图像，可压缩比例更高，一般文件大小能比同样的jpg图像减小1倍左右。
avif支持透明度和动画效果，图像质量和文件大小的表现都要优于其他格式的图像，但是它的浏览器支持度还不够，部分浏览器不支持，如Edge。