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 格式，是應用最廣泛的圖片格式之一，特點如下：
- 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 請求 |
雪碧圖不屬於格式，但屬於一種應用形式
如果小伙伴有其他的好用資源推薦，可以 QQ 或者評論留言：
- 常用優秀資源：
- SVG loading 效果：SVG-Loaders
- 矢量圖標庫：Iconfont-阿里巴巴矢量圖標庫
- 在線制作 Logo：U 鈣網
- 壓縮 PNG 或者 JPG：TinyPNG
- 獲取圖片素材：
- 在線轉換工具：
- 其他資料支持：
- Can I Use —— 查看各種瀏覽器支持程度：caniuse.com