點擊右上方紅色按鈕關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

前端在處理業務的時候，對於圖片資源格式的選擇是有講究的，作為一位合格的前端開發人員，必需知道不同格式圖片它們的一些特點及常用的業務場景，這樣才能做到更優方案的選擇。今天小鄭給大家捋一捋這方面知識。

常用的圖片格式有：JPG、PNG、WEBP、SVG。

一、各種圖片格式的特點

1、jpg

這種格式的圖片屬於有損壓縮。它的優點是壓縮率比較高，缺點就是不支持透明。

2、png

這種格式的圖片是我們比較熟悉的，用的也是最多一種格式，它支持透明，而且瀏覽器兼容性很好，最重要的一點，它還有png8，png24，png32三種格式。這樣的話，在壓縮的過程中就有一個降階的過程，也就是說，如果png8支持的比較好的話，它的文件大小就會小一些。

3、webp

webp是2010年google提出來的一種文件格式，它最明顯的特點就是壓縮程度更好，但在前端應用中， 在IOS webview的兼容性不是很好，只是Android有很好的兼容。

4、svg

svg矢量圖，本質上就是用svg標籤在HTML中進行相關圖形的一個繪製，矢量圖不會因為圖片的放大和縮小出現一些不清晰的問題。所以它的質量是比較高的，代碼是內嵌在HTML中的svg代碼，相對來說體積是比較小一些。

現在有一個大家比較熟悉的庫提供了一些svg資源的引用：iconfont。當然，由於svg的繪製能力還是有限的，所以這種格式一般適用於圖片樣式相對簡單的業務場景。

二、各種圖片格式適用的業務場景

1、jpg

適用於大部分不需要透明圖片的業務場景。

因為jpg的相對於png來說，它的壓縮率是更高的， 所以文件更小。這一點非常重要。在平時項目中一定要考慮。

2、png

適用於大部分需要透明圖片的業務場景。

這種圖片格式實際是我們用的最多的一種，因為我們大部分都需要這種透明的圖片。

3、webp

適用於安卓機型。

這種格式的主要問題就是ios safari和webview的支持不是很好。據說它的解碼速度和壓縮率都是高於png的。建議在安卓機型上考慮應用這種格式。

4、svg

適用於圖片樣式相對簡單的業務場景：比如一些logo什麼的。

其次就是頁面中的一些小的icon。可以直接引用iconfont庫。icon本身也是基於svg。

最後總結一下：

其實上面我沒有提到gif。gif是一種動畫的格式，它和我們上面提到的這四種格式不一樣，也有區別。作用自然幾乎無法替代。有它獨特的應用場景。同時也可以關注一下。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！