隨便開啟一個網站，琳琅滿目的各式圖片立馬鋪展在頁面上，不論是一個網站標誌性的 Logo，首頁的輪播區域，還是內容的展示都不可避免的要使用到圖片這個重要的資源，圖片對於當今網際網路的重要性自然不言而喻。但是圖片的格式有許多種，比如 gif、jpg、png等等，你是否知道它們之間的區別呢，如果不清楚就接著往下看吧。
在開始介紹不同圖片格式的區別之前，讓我們先了解一點基礎知識。
圖片壓縮方式
圖片的壓縮方式一般有下面這三種
- 不壓縮：不壓縮的圖片會保留原始圖片的所有資料，這樣展示的圖片也是還原度最高的，但是由於沒有經過壓縮，圖片的儲存大小會比較大。
- 有失真壓縮：有失真壓縮是壓縮演算法的一類，這類影像壓縮演算法通過對圖片的資料進行處理，丟掉一些對圖片顯示不會造成太大影響的資料，來起到對圖片的壓縮作用。丟掉的資料越多，壓縮效率越高，對應的圖片顯示效果也會有一定的下降。
- 無失真壓縮：無失真壓縮的演算法在對圖片資料進行編碼壓縮時，只會丟掉一些冗餘的資料，這樣就能夠保證壓縮前後圖片的質量是幾乎相同的。
圖形種類
計算機上的圖形一般分為兩類，點陣圖和向量圖。
-
點陣圖，也被稱為點陣圖，這種型別的圖片由很多個畫素組成，當放大點陣圖的時候，可以看到一個一個的小方塊，一個小方塊就是一個畫素。在對點陣圖進行放大後到足夠大的倍數後，可以看到一個個明顯的畫素點，點陣圖的邊緣也開始變得像一個個的鋸齒一樣。
-
向量圖，也叫做向量圖。向量圖與點陣圖不同，它不會記錄每一點的資料，而是通過記錄影像的形狀及顏色，例如使用直線和曲線來描述一個圖形。在頁面上進行展示的時候，通過使用公式進行計算，得出展示的結果並顯示在頁面上。在對向量圖進行放大時，由於向量圖是使用數學公式進行計算再進行展示的，因此展示的效果不會出現改變。
色彩模式
色彩模式一般分為索引色和直接色：
-
索引色：指的是使用一個數字來代表（索引）一種顏色，在儲存圖片的時候，儲存一個數字的組合，同時儲存數字到圖片顏色的對映。這種方式只能儲存有限種顏色，通常是256種顏色，對應到計算機系統中，使用一個位元組的數字來索引一種顏色。
-
直接色：使用多個數字來代表一種顏色，一般是三到四個資料，這些數字分別代表了這個顏色中紅色、綠色、藍色以及透明度。現在流行的顯示裝置可以在這四個維度分別支援 256 種變化，所以直接色可以表示 2 的 32 次方種顏色。
GIF
GIF 的全稱是 Graphics Interchange Format，可譯為圖形交換格式，它屬於一種點陣圖圖形，所以在對 GIF 型別的圖片進行放大後，可以看到明顯的失真。GIF 主要是為資料流而設計的一種傳輸格式，而不是作為檔案的儲存格式。
GIF 使用 LZW 壓縮演算法進行編碼，這是一種無失真壓縮演算法，它的核心思想是對資料進行對映，使用更少的資料進行表示。舉個例子：假如我們有一個字串 ABBABA ，我們可以使用一個符號 2 來表示 BA，這樣原來的字串就變成了 AB22，這樣一下子就減少了儲存資料需要使用的記憶體，同時原來的資料也不會丟失。
GIF 其實有兩個標準：
- GIF87a：1987 年推出的版本，這個版本規定了一個檔案儲存一個影像，不支援透明畫素和動畫效果，採用LZW壓縮演算法，這能夠在保持影像質量的前提下將影像尺寸壓縮百分之二十到二十五。
- GIF89a：1989 年推出的版本，該版本允許一個檔案儲存多個影像，可實現動畫功能，允許某些畫素透明。在這個版本中為GIF文件擴充了圖形控制區塊、備註、說明、應用程式程式設計介面4個區塊，並提供了對透明色和多幀動畫的支援。
GIF 使用的是索引色的模式，因此最多隻支援 256 種顏色。色彩較為豐富的圖片不適合使用 GIF 格式，色彩比較簡單的圖片更加適合。
JPEG
說到 JPEG，可能有同學就想問了：它和 JPG 有什麼區別？答案是沒區別，JPG 和 JPEG 是同一個東西，之所以會有 JPG 的說法，是因為 DOS、Windows 95 等早期系統採用的命名規則只支援最長 3 字元的副檔名，為了相容採用了 .jpg，後來因歷史習慣和相容性考慮，.jpg目前更流行。
說回正題，JPEG 與 GIF 相同，也是一種點陣圖圖形，放大後同樣會有失真的情況。
與 GIF 不同的是 JPEG 使用的是有失真壓縮的演算法，這是因為 JPEG 設計的目標是：是在不影響人類可分辨的圖片質量的前提下，儘可能的壓縮檔案大小。這就意味著為了壓縮圖片的體積大小，會丟失圖片的一些資料，但是這並不意味著 JPEG 的效果很差，因為 JPEG 使用的是直接色，支援 1600（2 的 24 次方）萬種顏色，足夠應對絕大部分場景下的顏色需求，因此在壓縮前後產生的質量損耗不會很容易被人眼察覺。
因此對於色彩豐富的圖片來說，使用 JPEG 是一個不錯的選擇，特別是一些大的背景圖如首頁大圖等，使用 JPEG 來呈現可以在保證圖片質量的同時減少圖片的體積。JPEG 的缺點是不支援透明度，有透明度的需求就要考慮使用別的圖片型別了。
PNG
PNG 的全稱是 Portable Network Graphics，即行動式網路圖形。PNG 其實根據儲存顏色的資料位數分為幾種，下面我們分別進行介紹。
- PNG-8：使用 8 位二進位制儲存圖片的顏色資料，因此最多隻支援 256 種顏色，是一種索引色的色彩模式。支援兩種不同的透明形式（索引透明和alpha透明）。
- PNG-24：使用 24 位二進位制儲存圖片的顏色資料，可以支援 1600 萬種顏色，屬於直接色的色彩模式，不支援透明。
- PNG-32：使用 32 位二進位制儲存顏色資料，相比 PNG-24 增加了一個 alpha 的通道，因此可以支援透明，最多可以支援 42 億種顏色。
PNG 使用的是無失真壓縮演算法，因此相比 JPEG 體積較大，PNG 與 JPEG 一樣不支援動畫效果。但 PNG 支援透明度，這也是 PNG 的一個優點，因為其高品質無失真壓縮，非常適合用於原始檔或需要二次編輯的圖片格式的儲存。雖然 PNG 的一個很大的目標，是替換 JPEG 的使用，但是 PNG-24 的檔案大小卻是 JPEG 的五倍之多，而顯示效果則通常只能獲得一點點提升。所以，只有當你不在乎圖片的檔案體積，想要更好的展示效果或者想使用透明效果時，才應該使用 PNG-24 或 PNG-32 格式。
APNG
APNG 是 Animated Portable Network Graphics 的縮寫，顧名思義，它是帶動畫效果的 PNG。
APNG 是基於 PNG 擴充套件的一種格式，增加了對動畫影像的支援，同時還有 24 位 RGB 和 8 位 Alpha 透明度的支援，和 PNG-32 一樣支援透明度，支援 42 億種顏色。這相當於 APNG 整合 PNG 和 GIF 兩者的優點，色彩豐富、無失真壓縮質量高，而且還支援動畫，唯一的硬傷還是體積大。APNG 在體積這方面也已經做了優化，在儲存動畫效果的資料時，會通過演算法計算幀之間的差異，只儲存幀之間的差異，而不是儲存全部幀的資料。
假設使用一個 4 幀圖片合成 APNG，如下圖：
APNG 實際儲存的影像資訊：
正是因為只儲存了動畫幀必要的影像資訊，對冗餘資料進行進行了優化，使得 APNG 的體積可以進一步減小。
APNG 對於瀏覽器的相容性還非常好，在相容的瀏覽器上可以顯示出動畫效果，在不相容的瀏覽器上也不會出現圖掛掉的情況，這是因為 APNG 的第一幀儲存的是一幅正常的 PNG 影像，對於不支援 APNG 的瀏覽器或軟體，只會顯示 APNG 檔案的第一幀，忽略後面附加的動畫幀，這也是為什麼 APNG 能向下相容 PNG 的原因。
SVG
可縮放向量圖形（Scalable Vector Graphics，SVG）是 W3C 推出的基於 XML 的二維向量圖形標準。與上面提到的圖片格式不同，SVG 是一種向量圖，它對影像的處理不是基於畫素點，而是基於對影像的描述，通過資料公式對描述進行計算後顯示在頁面上，因此它的顯著特點是無論怎麼放大，都不會出現失真的情況。
由於 SVG 儲存的是影像的描述，而不是一個個的畫素點資料，這就使得 SVG 的檔案體積大大減小，同時擁有更好的壓縮性。
雖然 SVG 有很多優點，但它也存在缺點：
- 渲染成本比較高，因為需要根據描述去計算圖片展示效果，比起一搬的圖片，需要消耗更多效能。
- SVG 存在著其他圖片格式沒有的學習成本，它是可程式設計的。（當然這也證明了它的靈活性）
WebP
在上面提到的所有圖片格式中，WebP 是最新的一種格式，在 2010 年由谷歌提出，旨在讓網頁圖檔有效進行壓縮，同時又不影響圖片格式相容與實際清晰度，進而讓整體網頁下載速度加快。
WebP 同時支援有失真壓縮和無失真壓縮，可以像 PNG 一樣支援透明度，像 GIF 和 APNG 一樣支援動畫效果，可以說是集齊了所有圖片格式的優點，我們來看看谷歌官方對 WebP 優點的描述。
- 與 PNG 相比，WebP 無損影像的尺寸縮小了 26％。在等效的 SSIM 質量指數下，WebP 有損影像比同類 JPEG 影像小 25-34％。 無損 WebP 支援透明度（也稱為 alpha 通道），僅需 22％ 的額外位元組。對於有損 RGB 壓縮可接受的情況，有損 WebP 也支援透明度，與 PNG 相比，通常提供 3 倍的檔案大小。
雖然 WebP 擁有那麼多的優點，但是它畢竟還是太年輕了，在瀏覽器界，太年輕的後果就是誰都跟你過不去（不相容），從下面的資料看起來雖然不是特別慘，但是在 IE、Safari，特別是 IOS 上的不支援，要知道現在移動端的流量有多麼的大，這也足夠讓人望而生卻了。
當然這個也有解決方案，開啟一些電商網站，如果是用支援 WebP 的瀏覽器開啟的，我們可以看到它的大圖是 xxxx.jpg.webp，如果是用不支援 WebP 的瀏覽器開啟，可以看到圖片變成了 xxxx.jpg，可以發現網站對瀏覽器進行了檢測，判斷是否支援 WebP，如果支援就返回 WebP 的資源，不支援則返回其他相容的資源。
好了，今天的介紹就到這裡了，如果覺得寫的還可以的朋友歡迎點點贊收藏一下，方便工作查用～～