2019 面試準備 - 圖片

jsliang發表於2019-03-05

Create by jsliang on 2019-3-1 13:27:47
Recently revised in 2019-3-5 21:35:45

Hello 小夥伴們，如果覺得本文還不錯，記得給個 star ，你們的 star 是我學習的動力！GitHub 地址

【2019-08-16】Hello 小夥伴們，由於 jsliang 對文件庫進行了重構，這篇文章的一些連結可能失效，而 jsliang 沒有精力維護掘金這邊的舊文章，對此深感抱歉。請需要獲取最新文章的小夥伴，點選上面的 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 請求