位图和矢量图
位图：也叫做点阵图、像素图，基于图像的矩形栅格内的每个像素值来进行编码。位图的最小单位是像素，每一个像素对应一个色彩值，通过像素的色彩值展示出图像。
位图的像素特点导致它缩放的时候图像会失真。常见格式如 jpg、png。
矢量图：也叫向量图，通过使用点、线和多边形来描绘图像，一般应用于简单形状的图形，并且能保证在缩放的时候不失真。
分辨率、像素与颜色
位图放大后，会看到有小格子，最终结果是一个个像素点的格子，每个格子为 1*1 的像素点。
一张图有多少个像素点，与图片的分辨率有关，即常说的图片宽高尺寸，比如一张图的宽是 1920、高是 1080，则它拥有 1920 * 1080 = 2073600 个像素点。这里的 1920 * 1080 就是图像的分辨率。
而像素作为基本单位，在图像中通常是使用不同的颜色模型来描述，最常见的颜色模型就是 RGB，加上透明通道就是 RGBA。颜色模型的知识可见 颜色模型相关知识解读。
RGBA 使用红、蓝、绿三色通道，再加上透明通道，总共四个通道分量，每个分量多使用 1 个字节来表示。
每个字节有 8 个比特位，即 1 byte = 8bits，二进制取值在 00000000-11111111，就有 0-255 共 256 种。关于字节与二进制的知识可见 深入理解前端字节二进制知识以及相关 API。
RGB 颜色模型三个通道分量，每个都有 256 种，即 RGB = R(8) * G(8) * B(8) = 256 * 256 * 256，共 1600 多万色，这里三通道各 8 位，对应的 24 位图，即位深度。
RGB 三通道再加上 Alpha 透明通道，即多了 1 个字节 8 位，就对应了 32 位图。
色彩深度
色彩深度又叫作位深度，是针对位图的，表示位图中存储 1 个像素的颜色所需要的二进制位的数量。
它是位图中的一个重要指标，一般色彩深度越高，可用的颜色就越多，图片的色彩也就会越丰富，对应的图像数据更多，图像的体积就更大。
bmp 格式的图片一般不会压缩，约等于原始图片，可以是 1-32 位 的多种位深度的图片。
压缩方式
图片的压缩方式一般是三类：
● 无压缩
几乎不对图片进行压缩处理，尽量以原图的方式呈现图片，如 bmp 格式的图片就属于这一类。
● 无损压缩
很多图片都采用无损压缩的方式，如 png、gif 等。
无损压缩采用对图片数据进行编码压缩，以不降低图片质量的情况下减少图片的大小。
无损压缩只是对像素数据压缩，不会减少像素，几乎没有损耗，所以可以恢复到原始图片。
● 有损压缩
有损压缩最常见的就是 jpg 格式的图片，它一般是使用去除人眼无法识别的图片像素的方法，降低了图片的质量用以大幅度的减少图片的大小。
这种情况下，有损压缩减少了图片的像素点，导致图片数据部分丢失了，属于不可逆的，所以无法恢复到原始图片。
webp 格式的图片既有无损压缩的，也有有损压缩。

不同格式图片介绍
jpg
jpg 格式是最常见的图像格式，我们使用手机、相机等设备拍的照片几乎都是这种格式的，互联网上也有大量 jpg 格式的图片。根据一些数据显示，jpg 格式的图片目前大概能占到七八成的比例。
它的特点是有损压缩，使用这种不可逆的压缩方式，在不影响人眼可分辨的情形下，尽可能大的压缩图片文件大小。
优点：支持 24 位，色彩丰富，文件较小；
缺点：图片有损压缩导致质量下降，不支持透明度。
适用于色彩丰富的照片、渐变图像，以及通用场景都较合适。
png
png 格式也是非常常见的图像格式，在网络传输和资源展示中都用处很大，它相比于 jpg，能够支持透明度，并且图片更清晰、逼真，这也是它被广泛使用的原因之一。
优点：支持较高比例的无损压缩，拥有 32 位色彩深度，颜色丰富，支持透明度，并且文件也相对较小，支持存储附加信息如 exif 等图片信息。
缺点：相比 jpg，压缩较少，文件大小会大一些。
适用于各种通用场景，对图片质量要求较高，或者需要透明度的情况。
8 位 PNG 图像：
一个 8 位 PNG 图片，支持透明背景且像素颜色不能超过 256 种。除了压缩算法不同之外，此 8 位 PNG 格式与 GIF 格式极其相似；
用途：
8 位 PNG 图片的用途与 GIF 格式基本相同，
● Logo
● 小图标（Icon）
● 用于布局的图片（例如某个布局角落，边框等等）
● 仅包含不超过 256 种色彩的简单，小型图片场合
24 位 PNG 图像：
24 位 PNG，支持 160 万种不同的像素颜色且支持 Alpha 透明效果，这就意味着，无论透明度设置为多少，PNG 图片均能够与背景很好的融合在一起。

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。