png、jpg、gif三种图片格式的区别

	概念	优点	缺点	联系
矢量图	通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。	文件相对较小并且放大缩小不会失真。	缺点则是这些完美的几何图形很难表现自然度高的写实图像。	需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图	又叫 像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。	利于显示色彩层次丰富的写实图像。	文件大小较大，放大和缩小图像会失真。

注：web页面中所使用的JPG、PNG、GIF格式的图像都是位图

PNG的诞生就是为了取代GIF

格式	压缩模式	交错支持	透明支持	动画支持	应用场景
JPG	有损压缩	支持	不支持	不支持	写实的摄影图像或是颜色层次非常丰富的图像 页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图
PNG	无损压缩	支持	支持	不支持