在许多web页面中可以发现图片占到了页面大小的60%-70%，图片的格式种类非常多，本文对网页中常见的png、jpg、gif、webp、svg、BMP格式及其使用场景进行介绍。

1. png

png格式是无损压缩的点阵图，它是靠损失图片的色彩数量来减小图片的体积，且它的压缩比高，生成文件体积小，支持透明度，不支持动画。png格式经常用于呈现如logo，颜色简单且对比强烈，需要清晰显示文字的图片。

2. jpg

Jpg和jpeg是同一种，是有损压缩的点阵图，它靠损失图片本身的质量来减小图片的体积，造成反复保存图片质量下降文图。不支持透明度。但它色彩丰富，文件小，适用于照片，色彩丰富的图片。

3. git

git格式是无损压缩的点阵图，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，没有兼容性问题。GIF格式适用于对色彩要求简单同时需要文件体积较小的场景以及动态图片。

4. webp

Webp格式是谷歌开发的一种新图片格式，它同时支持有损和无损压缩的点阵图。支持动画，支持透明，但它存在浏览器兼容问题，只有基于webkit内核的浏览器才支持（仅Chrome内核，Edge,oprea,Android支持）。在不考虑兼容问题下，它是最优方式不论是在细节丰富，透明，还是动态图，都行。

5. svg

svg是无损的矢量图,它由直线和曲线以及绘制方法组成的XML格式定义的图，在放大或者改变尺寸的情况下，图片质量不会发生损失。在<svg>标签中绘制，它适用于图标，以及可以实现通过css对图添加效果，不丢失细节，线条光滑不存在锯齿要求的图。

6. BMP

BMP是无损的点阵图。支持索引色和直接色。它几乎没有对数据进行压缩，所以它通常是较大的文件。但现在已经很少使用了。