参考文献：
web前端开发常用的几种图片格式及其使用规范
常见图片格式及其区别小结
矢量图和位图
矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。svg 是矢量图。
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。jpg、png、gif 都是位图。
有损压缩和无损压缩
有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
Jpg 是我们最常见的采用有损压缩对图像信息进行处理的图片格式。
无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
这里要说明的是，无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在 PNG8 中体现的尤为明显。PNG8 最多只能索引 256 种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。
PNG 是我们最常见的一种采用无损压缩的图片格式。
透明
索引透明：即布尔透明，类似于GIF，某一像素只有全透和全不透明两种效果，不能对透明度进行设置。
Alpha透明：半透明，可以设置透明度。
GIF
GIF 是一种正在逐渐被抛弃的图片格式。PNG 格式的出现就是为了替代它。PNG8 除了不支持动画外，有 GIF 所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。
当图片颜色简单到一定程度，大小小到一定程度的时候，GIF 格式图片大小要小于 png8。比如一个1*1像素的纯黑色点，在 PNG8 下是124 byte，在 GIF 下是 43byte。
优点 : 档案小、非常适合在网页使用，可以制作动画;
缺点 : 包容颜色太少，仅支持索引透明。
业务场景：简单动画。
JPG
jpeg 也是 jpg，支持有损压缩，可通过压缩比控制图像大小。
优点 : 兼容性高、传输速度快、内存小。
缺点 : 有损压缩，不支持背景透明。
业务场景：不透明图片
PNG
这里PNG放在最后说，PNG可以细分为三种格式:PNG8，PNG24，PNG32。
后面的数字代表这种 PNG 格式最多可以索引和存储的颜色值。”8″ 代表 2 的 8 次方也就是 256 色，而 24 则代表 2 的 24 次方大概有 1600多万色。
关于透明：
- PNG8 支持索引透明和 alpha 透明
- PNG24 不支持透明;
- 而 PNG32 在 24 位的 PNG 基础上增加了 8 位（256阶）的 alpha 通道透明，也就是说可以存储从完全透明到完全不透明一共 256 个层级的透明度（即所谓的半透明）。
优点：能够无损压缩，兼容半透明 / 透明图像;
缺点 : 大小比 JPEG 大。
业务场景：透明图片。
BMP
BMP 格式能把颜色数据保存在每一个单独的像素中，BMP 格式的图片文件内存较大，不会作任何压缩，保存了每个像素的信息.
优点 : 保留所有数据，不进行压缩。
缺点 : 占用空间很大。
业务场景：不使用
WEBP
是一种支持有损压缩和无损压缩的图片文件格式，支持透明，大小比 PNG 小。
缺点：浏览器兼容性不好。
业务场景：可代替 PNG。
base 64
是网络上最常见的用于传输 8bit 字节码的编码方式之一。可用于在 http 环境下传递较长信息，使用 base64 编码格式存储图片在网页上传输图片的优缺点如下：
优点：减少 http 请求，某些文件可避免跨域问题。
缺点：增加 css 的尺寸，增加编码成本。
SVG
SVG 为可缩放矢量图形，使用 XML 格式定义图像。
常用于图标。
优点：大小小，矢量，任意缩放。
缺点：只适用于图片样式简单的场景，图片样式复杂占用空间大。
业务场景：简单图标。