图片格式及使用场景【前端每日一题-13】

描述一下你所了解的图片格式及使用场景？

BMP

BMP(BitMap)是一种无损，支持直接色与索引色的点阵图。BMP是一种比较古老的图片格式，是window操作系统的标准图像文件格式。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。

BMP适用场景：Windows操作系统。

GIF

GIF(Graphics Interchange Format)是一种无损，支持索引色的点阵图，GIF支持动画和单一色透明。GIF是通过LZW压缩算法进行压缩的，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。以GIF格式保存图片不会降低图片质量，相同图片质量下，GIF会比BMP小。但是，GIF只支持8bit的索引色，一张图片上最多只能存在256种色彩。

GIF适用场景：需要图片大小较小，同时对色彩的要求不高的场景，比如：企业Logo、线框类的图，动态图。

JPEG

JPEG(Joint Photographic Experts Group)格式是一种有损的，支持直接色的点阵图，不支持透明和动画。JPEG的目标是在获取极高的压缩率的同时能展现十分丰富生动的图像，采用压缩的算法，对图片上每8px*8px的像素进行处理，通过强制渐变的方式来减小文件尺寸。JPEG使用24bit展现一个像素点的颜色，能表示1600万种颜色，使得它非常适合用来存储照片。

JPEG适用场景：拍照。

PNG-8

PNG-8是PNG(Portable Network Graphics)格式的索引色版本，是无损的，使用8bit索引色的点阵图，支持透明。PNG-8是在GIF非常不错的替代品，采用与GIF相同的压缩算法，横向图片比竖向图片要小。PNG-8使用8bit展现一个像素点的颜色，能表示256种颜色，同时支持alpha透明（FireWork软件支持），能对透明度进行调节，比GIF对透明度的支持更好。

PNG-24

PNG-24是PNG格式的直接色版本，是无损的，使用24bit直接色的点阵图，不支持透明。PNG-24是听起来和BMP很像，的确，显示效果上没有什么不同，但优于对图片进行了压缩，所以相同条件下会比BMP格式图片小得多，当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。PNG-24不支持alpha透明，于是PNG-32出现，PNG-32实际只是PNG-24的基础上添加了8位的透明度支持，PhotoShop能导出支持透明的PNG-24，其实是添加了8位透明度的PNG-32。

PNG-24适用场景：不在意图片文件大小，而想获取最好的显示效果。

SVG

SVG(Scalable Vector Graphics)全称可缩放矢量图形，是一种无损的矢量图。SVG使用XML对一个图形进行描绘，而使用XML意味着可以把SVG当成一个文件来对待，随时打开编辑器就可以对图形进行编辑修改。同时SVG使用的是矢量图，优点在于对于图片的缩放时，都不会出现有像素点，保证不会失真。

SVG适用场景：企业LOGO，需要进行缩放频率较高的图形绘制（图表，地图等）。

WEBP

WEBP是google推出的意图改变GIF、JPEG、PNG三分天下的新型的图片格式，是一种使用直接色，支持无损或有损压缩、alpha通道，还支持动画演示的点阵图。与以上提到的几种图片格式相比，WEBP具体更小的图片体积。据不完全统计，互联网流量的产生60%来自于图片，如果能降低每一张使用的图片的大小，那可以减小客服端与服务器的数据传递，降低延迟，提高用户体验。
在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损的情况下，在等效SSIM质量指数下，文件大小可比JPEG图像小26 – 34%；
无损WebP支持透明(也称为alpha通道)的成本只有22%额外的字节。

参考：

www.jianshu.com/p/e2b00a813…

转载于:https://juejin.im/post/5d3ffc466fb9a06aed70fc7b