前端该怎么选择图片的格式

想当初，这个问题在面试实习的时候被问到。问题看着简单，但是想要回答好还需要下一番功夫来了解的。

如果不想看文章的话直接翻到文末去看结论即可。

so，在开始之前我们先补充一下图片的一些基本知识。

图片的类型

首先，我们需要来了解图片的类型。

图片的类型目前就分为两种：

位图
矢量图
位图

所谓位图就是用像素点拼起来的图也叫点阵图，平时我们用到的 png 、 jpg 等图片就是位图。

如上图，将一张图片放大以后可以看到一个一个小点点，这一个一个小点点就是图片的一个像素。

矢量图

矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，它也不会像位图那样会失真。

常见的就是 svg 格式的。

图片的压缩类型

无压缩
有损压缩
无损压缩
无压缩

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。例如 BMP 格式的图片。

有损压缩

指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是 不可逆的 。

常见的有损压缩手段是按照一定的算法将 临近的像素点进行合并 。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的体积