博客

图片是我们开发中经常会用到的基础资源，互联网上，几乎任何站点都离不开图片，不管是图片上传，还是背景、内容展示或小图标等等，图片资源无处不在。

而且图片资源相比文字内容，通常都较大，会占用大量的带宽。因此，学习一些图片的基础知识，对我们也是至关重要的。

位图和矢量图

我们常见的图片，一般可以分为

位图

和

矢量图

。

位图：也叫做点阵图、像素图，基于图像的矩形栅格内的每个像素值来进行编码。位图的最小单位是像素，每一个像素对应一个色彩值，通过像素的色彩值展示出图像。

位图的像素特点导致它缩放的时候图像会失真。常见格式如jpg、png。

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

矢量图常见格式如svg。

分辨率、像素与颜色

位图放大后，会看到有小格子，最终结果是一个个像素点的格子，每个格子为

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个像素的颜色所需要的二进制位的数量。

它是位图中的一个重要指标，一般

色彩深度越高，可用的颜色就越多，图片的色彩也就会越丰富，对应的图像数据更多，图像的体积就更大。

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

单色图，又叫二值图，只有一位二进制，要么是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

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。