從新認識前端開發使用的『圖片』

圖片在前端開發中很是經常使用，可是圖片的文件格式倒是有不少種，日常咱們使用的時候可能不會太在乎這方面。實際上不一樣的圖片格式有不一樣的應用的場景，從體驗和性能優化的角度考慮也是值得咱們學習。下面將簡單介紹圖片的常見類型。

圖片類型介紹

1.PNG

PNG格式有8位、24位、32位三種形式，其中8位PNG支持兩種不一樣的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基礎上增長了8位透明通道，所以可展示256級透明程度。

PNG圖片支持無損壓縮。

2.JPG（JPEG）

JPG和JPEG實際上是一個格式，並且可細分爲Baseling-JPG和Progress-JPG兩種。兩種不一樣類型的圖片各有適用場景，一般來講使用Progress—JPG給用戶的體驗更好。

JPG支持有損壓縮。

1. Baseling-JPG

   

2. Progressive-JPG

   

3.GIF

GIF常常用於動畫的圖片上，支持無損壓縮，支持背景透明。

4.SVG

SVG（可縮放矢量圖形）這種圖片的類型咱們可能用得比較少，實際上這種格式的圖片優點很是多。

1. 基於可擴展標記語言
2. 採用文原本描述對象
3. 具備交互性和動態性
4. 徹底支持DOM

SVG支持無損壓縮和背景透明，並且還支持動畫。

可是，SVG相比JPG和PNG來講優點這麼大爲什麼並無很普遍的被應用呢？這和SVG的一部分優點相關，由於SVG太過靈活，實際開發中維護SVG圖片成本很是高。

5.WebP

WebP是谷歌開發出來的一種圖片格式，因此並非一個一般的標準格式（僅Chrome和Opera支持）。可是WebP由於其自家谷歌瀏覽器的份額高佔有率，同時WebP相比其餘經常使用的圖片格式具備更大的優點，實際開發應用仍是比較常見。

WebP同時支持無損和有損壓縮，支持背景透明。

6.APNG

APNG實際上是在PNG的基礎上擴展了支持動畫的圖片文件格式，這也不是一個通用的標準格式（僅Safari和Firefox支持）。

APNG支持無損壓縮，背景透明，且額外支持動畫。

7.BPG

BPG是一種實驗性的圖片文件格式，在瀏覽器使用須要提供js解碼，該圖片格式並未成爲通用標準。可是由於其相比其餘圖片格式，具備更高壓縮比，且支持背景透明和動畫，同時支持無損壓縮和有損壓縮，實際上有但願成爲新的主流圖片格式。

有損壓縮和無損壓縮

前面介紹圖片的時候提到的無損壓縮和有損壓縮是什麼呢？實際上這個概念適用不少地方（視頻，音頻等），簡單說說這兩個的概念。

1.有損壓縮

有損壓縮是利用了人類對圖像或聲波中的某些頻率成分不敏感的特性，容許壓縮過程當中損失必定的信息；雖然不能徹底恢復原始數據，可是所損失的部分對理解原始圖像的影響縮小，卻換來了大得多的壓縮比。

2.無損壓縮

無損壓縮格式，是利用數據的統計冗餘進行壓縮，可徹底恢復原始數據而不引發任何失真。

圖片裏有損壓縮犧牲了部分圖片細節，以此換來更大的壓縮比。

小結

圖片格式	支持透明	支持動畫	壓縮方式	瀏覽器支持	適用場景
PNG	支持	不支持	無損壓縮	全部	須要透明時
JPG	不支持	不支持	有損壓縮	全部	通用場景
GIF	支持	支持	無損壓縮	全部	簡單顏色、動畫
SVG	支持	支持	無損壓縮	全部	須要良好縮放體驗，動態控制圖片特效
WebP	支持	不支持	有損壓縮和無損壓縮	Chrome、Opera	複雜顏色、平臺可知
APNG	支持	支持	無損壓縮	Firefox、Safari	半透明動畫
BPG	支持	支持	有損壓縮和無損壓縮	無，須要JS解碼	極致性能優化

在開發中雖然常常用到了圖片，可是對不一樣的圖片格式並無太多認知，但願經過從新學習圖片的知識，加強本身的業務能力。