前端图片格式选择，什么时候该用JPG、 PNG、WebP 或 SVG 呢?

在写前端，不论是网页或是行动装置的原生 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 会是不错的选择。