面試官：前端該如何選擇圖片的格式

原文地址，轉載請註明出處。

想當初，這個問題在面試實習的時候被問到。問題看着簡單，可是想要回答好還須要下一番功夫來了解的。

若是不想看文章的話直接翻到文末去看結論便可。

so，在開始以前咱們先補充一下圖片的一些基本知識。

圖片的類型

首先，咱們須要來了解圖片的類型。

圖片的類型目前就分爲兩種：

1. 位圖
2. 矢量圖

位圖

所謂位圖就是用像素點拼起來的圖也叫點陣圖，平時咱們用到的png、jpg等圖片就是位圖。

如上圖，將一張圖片放大之後能夠看到一個一個小點點，這一個一個小點點就是圖片的一個像素。

矢量圖

矢量圖，也叫作向量圖。矢量圖並不紀錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的算法，當你打開一幅矢量圖的時候，軟件對圖形對應的函數進行運算，將運算結果圖形的形狀和顏色顯示給你看。

不管顯示畫面是大仍是小，畫面上的對象對應的算法是不變的，因此，即便對畫面進行倍數至關大的縮放，它也不會像位圖那樣會失真。

常見的就是svg格式的。

圖片的壓縮類型

1. 無壓縮
2. 有損壓縮
3. 無損壓縮

無壓縮

無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。例如BMP格式的圖片。

有損壓縮

指在壓縮文件大小的過程當中，損失了一部分圖片的信息，也即下降了圖片的質量（即圖片被壓糊了），而且這種損失是不可逆的。

常見的有損壓縮手段是按照必定的算法將臨近的像素點進行合併。壓縮算法不會對圖片全部的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼沒法識別的圖片細節。所以有損壓縮能夠在同等圖片質量的狀況下大幅下降圖片的體積。例如jpg格式的圖片使用的就是有損壓縮。

無損壓縮

在壓縮圖片的過程當中，圖片的質量沒有任何損耗。咱們任什麼時候候均可以從無損壓縮過的圖片中恢復出原來的信息。

壓縮算法對圖片的全部的數據進行編碼壓縮，能在保證圖片的質量的同時下降圖片的體積。例如png、gif使用的就是無損壓縮。

圖片位數

圖片位數一般分爲八、1六、2四、32

至於什麼是圖片位數咱們這裏就不展開說了，由於展開說又要佔很多篇幅，有興趣的童鞋能夠看：

1. 圖片位數(bites)的區別
2. 圖片顏色模式8位，16位和32位的區別是什麼
3. 位深度

懶得看的童鞋能夠直接看結論：

1. 圖片位數越大，能表示的顏色越多，同時佔用的體積也約大。例如8位圖片支持256種顏色，即2的8次方。
2. 圖片位數越大，顏色過渡也就越細膩，攜帶的色彩信息能夠更加豐富。
3. 32位跟24位的區別就是多了一個Alpha通道，用來支持半透明，其餘的跟24位基本同樣。

常見的圖片的格式

GIF

GIF的全稱是Graphics Interchange Format，可譯爲圖形交換格式，是在1987年由Compu Serve公司爲了填補跨平臺圖像格式的空白而發展起來的。

GIF採用的是Lempel-Zev-Welch（LZW）壓縮算法，最高支持256種顏色。因爲這種特性，GIF比較適用於色彩較少的圖片，好比卡通造型、公司標誌等等。若是碰到須要用24位真彩色的場合，那麼GIF的表現力就有限了。

GIF格式圖片最大的特性是幀動畫，相比古老的bmp格式，尺寸較小，並且支持透明(不支持半透明，由於不支持 Alpha 透明通道 )和動畫。

優勢

1. 體積小
2. 支持動畫

缺點

因爲採用了8位壓縮，最多隻能處理256種顏色

JPEG/JPG

JPEG是Joint Photographic Experts Group(聯合圖像專家組)的縮寫，文件後輟名爲"．jpg"或"．jpeg"，是經常使用的圖像文件格式，由一個軟件開發聯合會組織制定，是一種有損壓縮格式，可以將圖像壓縮在很小的儲存空間，圖像中重複或不重要的資料會被丟失，所以容易形成圖像數據的損傷。尤爲是使用太高的壓縮比例，將使最終解壓縮後恢復的圖像質量明顯下降，若是追求高品質圖像，不宜採用太高壓縮比例。

優勢

1. 採用有損壓縮，壓縮後體積更小
2. 支持24位真彩色
3. 支持漸進式加載

缺點

1. 有損壓縮會損壞圖片的質量
2. 不支持透明/半透明

漸進式jpeg(progressive jpeg)圖片及其相關

漸進式jpeg是什麼鬼？

先上兩張圖壓壓驚：

普通jpg：

漸進式jpg：

從上面兩張圖能夠看到，普通的jpg是從上往下加載圖片的，在網絡慢的時候尤其明顯。

漸進式jpg文件包含屢次掃描，這些掃描順尋的存儲在jpg文件中。打開文件過程當中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增長，圖片變得愈來愈清晰。

至於怎麼生成漸進式圖片能夠看這裏，本文就不展開說了。

PNG

png即使攜式網絡圖形是一種無損壓縮的位圖片形格式，其設計目的是試圖替代GIF和TIFF文件格式，同時增長一些GIF文件格式所不具有的特性。PNG使用從LZ77派生的無損數據壓縮算法，通常應用於JAVA程序、網頁或S60程序中，緣由是它壓縮比高，生成文件體積小。

png支持8位、24位、32位3種，咱們一般叫它們png八、png2四、png32。

png8

8位的png最多支持256(2的8次方)種顏色，png8有1位的布爾透明通道（要麼徹底透明，要麼徹底不透明）。

PNG-8格式與GIF圖像相似，一樣採用8位調色板將RGB彩色圖像轉換爲索引彩色圖像。圖像中保存的再也不是各個像素的彩色信息，而是從圖像中挑選出來的具備表明性的顏色編號，每一編號對應一種顏色，圖像的數據量也所以減小，這對彩色圖像的傳播很是有利。

更多關於索引色模式看這裏

PNG24

支持2的24次方種顏色，即rgb分別用8位，不支持透明。

注意： png24是不透明的，是不透明的，是不透明的。

這有人就會說了，我用PS導出的png明明是png24的，並且也選了透明瞭，出來的圖就是透明的啊？爲何png24就不透明的了咧？

這個時候能夠看圖片詳情，看看你導出的圖片深位度是否是24的？

若是是透明的話就是32，不然就是24，只是在你導出的時候PS偷偷幫你轉了一下。

PNG32

它是在png在24位的png基礎上增長了8位的透明信息，支持不一樣程度的半透效果，例如咱們css設置rgba(0,0,0,0.5)。

優勢

1. 無損壓縮
2. 支持透明、半透明
3. 最高支持24位真彩色圖像以及8位灰度圖像，從而完全地消除鋸齒邊緣。

缺點

1. 與jpg的有損耗壓縮相比，png提供的壓縮量較少
2. 不支持動畫，如需支持動畫還得使用apng

APNG

APNG（Animated Portable Network Graphics）是一個基於PNG（Portable Network Graphics）的位圖動畫格式。實際上就是多張png組成的動圖。MAC電腦打開能夠看到組成apng的每一張圖。

優勢

1. 支持png的全部優勢
2. 支持動畫

缺點

1. 瀏覽器支持狀況較差

WEBP

WebP是由Google最初在2010年發佈，目標是減小文件大小。它能同時支持無損壓縮和有損壓縮。

它幾乎集成了以上全部圖片的優勢，而且可以擁有更高的壓縮率，咱們能夠看如下兩張圖的體積，一張是壓縮後的jpg、一張是webp

jpg

webp

能夠看到，webp的體積要比jpg的還要小差很少50%！

悲劇的是，webp支持率有點感人

SVG

SVG是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形。SVG提供了3種類型的圖形對象：矢量圖形（例如：由直線和曲線組成的路徑）、圖象、文本。圖形對象還可進行分組、添加樣式、變換、組合等操做，特徵集包括嵌套變換、剪切路徑、alpha蒙板、濾鏡效果、模板對象和其它擴展。 SVG圖形是可交互的和動態的，能夠在SVG文件中嵌入動畫元素或經過腳原本定義動畫。

SVG與上面圖片不一樣的是它是矢量圖，不管你怎麼放大，它都不會失真；同時，SVG文件一般要比比JPEG和PNG格式的文件要小不少。

優勢

1. SVG 可被很是多的工具讀取和修改（好比記事本）
2. SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
3. SVG 是可伸縮的
4. SVG 圖像可在任何的分辨率下被高質量地打印
5. SVG 可在圖像質量不降低的狀況下被放大
6. SVG 能夠與 JavaScript 技術一塊兒運行
7. SVG 文件是純粹的 XML

缺點

1. 渲染成本相對於其餘格式圖片比較高，對於性能有影響。
2. 須要學習成本，由於SVG是一種用XML定義的語言。

SVGA

SVGA其實就是一個動畫播放引擎，在這裏說到它其實有點脫離了主題，因此就簡單提下。

svga的用法可見官方文檔

若是你是vue的用戶，可使用我封裝的vue-svga組件，是基於svga.lite封裝的，svga.lite是SVGAPlayer的閹割版。

當設計須要輸出複雜動畫的時候能夠考慮輸出svga格式的文件。相比bodymovin輸出的json文件要小不少。

優勢

1. 能夠控制動畫的播放與暫停，還能夠監聽動畫的播放狀態
2. 體積相對於apng更小
3. 能夠隨意地放大縮小而不失真
4. 瀏覽器兼容性良好

缺點

1. 須要js解析，同一頁面不宜使用過多svga動畫，不然會消耗過多的性能。

如何選擇圖片的格式

經過分析以上常見圖片的優缺點咱們能夠像下圖同樣選擇圖片的格式

參考連接

每一個前端工程師都應該瞭解的圖片知識 背景透明圖片格式png八、png2四、png32區別 關於 PNG8/PNG24/PNG32 之間的區別