一文讀懂 Web 開發中常見的圖片格式

隨便打開一個網站，琳琅滿目的各式圖片立馬鋪展在頁面上，不管是一個網站標誌性的 Logo，首頁的輪播區域，仍是內容的展現都不可避免的要使用到圖片這個重要的資源，圖片對於當今互聯網的重要性天然不言而喻。可是圖片的格式有許多種，好比 gif、jpg、png等等，你是否知道它們之間的區別呢，若是不清楚就接着往下看吧。

在開始介紹不一樣圖片格式的區別以前，讓咱們先了解一點基礎知識。

圖片壓縮方式

圖片的壓縮方式通常有下面這三種

1. 不壓縮：不壓縮的圖片會保留原始圖片的全部數據，這樣展現的圖片也是還原度最高的，可是因爲沒有通過壓縮，圖片的存儲大小會比較大。
2. 有損壓縮：有損壓縮是壓縮算法的一類，這類圖像壓縮算法經過對圖片的數據進行處理，丟掉一些對圖片顯示不會形成太大影響的數據，來起到對圖片的壓縮做用。丟掉的數據越多，壓縮效率越高，對應的圖片顯示效果也會有必定的降低。
3. 無損壓縮：無損壓縮的算法在對圖片數據進行編碼壓縮時，只會丟掉一些冗餘的數據，這樣就可以保證壓縮先後圖片的質量是幾乎相同的。

圖形種類

計算機上的圖形通常分爲兩類，位圖和矢量圖。

• 位圖，也被稱爲點陣圖，這種類型的圖片由不少個像素組成，當放大位圖的時候，能夠看到一個一個的小方塊，一個小方塊就是一個像素。在對位圖進行放大後到足夠大的倍數後，能夠看到一個個明顯的像素點，位圖的邊緣也開始變得像一個個的鋸齒同樣。

• 矢量圖，也叫作向量圖。矢量圖與位圖不一樣，它不會記錄每一點的數據，而是經過記錄圖像的形狀及顏色，例如使用直線和曲線來描述一個圖形。在頁面上進行展現的時候，經過使用公式進行計算，得出展現的結果並顯示在頁面上。在對矢量圖進行放大時，因爲矢量圖是使用數學公式進行計算再進行展現的，所以展現的效果不會出現改變。

色彩模式

色彩模式通常分爲索引色和直接色：

• 索引色：指的是使用一個數字來表明（索引）一種顏色，在存儲圖片的時候，存儲一個數字的組合，同時存儲數字到圖片顏色的映射。這種方式只能存儲有限種顏色，一般是256種顏色，對應到計算機系統中，使用一個字節的數字來索引一種顏色。

• 直接色：使用多個數字來表明一種顏色，通常是三到四個數據，這些數字分別表明了這個顏色中紅色、綠色、藍色以及透明度。如今流行的顯示設備能夠在這四個維度分別支持 256 種變化，因此直接色能夠表示 2 的 32 次方種顏色。

GIF

GIF 的全稱是 Graphics Interchange Format，可譯爲圖形交換格式，它屬於一種位圖圖形，因此在對 GIF 類型的圖片進行放大後，能夠看到明顯的失真。GIF 主要是爲數據流而設計的一種傳輸格式，而不是做爲文件的存儲格式。

GIF 使用 LZW 壓縮算法進行編碼，這是一種無損壓縮算法，它的核心思想是對數據進行映射，使用更少的數據進行表示。舉個例子：假如咱們有一個字符串 ABBABA ，咱們可使用一個符號 2 來表示 BA，這樣原來的字符串就變成了 AB22，這樣一會兒就減小了存儲數據須要使用的內存，同時原來的數據也不會丟失。

GIF 其實有兩個標準：

1. GIF87a：1987 年推出的版本，這個版本規定了一個文件存儲一個圖像，不支持透明像素和動畫效果，採用LZW壓縮算法，這可以在保持圖像質量的前提下將圖像尺寸壓縮百分之二十到二十五。
2. 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 有不少優勢，但它也存在缺點：

1. 渲染成本比較高，由於須要根據描述去計算圖片展現效果，比起一搬的圖片，須要消耗更多性能。
2. 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 的資源，不支持則返回其餘兼容的資源。

好了，今天的介紹就到這裏了，若是以爲寫的還能夠的朋友歡迎點點贊收藏一下，方便工做查用～～