前端圖片格式選擇，什麼時候該用JPG、 PNG、WebP 或 SVG 呢?
2022年2月13日
在寫前端，不論是網頁或是行動裝置的原生 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 會是不錯的選擇。
