JPG、PNG、GIF、SVG 等格式圖片區別

1.圖片

 

2. 前言

首先，咱們要清楚的是，圖片從類型上分，能夠分爲 位圖 和 矢量圖。

• 位圖：位圖又叫點陣圖或像素圖，計算機屏幕上的圖是由屏幕上的發光點（即像素）構成的，每一個點用二進制數據來描述其顏色與亮度等信息。由於這些點是離散的，相似於點陣，同時由於多個像素的色彩組合就造成了圖片，因此叫這種圖爲點陣圖或者位圖。常見位圖有 JPG、PNG、GIF 等格式。
• 矢量圖：矢量圖又叫向量圖，它是由一系列計算機指令來描述和記錄一幅圖，一幅圖能夠解爲點、線、面等組成的子圖。生成的矢量圖文件存儲量很小，特別適用於文字設計、圖案設計等，而在前端中比較經常使用的矢量圖有 SVG 等格式……

而後，咱們按壓縮劃分，能夠將圖片分爲 無損壓縮 和 有損壓縮。

• 無損壓縮：無損壓縮是對文件自己的壓縮，使圖片佔用的存儲空間變小，而且不會損害圖片的質量。常見無損壓縮有 PNG 等。
• 有損壓縮：有損壓縮是對圖像自己的改變，會對圖片質量形成損害，隨着壓縮次數愈來愈多，那麼圖片質量會愈來愈差。常見有損壓縮有 JPG 等。

最後，究根結底，咱們須要知道在計算機中，像素是用二進制來表示的。不一樣圖片格式中像素與二進制位數之間的對應關係是不一樣的。一個像素對應的二進制位數越多，那麼它能夠表示的顏色種類就越多，成像效果也就越細膩，文件體積相應也會越大。

一個二進制位表示兩種顏色 【 0|1 <——對應——> 黑|白 】，若是一種圖片格式對應的二進制位數有 n 個，那麼它就能夠呈現 2^n 中顏色。例如：

• PNG-8：它有 2^8 種顏色，即 256 種顏色。
• PNG-24：它有 2^24 種顏色，即 1677216 種顏色（1600 萬種顏色）。

OK，知道了這些基礎知識，咱們就按圖片出現的順序，一一講解下經常使用的圖片知識吧！

3.1 BMP

早期使用的圖片格式，叫 BMP，取自英文單詞 BitMap，Windows 中文版譯做 位圖，它的文件結構很簡單，沒有壓縮，一個一個像素地記錄下來。

若是你的系統是 Windows，你能夠打開 畫圖 工具，而後點擊另存爲，你能夠看到保存的選項中有個 24位位圖 的格式，即 1600 萬色的圖片。

固然，歷史總在前進，BMP 這種沒有壓縮的圖片格式，逐漸被後起之秀代替了。

不知道爲何，查不到 JPG、PNG、GIF 的出現順序，下面只好按我我的記憶方式來編文章段落。

3.2 JPEG

關鍵字：有損壓縮、體積小、加載快、不支持透明

簡要介紹：

JPEG/JPG 格式，是應用最普遍的圖片格式之一，特色以下：

1. JPEG/JPG 採用特殊的有損壓縮算法，將不易被人眼察覺的圖像顏色刪除，從而達到較大的壓縮比，所以它的壓縮文件尺寸較小，下載速度快，成爲互聯網最普遍使用的格式。
2. JPEG/JPG 由於屬於有損壓縮，因此當壓縮級別逐漸增大的時候，圖片質量會逐漸損耗，因此壓縮要適當。

在合適的場景下，即使咱們將圖片體積壓縮至原有體積的 50% 如下，JPG 仍能保持住 60% 的品質，且由於 JPG 格式以 24 位圖存儲單個圖，能夠呈現多達 1600 萬種顏色，足以知足大多數場景，

適用場景：

1. 大的背景圖
2. 輪播圖
3. Banner 圖

3.3 PNG

關鍵字：無損壓縮、質量高、體積大、支持透明

簡要介紹：

PNG（可移植網絡圖形格式）是一種無損壓縮的高保真的圖片格式，它的壓縮比高於 GIF，支持圖像透明，能夠利用 Alpha 通道調節圖像透的明度。

PNG 分 PNG-8 和 PNG-24。

• PNG-8：PNG-8 是無損壓縮的索引色彩模式。PNG-8 是 GIF 格式很好的替代，雖然不能像 GIF 同樣有動畫，也不兼容 IE6 等老舊瀏覽器。PNG-8 最多支持 256 中顏色。
• PNG-24：PNG-24 是無損壓縮的直接色彩模式。PNG-24 會比 JPEG、GIF、PNG-8 佔用更大的存儲空間。PNG-24 能夠呈現 1600 萬種顏色。

2^8 = 256，2^24 = 1677216

適用場景：

• 廣泛場景

1. 小的 Logo，顏色簡單且對比強烈的圖片或者背景。
2. 顏色簡單、對比度強的透明小圖。

• 何時使用 PNG-8，何時使用 PNG-24 呢？

1. 理論上，位數最大的就是最好的，直接上 PNG-24；可是實際上，爲了不體積過大的問題，通常在適合使用 PNG 的場景中，優先選擇比較小巧的 PNG-8。
2. 如何肯定是使用 PNG-8 仍是 PNG-24，這就看你的 UI 設計師或者負責人能接受那個了，除非你設計功底很是好，要否則不要作這個選擇！

3.4 GIF

關鍵字：支持動畫

簡要介紹：

GIF 格式，不只僅支持靜止圖片，也能夠支持動畫，而且支持透明背景圖像，適用於多種操做系統，體積很小，網上小動畫不少是 GIF 格式。可是色域不太廣，只支持 256 種顏色，這意味着顏色種類少。

GIF 格式的壓縮率通常在 50% 左右。

適用場景：

1. 動圖

3.5 SVG

關鍵字：文本文件、體積小、不失真、兼容性好

簡要介紹：

SVG（可縮放矢量圖形）是一種基於 XML 語法的圖像格式，是可縮放的矢量圖形。與 JPG、PNG、GIF 等位圖不一樣，SVG 能夠直接用代碼來描繪圖像，並經過任意文字處理工具打開 SVG 圖像，經過改變部分代碼來使圖像具備交互功能，並能夠隨時插入到 HTML 中經過瀏覽器來觀看。

SVG 格式的圖片能夠任意放大圖形顯示，而且不會損失圖片質量；SVG 格式可編輯和可搜尋；SVG 格式平均來說，比 JPG 和 GIF 格式文件要小，而且下載也比較快。

SVG 文件一般是極小的，可是當圖形的複雜度變高的時候，SVG 文件大小會隨之上升，由於 SVG 在渲染的時候須要比像素圖更多的計算能力，這也意味着性能的損耗。因此在 Logo 等圖上，應儘量簡潔。

適用場景：

1. SVG loading 效果圖：SVG-Loaders
2. 轉換工具：在線 JPG、PNG 轉 SVG 工具
3. 矢量圖標庫：阿里巴巴矢量圖標

3.6 Base64

關鍵字：文本文件、依賴編碼、小圖標解決方案

簡要介紹：

Base64 並不是一種圖片格式，而是一種編碼方式，它相似於雪碧圖，是做爲小圖標解決方案而存在的。和雪碧圖同樣，Base64 圖片的出現，也是爲了減小加載網頁圖片時對服務器的請求次數，從而提高網頁性能。Base64 是做爲雪碧圖的補充而存在的。

Base64 是一種用於傳輸 8 Bit 字節碼的編碼方式，經過對圖片進行 Base64 編碼，咱們能夠直接將編碼結果寫入 HTML 或者寫入 CSS，從而減小 HTTP 請求的次數。

適用場景：

1. 圖片的實際尺寸很小。儘量在圖片不超過 2KB 的狀況下（可查看掘金的 Base64 圖）。
2. 圖片沒法以雪碧圖的形式與其餘小圖結合（合成雪碧圖還是主要的減小 HTTP 請求的途徑，Base64 是雪碧圖的補充）。
3. 圖片的更新頻率很是低（不須要咱們重複編碼和修改文件內容，維護成本較低）

爲何大圖不使用 Base64？
由於 Base64 編碼後，圖片大小會膨脹爲源文件的 4/3，若是將大圖編碼到 HTML 或者 CSS 中，這樣後者的體積增長，即使減小了 HTTP 請求，也沒法彌補龐大的體積帶來的性能開銷。

如何獲取：

1. Webpack 的 loader：url-loader
2. 在線編碼工具：圖片轉換Base64

3.7 WebP

關鍵字：年輕的全能型選手

簡要介紹：

2010 年由 Google 提出，轉爲 Web 開發的一種旨在加快圖片加載速度的圖片格式，支持有損壓縮和無損壓縮。

WebP 像 JPEG 同樣對圖片細節豐富，像 PNG 同樣支持透明，像 GIF 同樣能夠顯示動態圖片。

官方介紹：與 PNG 相比，WebP 無損圖像的尺寸縮小了 26％。在等效的 SSIM 質量指數下，WebP 有損圖像比同類 JPEG 圖像小 25-34％。 無損 WebP 支持透明度（也稱爲 alpha 通道），僅需 22％ 的額外字節。對於有損 RGB 壓縮可接受的狀況，有損 WebP 也支持透明度，與 PNG 相比，一般提供 3 倍的文件大小。

適用場景：

因爲 WebP 支持狀況僅 Chrome、UC 等幾家瀏覽器支持，因此侷限性較大，目前暫不考慮使用。

參考自 Can I Use 網站中的瀏覽器支持程度：webp

3.8 雪碧圖

雪碧圖，CSS Sprites，聽起來就很清爽的一種圖片，剛開始的時候 jsliang 覺得是大街小巷上賣的 3 塊錢瓶裝雪碧飲料上的圖片，後來知道壓根不是同一碼事。

雪碧圖不屬於圖片格式，而是一種圖片應用形式。可是由於它在前端赫赫有名，常用，故此將其記載下來。

雪碧圖又叫精靈圖，由於 Sprites 的緣由叫 「雪碧」，出現的緣由是隨着網速的提高，同時由於請求次數過多的時候會卡網頁，因此咱們就將 N 張小圖集成到一張大圖上，從而提高頁面打開的速度。這種多張小圖放在一張大圖上的操做，就叫作精靈圖（雪碧圖 - CSS Sprites）

那麼，平時如何使用雪碧圖呢？

.img{background:url(../images/img.png) no-repeat;} .my-head{height:160px;width:120px;background-position:0 0;} .my-picture{height:292px;width:1253px;background-position:0 -160px;} 複製代碼

@mixin img{background:url(../images/img.png) no-repeat; }
@mixin my-head{height:160px;width:120px;background-position: 0 0;}
@mixin my-picture{height:292px;width:1253px;background-position: 0 -160px;}
複製代碼

如上面代碼所示，如今網上有很是多的雪碧圖製做工具，咱們只須要將小圖發到工具上去，就能夠生成大圖，同時得到它的 css/sass 代碼，而不須要本身一個一個定位。

這是 Windows 版本的工具，網上有不少雪碧圖/精靈圖製做工具，這裏就不推薦本人使用的了。

MDN 定義：圖像精靈（sprite，意爲精靈），被運用於衆多使用大量小圖標的網頁應用之上。它可取圖像的一部分來使用，使得使用一個圖像文件替代多個小文件成爲可能。相較於一個小圖標一個圖像文件，單獨一張圖片所需的 HTTP 請求更少，對內存和帶寬更加友好。

四 總結

至此，咱們對圖片的介紹就結束了，在這裏咱們列個表進行彙總：

格式	使用場景
JPG/JPEG	1. 大的背景圖； 2. 輪播圖； 3. Banner 圖
PNG	1. 小 Logo； 2. 透明背景
GIF	動態圖片
SVG	能適應不一樣設備且畫質不能損壞的圖片
Base64	大小不超過 2KB，且更新率低的圖片
雪碧圖	小圖太多的時候，集中成一張圖片減小 HTTP 請求

雪碧圖不屬於格式，但屬於一種應用形式

若是小夥伴有其餘的好用資源推薦，能夠 QQ 或者評論留言：

• 經常使用優秀資源：

1. SVG loading 效果：SVG-Loaders
2. 矢量圖標庫：Iconfont-阿里巴巴矢量圖標庫
3. 在線製做 Logo：U 鈣網
4. 壓縮 PNG 或者 JPG：TinyPNG

• 獲取圖片素材：

1. 千庫網：地址
2. 包圖網：地址

• 在線轉換工具：

1. JPG、PNG 轉 SVG
2. JPG、PNG、GIF 轉 Base64
3. JPG、PNG、GIF 轉 ICO

• 其餘資料支持：

5. Can I Use —— 查看各類瀏覽器支持程度：caniuse.com

五 參考文獻

1. 《jpg、png、svg、gif等圖片格式的區別》
2. 《PNG、JPEG、GIF、SVG應該用哪一個？》
3. 《圖片優化——質量與性能的博弈》
4. 《橫向對比 gif、jpeg、png、svg，教你如何合理選擇圖像格式》
5. 《JPG？GIF？PNG？前端如何選擇圖片格式？》
6. 《矢量圖與位圖的區別》
7. 《無損壓縮和有損壓縮是數碼圖像文件壓縮的兩種類型。》