在写前端，不论是网页或是移动端的原生 APP，都很常会遇到展示图片的情况。然而现代网页可以选择的图片格式非常多种，在主流格式中，什么时候该用 JPG、PNG、SVG 或 WebP 呢？这是前端面试很常出现的题目。让我们通过本文，一起快速来了解这几种格式的差异，以及什么情况该用哪一种格式。
要在上面的图片片中做出选择，我们可以先把上面几种图片分类成点阵图与向量图两个类型。
- JPG、PNG、WebP 是属于点阵图 (raster image)，是一小点一小点的画素组合而成的图。
- SVG 则是向量图 (vector image)，是由数学公式去绘制出的图。
点阵图 (raster image)
JPG 与 PNG 是点阵图，换句话说是由一小点一小点的画素组合而成，两者的差异在于
- JPG 是有损压缩，换句话说压缩时会降低图片的质量，且是不可逆的。
- PNG 是无损压缩，在压缩后不影响图片的质量，不过文件会比 JPG 大。同时 PNG 是可以有透明背景，换句话说，如果要去背，不能用 JPG，而必须用 PNG。
- WebP 则是 Google 在 2010 年推出的格式，也属于点阵图，它可以是有损压缩，也可以是无损压缩。而其特点是有损压缩的文件比 JPG 更小，无损压缩的文件比 PNG 更小。
PNG、JPG 与 WebP 该选哪一个？
同样是点阵图，PNG 与 JPG 之间的选择，端看使用的场景。如果使用场景是不太在乎画质的，那 JPG 会好一点，因为文件比较小；但假如要不影响原本画质，或是需要把图片去背，则 PNG 会比 JPG 适合。当然，现代的网页浏览器，几乎都支持了 WebP，过去存在的支持度问题现在也不在了；所以不论是哪种场景，选择 WebP 都能让文件更小，换句话说能传输的更快，因此比起 PNG 与 JPG，多数情况都更推荐用 WebP。
延伸题：GIF 的替代方案
上面谈到了点阵图，不过如果是要点阵的动画，过去直观都会想到可以用 GIF 的格式。不过除了 GIF 之外，也可以选择 WebM。比起 GIF，WebM 的文件格式更小，所以在传输上速度会比较快。现在各个浏览器或原生 App 的前端也都有支持，因此是个不错的选择。
向量图 (vector image)
向量图不是由一小点的画素组成，而是由数学公式与算法去算出图片中的形状、颜色以及位置等等。被计算出来的好处是，向量图在被放大时，不会失真，不会像点阵图那样被成一点一点的模糊区块。而 SVG 就是最常见的向量图之一。
点阵图 vs 向量图
上面分析完点阵图与向量图，下一个要讨论的点是“点阵图与向量图，又分别适合什么场景呢？什么时候该选哪一个？”
如果图片是有种种不同的色彩与形状，例如一张照片，那么会适合点阵图，因为假如用向量图要显示这类的图片，文件会变比较大。不过如果是固定的图形且图片中的颜色变化不多的，则可以选择向量图，因为在这种情况下向量图的文件通常比较小；或是希望图片被放的很大也不会有模糊的，也会推荐选向量图。举例来说，像是 logo 或是 icon 类型的图片，普遍来说 SVG 会是不错的选择。
