Create by jsliang on 2019-3-1 13:27:47
Recently revised in 2019-3-5 21:35:45
Hello 小夥伴們，如果覺得本文還不錯，記得給個 star ， 你們的 star 是我學習的動力！GitHub 地址
在我們日常工作中，我們會經常使用 JPG、PNG、GIF、SVG 等格式圖片。
但是，你真的懂圖片嗎？不同格式圖片的區分，它們的優劣勢以及使用場景等……
下面，jsliang 將根據蒐集的資料，進行關於圖片的科普。
一 目錄
不折騰的前端，和鹹魚有什麼區別
| 目錄 |
|---|
| 一 目錄 |
| 二 前言 |
| 三 正文 |
| 3.1 BMP |
| 3.2 JPEG |
| 3.3 PNG |
| 3.4 GIF |
| 3.5 SVG |
| 3.6 Base64 |
| 3.7 WebP |
| 3.8 雪碧圖 |
| 四 總結 |
| 五 參考文獻 |
二 前言
在 jsliang 2 月 27 日進行面試的時候，突然被一個系列的問題問倒了：你熟悉圖片嗎？能講講 JPG、PNG、GIF 的適用場景嗎？然後 PNG 為什麼會有 PNG-8 和 PNG-24？知道 SVG 嗎？能講講它們與 JPG、PNG、GIF 的差別嗎？……
剛開始 jsliang 還能回答下，後來就感覺招架不住了！
於是，愛折騰 的我回頭就是一個查資料，寫下了這篇文章。
三 正文
首先，我們要清楚的是，圖片從型別上分，可以分為 點陣圖 和 向量圖。
- 點陣圖：點陣圖又叫點陣圖或畫素圖，計算機螢幕上的圖是由螢幕上的發光點（即畫素）構成的，每個點用二進位制資料來描述其顏色與亮度等資訊。因為這些點是離散的，類似於點陣，同時因為多個畫素的色彩組合就形成了圖片，所以叫這種圖為點陣圖或者點陣圖。常見點陣圖有 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 格式，是應用最廣泛的圖片格式之一，特點如下：
- JPEG/JPG 採用特殊的有失真壓縮演算法，將不易被人眼察覺的影像顏色刪除，從而達到較大的壓縮比，因此它的壓縮檔案尺寸較小，下載速度快，成為網際網路最廣泛使用的格式。
- JPEG/JPG 因為屬於有失真壓縮，所以當壓縮級別逐漸增大的時候，圖片質量會逐漸損耗，所以壓縮要適當。
在合適的場景下，即便我們將圖片體積壓縮至原有體積的 50% 以下，JPG 仍能保持住 60% 的品質，且因為 JPG 格式以 24 點陣圖儲存單個圖，可以呈現多達 1600 萬種顏色，足以滿足大多數場景，
適用場景：
- 大的背景圖
- 輪播圖
- 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
適用場景：
- 普遍場景
- 小的 Logo，顏色簡單且對比強烈的圖片或者背景。
- 顏色簡單、對比度強的透明小圖。
- 什麼時候使用 PNG-8，什麼時候使用 PNG-24 呢？
- 理論上，位數最大的就是最好的，直接上 PNG-24；但是實際上，為了避免體積過大的問題，一般在適合使用 PNG 的場景中，優先選擇比較小巧的 PNG-8。
- 如何確定是使用 PNG-8 還是 PNG-24，這就看你的 UI 設計師或者負責人能接受那個了，除非你設計功底非常好，要不然不要做這個選擇！
3.4 GIF
關鍵字：支援動畫
簡要介紹：
GIF 格式，不僅僅支援靜止圖片，也可以支援動畫，並且支援透明背景影像，適用於多種作業系統，體積很小，網上小動畫很多是 GIF 格式。但是色域不太廣，只支援 256 種顏色，這意味著顏色種類少。
GIF 格式的壓縮率一般在 50% 左右。
適用場景：
- 動圖
3.5 SVG
關鍵字：文字檔案、體積小、不失真、相容性好
簡要介紹：
SVG（可縮放向量圖形）是一種基於 XML 語法的影像格式，是可縮放的向量圖形。與 JPG、PNG、GIF 等點陣圖不同，SVG 可以直接用程式碼來描繪影像，並通過任意文書處理工具開啟 SVG 影像，通過改變部分程式碼來使影像具有互動功能，並可以隨時插入到 HTML 中通過瀏覽器來觀看。
SVG 格式的圖片可以任意放大圖形顯示，並且不會損失圖片質量；SVG 格式可編輯和可搜尋；SVG 格式平均來講，比 JPG 和 GIF 格式檔案要小，並且下載也比較快。
SVG 檔案通常是極小的，但是當圖形的複雜度變高的時候，SVG 檔案大小會隨之上升，因為 SVG 在渲染的時候需要比畫素圖更多的計算能力，這也意味著效能的損耗。所以在 Logo 等圖上，應儘可能簡潔。
適用場景：
- SVG loading 效果圖：SVG-Loaders
- 轉換工具：線上 JPG、PNG 轉 SVG 工具
- 向量圖示庫：阿里巴巴向量圖示
3.6 Base64
關鍵字：文字檔案、依賴編碼、小圖示解決方案
簡要介紹：
Base64 並非一種圖片格式，而是一種編碼方式，它類似於雪碧圖，是作為小圖示解決方案而存在的。和雪碧圖一樣，Base64 圖片的出現，也是為了減少載入網頁圖片時對伺服器的請求次數，從而提升網頁效能。Base64 是作為雪碧圖的補充而存在的。
Base64 是一種用於傳輸 8 Bit 位元組碼的編碼方式，通過對圖片進行 Base64 編碼，我們可以直接將編碼結果寫入 HTML 或者寫入 CSS，從而減少 HTTP 請求的次數。
適用場景：
- 圖片的實際尺寸很小。儘可能在圖片不超過 2KB 的情況下（可檢視掘金的 Base64 圖）。
- 圖片無法以雪碧圖的形式與其他小圖結合（合成雪碧圖仍是主要的減少 HTTP 請求的途徑，Base64 是雪碧圖的補充）。
- 圖片的更新頻率非常低（不需要我們重複編碼和修改檔案內容，維護成本較低）
為什麼大圖不使用 Base64？
因為 Base64 編碼後，圖片大小會膨脹為原始檔的 4/3，如果將大圖編碼到 HTML 或者 CSS 中，這樣後者的體積增加，即便減少了 HTTP 請求，也無法彌補龐大的體積帶來的效能開銷。
如何獲取：
- Webpack 的 loader：url-loader
- 線上編碼工具：圖片轉換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 請求 |
雪碧圖不屬於格式，但屬於一種應用形式
最後，在開發中會常用到一些資料，下面是 jsliang 在圖片方面的個人資源，如果小夥伴有其他的好用資源推薦，可以 QQ 或者評論留言：
- 常用優秀資源：
- SVG loading 效果：SVG-Loaders
- 向量圖示庫：Iconfont-阿里巴巴向量圖示庫
- 線上製作 Logo：U 鈣網
- 壓縮 PNG 或者 JPG：TinyPNG
- 獲取圖片素材：
- 線上轉換工具：
- 其他資料支援：
- Can I Use —— 檢視各種瀏覽器支援程度：caniuse.com
五 參考文獻
- 《jpg、png、svg、gif等圖片格式的區別》
- 《PNG、JPEG、GIF、SVG應該用哪個？》
- 《圖片優化——質量與效能的博弈》
- 《橫向對比 gif、jpeg、png、svg，教你如何合理選擇影像格式》
- 《JPG？GIF？PNG？前端如何選擇圖片格式？》
- 《向量圖與點陣圖的區別》
- 《無失真壓縮和有失真壓縮是數碼影像檔案壓縮的兩種型別。》
jsliang 廣告推送：
也許小夥伴想了解下雲伺服器
或者小夥伴想買一臺雲伺服器
或者小夥伴需要續費雲伺服器
歡迎點選 雲伺服器推廣 檢視！
jsliang 的文件庫 由 樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。
