前端開發中常用圖片格式

在我們的日常開發中。必不可少會使用很多種圖片。
我們需要根據業務場景來選擇所使用的圖片類型。
這里我整理了一些常用圖片類型、他們的優缺點以及建議的使用場景。

如何在計算機中顯示一張圖片

• 我們使用的計算機都是以像素作為最小單位。

• 每一個像素在內存中需要使用 4 個字節，分別為 RGBA

• 1280*720*4 約等於 3.5M

• 圖片格式，就是計算機存儲圖片數據的方式

根據圖片數據存儲過程中，是否對數據進行壓縮處理。將圖片分為兩類

• 無壓縮存儲
• 壓縮存儲
  
  

無壓縮存儲

顧名思義就是直接將圖片數據加上元數據直接存儲的方式。

代表格式：

BMP（BMP 取自位圖 BitMaP 的縮寫，也稱為 DIB（與設備無關的位圖））

• 支持 1、4、8、24 位深度
• 常用深度
  • 8 位為索引模式
  • 24 位，32 位使用 RGB 模式
• 數據掃描方式：從上到下，從左到右

• 優點：
  • 未壓縮格式，算法簡單，對各個平台兼容性良好。平台層應用較多。
  • 不需要要任何依賴就可以打開
• 缺點：
  • 不要在網頁中使用

這里僅僅是跟后邊壓縮格式做對照說明，web 開發中不要使用 bmp 格式圖片。

壓縮存儲

壓縮存儲，就是在存儲過程中通過壓縮算法，將圖片數據進行壓縮，使得相同分辨率、相近質量的情況下。縮小圖片所占空間。

既然在存儲的時候壓縮，那么在使用的時候，就需要先將壓縮后的圖片，解壓然后放在內存中。

圖片壓縮的本質就是：以時間換空間

壓縮的程度，就需要在空間成本和時間成本之間做到平衡。

再常見的場景中，相對硬盤存儲成本和網絡的傳輸能力，我們幾乎不用考慮處理器的能力限制

對於圖片數據的壓縮，也分為兩種

• 無損壓縮
• 有損壓縮
  
  

無損壓縮

無損壓縮：壓縮和解壓縮的過程是完全可逆的。

保證圖片解壓之后，可以完全追溯到源數據。

常用的無損壓縮算是 LZ77 的衍生算法

簡單說就是，在某一個緩沖區內，找到較長的重復數據。然后替換成較短的索引值。

gif、png、zip、gzip 等都是使用這個壓縮算法

無損壓縮的代表格式 png、gif

GIF（Graphics Interchange Format 圖像互換格式）

• 索引模式 8 位，支持 256 色

  • 索引模式
    • 使用 1 個字節來存儲圖片研
    • 支持 256 種顏色，0-255，每個序號代表一種顏色值
  • 直接顏色模式 RGB
    • 使用 3 個字節分別來存儲 RGB
    • 支持 255*255*255 約等於 1600W，支持 1600 萬色。說的就是這個
  • 從直接 RGB 模式改為索引模式，會出現圖片略微失真。
  • 會極大的壓縮圖片尺寸

• 布爾透明

  • 只有是否兩個選項，不會出現漸變透明
  • alpha 透明
    • 0-255 個層級表示 alpha 層
  • 圓形位置會出現明顯鋸齒

• 支持交錯

  • 交錯選項會在下載時候不在從左到右，從上到下的模式進行下載。而是隔行下載，在 1/64 后顯示總體模糊概況

• 優點：

  • 支持動畫
  • 支持透明
  • 無損壓縮

• 缺點：

  • 僅布爾透明

• 適用場景：

  • logo、icon 等
  • 動圖

PNG

• 全稱便攜式網絡圖形（外語全稱：Portable Network Graphics）

• png 格式擁有比 git 更優的算法

• 支持交錯

• png8

  • 屬性基本與 git 一致
  • 除了不支持動畫效果外，可替換 gif 格式

• png24

  • 直接顏色模式，對顏色值真實還原。
  • 我們常用的 png 格式 24 位深度
  • 很多情況下我們使用 png 圖片時候，使用到透明。這樣保存默認就增加 alpha 層（png32）

• 缺點

  • 相對圖片較大
  • 對自然照片和復雜色塊的圖片壓縮率不高

• 優點

  • 高保真

• 使用場景

  • 適用於 web 所有場景，建議使用

有損壓縮

有損壓縮，就是在壓縮過程中，對圖片造成不可逆的質量損壞的壓縮方式。

代表格式 jpg

• 全稱聯合照片專家組（外語簡稱 JPEG 外語全稱：Joint Photographic Expert Group）

• jpg===jpeg

  • 早期的 dos 系統，對文件名的格式要求是（8.3）格式，所以在當時版本上，后綴名改為 jpg
  • 相同命運的還有 htm 和 html

• 不支持動畫

• 可選壓縮質量 JPEG 圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，盡可能的壓縮文件大小。 JPEG 圖片在顯示時候，使用 YCbCr 模式，利用人眼對亮度敏感大於色彩敏感。RGB 格式轉換為 YCbCr 模式。 JPEG 的圖片的優點，是采用了直接色，得益於更豐富的色彩，JPEG 非常適合用來存儲照片，用來表達更生動的圖像效果，比如顏色漸變。

• 支持交錯 連續類似 PNG 交錯，會先顯示模糊輪廓

與 GIF 相比，JPEG 不適合用來存儲企業Logo、線框、純色類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件更大。

• 每次打開重新保存 jpg 都會造成質量的下降。

• 不適用場景：

  • logo
  • 單色圖片
  • 顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片

• 適用場景

  • 照片
  • 復雜 banner

矢量圖片

以上所述的，使用像素點來表示圖形的圖片格式，叫做位圖。 還有一種使用點和線來描述圖形的圖片格式，矢量圖

• svg（Scalable Vector Graphics）

  可縮放矢量圖形（外語簡稱 SVG、外語全稱：Scalable Vector Graphics）。

  它是基於 XML，由萬維網聯盟進行開發的。一種開放標准的矢量圖形語言，可任意放大圖形顯示，邊緣異常清晰，文字在 SVG 圖像中保留可編輯和可搜尋的狀態，沒有字體的限制，生成的文件很小，下載很快，十分適合用於設計高分辨率的 Web 圖形頁面

  • SVG 文件的大小通常是極小的，即使它們看起來的樣子真的很大。然而，值得注意的是，
  • SVG 文件的大小也取決於要展示圖形的復雜度。
  • SVG 在渲染的時候需要比像素圖更多的計算能力，這也就意味着性能的損耗。

  如果你的 logo 是特別復雜的，它可能會很耗費性能，甚至文件大小也非常大。

  所以盡可能簡化你的矢量形狀的復雜度是很重要也很有必要的。 此外，SVG 文件是用 XML 編寫的，因此可以在文本編輯器中打開和編輯。這意味着它展示的效果在運行時是可以改變的。你可以使用 JavaScript 來改變圖片。

• 優點：

  • 矢量圖片，放大不影響質量
  • 顯示效果好，不存在鋸齒等情況
  • 可以支持動畫效果

• 缺點：

  • 查看十分不方便
  • 不適合表示復雜圖形
  • 兼容性（顯示（< ie8)；動畫效果（更多））

• 應用場景

  • logo、圖標

其他

base64

base64 本身不屬於圖片格式，是以字符串格式來保存圖片數據的一種方式

標准的 ascii 字符中 0-31 及 127，屬於控制字符，它們並沒有特定的圖形顯示，但會依不同的應用程序，而對文本顯示有不同的影響。

在網絡上交換數據時，往往要經過多個路由設備，由於不同的設備對字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯誤，這是不利於傳輸的。所以，我們經常講源數據做 base64 處理

Base64 要求把每三個 8Bit 的字節轉換為四個 6Bit 的字節（3*8 = 4*6 = 24），然后把 6Bit 再添兩位高位 0，組成四個 8Bit 的字節（使用 A-Za-z0-9+/）等可見字符來做網絡傳輸

Base64 適用於小段內容的編碼，比如數字證書簽名、Cookie 的內容等。

網頁中，我們也使用 base64 來講較小的圖片轉換為字符串數據，保存在 css 或者 html 中。從而減少網絡請求的次數

也有些場景是講圖片或者文件轉為 base64 格式，使用 post 上傳到服務器實現文件上傳功能

Base64 並不適合直接放在 URL 里傳輸，因為 URL 編碼器會把標准 Base64 中的“/”和“+”字符轉義

• 優點
  • 減少網絡請求
• 缺點
  • base64 轉換規則導致數據比源數據大 1/3
  • 字符串內容存儲在 css 或者 js 中，會影響 css 樹解析速度或者 js 解釋器執行速度

建議控制使用數量和圖片大小

雪碧圖（CSS Sprite）

雪碧圖也是為了減少網絡請求，將小圖標和背景圖像合並到一張圖片上，然后利用 css 的 background-positon 或者 img 的 clip 來顯示需要顯示的圖片部分

• 優點

  • 減少加載網頁圖片時對服務器的請求次數 使用起來不夠靈活 標簽更復雜 如果需要多個尺寸

• 缺點

  • 性能問題
    • 內存占用 上邊已經說過圖片在內存中的顯示，雖然我們需要的僅僅是其中一部分
    • 維護困難

• 適用場景

  • 圖標

iconfont

Iconfont 是采用字體的方式來做圖標。它的原理就是將很多 icon 做成字體庫，通過樣式或者字體對應的字符集來顯示這個 icon。

• 優點

  • 減少請求次數，將多個 icon 合並到一個字體文件中，從而提高網頁性能；
  • 自由的變化大小和顏色
  • 矢量圖不失真
  • 兼容性好

• 缺點

  • 單色（可以彩色，但是失去了圖片字體的優勢）
  • 維護成本高
  • 不適合表示復雜圖形，僅適用於圖標
  • 不利於首屏顯示

• 適用場景

  • 圖標
    
    

額外一些圖片相關知識

保存為 web 格式

• 保存好的圖片，分為兩個部分，

  • 1、圖片顯示內容（我們上邊所有的描述都是基於此）

  • 2、圖片的元數據 圖片除了格式，寬高等基礎數據之外。 相片類圖片還包含了很多的文件簡介內容，入創作者，時間，位置等等信息。 保存為 web 使用格式會刪除掉圖片元數據 這樣既減小了請求消耗，又保護的用戶隱私。

    前端在使用圖片，一定要保存為web格式。既減少網絡帶寬，也方式用戶信息泄露。

webP

WebP 格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有 JPEG的2/3，並能節省大量的服務器寬帶資源和數據空間。Facebook Ebay 等知名網站已經開始測試並使用 WebP 格式。

WebP 既支持有損壓縮也支持無損壓縮。相較編碼 JPEG 文件，編碼同樣質量的WebP 文件需要占用更少的計算資源。

• 優點
  • 更好的壓縮算法
• 缺點
  • 兼容性
  • 瀏覽圖片信息

gzip 壓縮

在真實環境中，為了減小網絡請求，服務端一般會開啟 gzip 壓縮。

因為圖片相對尺寸較大，而且基本上常用的圖片格式已經被做過壓縮。

前端服務器 gzip 壓縮時候，不要對圖片類型開啟