Png
PNG包含png-8和png-24 png-32

相对来讲体积小；支撑通明

24（160W）比8（256） 像素 色块 色彩 要多许多

8位保留的时刻会有锯齿边沿

24位是通明边沿

24位PNG，支撑160万种差别的像素色彩且支撑Alpha通明结果，这就意味着，不管通明度设置为若干，PNG图片均能够与背景很好的融会在一起。

Jpg
JPG能显现的色彩比gif和png要多的多；同时能获得很好的紧缩；然则是一种失真紧缩（紧缩比；分辨率；可感知失真）;jpg合适运用在那些许可细微失真的像素色彩雄厚的场景；不合适做简朴色彩的图片（icon，小logo）

Gif
支撑动画；也是一种无损的图片花样（修正图片后；图片质量没有丧失）；仅支撑8位色彩深度；受这个限定；gif不合适运用于种种色彩过于雄厚的场景

Webp
Google开辟的一种旨在加速图片加载速率的图片花样，图片紧缩体积大约是jpg的2/3；能大批节约服务器带宽资本和数据空间；也是一种有损紧缩；目标就是加速收集图片的传输效力；让图片更快的显现在用户眼前；现在所晓得的只要高版本的W3C浏览器才支撑 （chorme39+，safari7+）

Svg
SVG正变得愈来愈热点，它差别于以上一切的文件范例，由于它是一个矢量文件花样。这就是说它实际上是由线条和曲线，而不是像素组成的。当你放大一个矢量图象时，你依然看到一条曲线或一条线。当你放大一个由像素组成的图象时，你会看到像素。

长处：

关于小logo和图片来讲；svg是很抱负的；由于不管是Retina屏照样其他低分辨率的屏幕上显现都是一样的；svg的logo能够放大不失真；如果是像素组成的图片花样想要不失真就要多套的图片，svg是用XML编写的；能够用js来转变svg图片的色彩

瑕玷：

Svg在衬着的时刻需要比像素图更多的盘算才能；越发的斲丧机能；所以你的svg图比较复杂；可能会很消耗机能；以至文件大小也很大

总结：小图片（icon）或则网页基础元素（按钮）能够运用png-24或则gif；图片斟酌jpg

体积 webp<JGP<PNG