在我們的日常開發(fā)中。必不可少會使用很多種圖片。
我們需要根據(jù)業(yè)務場景來選擇所使用的圖片類型仍律。
這里我整理了一些常用圖片類型、他們的優(yōu)缺點以及建議的使用場景实柠。

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

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

• 每一個像素在內(nèi)存中需要使用 4 個字節(jié)，分別為 RGBA

• 1280*720*4 約等于 3.5M

• 圖片格式，就是計算機存儲圖片數(shù)據(jù)的方式

根據(jù)圖片數(shù)據(jù)存儲過程中草则，是否對數(shù)據(jù)進行壓縮處理钢拧。將圖片分為兩類

• 無壓縮存儲
• 壓縮存儲
  
  
  

無壓縮存儲

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

代表格式：

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

• 支持 1源内、4、8份殿、24 位深度
• 常用深度
  • 8 位為索引模式
  • 24 位膜钓，32 位使用 RGB 模式
• 數(shù)據(jù)掃描方式：從上到下，從左到右

• 優(yōu)點：
  • 未壓縮格式卿嘲，算法簡單颂斜，對各個平臺兼容性良好。平臺層應用較多拾枣。
  • 不需要要任何依賴就可以打開
• 缺點：
  • 不要在網(wǎng)頁中使用

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

壓縮存儲

壓縮存儲梅肤，就是在存儲過程中通過壓縮算法司蔬，將圖片數(shù)據(jù)進行壓縮，使得相同分辨率凭语、相近質(zhì)量的情況下葱她×冒牵縮小圖片所占空間似扔。

既然在存儲的時候壓縮，那么在使用的時候搓谆，就需要先將壓縮后的圖片炒辉，解壓然后放在內(nèi)存中。

圖片壓縮的本質(zhì)就是：以時間換空間

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

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

對于圖片數(shù)據(jù)的壓縮缝裤，也分為兩種

• 無損壓縮
• 有損壓縮
  
  
  

無損壓縮

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

保證圖片解壓之后颊郎，可以完全追溯到源數(shù)據(jù)憋飞。

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

簡單說就是，在某一個緩沖區(qū)內(nèi)姆吭，找到較長的重復數(shù)據(jù)榛做。然后替換成較短的索引值。

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

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

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

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

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

• 布爾透明

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

• 支持交錯

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

• 優(yōu)點：

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

• 缺點：

  • 僅布爾透明

• 適用場景：

  • logo、icon 等
  • 動圖

PNG

• 全稱便攜式網(wǎng)絡圖形（外語全稱：Portable Network Graphics）

• png 格式擁有比 git 更優(yōu)的算法

• 支持交錯

• png8

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

• png24

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

• 缺點

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

• 優(yōu)點

  • 高保真

• 使用場景

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

有損壓縮

有損壓縮腾窝，就是在壓縮過程中缀踪，對圖片造成不可逆的質(zhì)量損壞的壓縮方式。

代表格式 jpg

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

• jpg===jpeg

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

• 不支持動畫

• 可選壓縮質(zhì)量
  JPEG 圖片格式的設計目標循集，是在不影響人類可分辨的圖片質(zhì)量的前提下唇敞，盡可能的壓縮文件大小。
  JPEG 圖片在顯示時候咒彤，使用 YCbCr 模式疆柔，利用人眼對亮度敏感大于色彩敏感。RGB 格式轉(zhuǎn)換為 YCbCr 模式镶柱。
  JPEG 的圖片的優(yōu)點旷档，是采用了直接色，得益于更豐富的色彩奸例，JPEG 非常適合用來存儲照片彬犯，用來表達更生動的圖像效果向楼，比如顏色漸變。

• 支持交錯
  連續(xù)類似 PNG 交錯谐区，會先顯示模糊輪廓

與 GIF 相比湖蜕，JPEG 不適合用來存儲企業(yè)Logo、線框宋列、純色類的圖昭抒。因為有損壓縮會導致圖片模糊，而直接色的選用炼杖，又會導致圖片文件更大灭返。

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

• 不適用場景：

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

• 適用場景

  • 照片
  • 復雜 banner

矢量圖片

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

• svg（Scalable Vector Graphics）

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

  它是基于 XML蚓聘，由萬維網(wǎng)聯(lián)盟進行開發(fā)的垄提。一種開放標準的矢量圖形語言堵漱，可任意放大圖形顯示，邊緣異常清晰堰怨，文字在 SVG 圖像中保留可編輯和可搜尋的狀態(tài)侣签，沒有字體的限制塘装，生成的文件很小，下載很快硝岗，十分適合用于設計高分辨率的 Web 圖形頁面

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

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

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

• 優(yōu)點：

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

• 缺點：

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

• 應用場景

  • logo、圖標

其他

base64

base64 本身不屬于圖片格式荔棉，是以字符串格式來保存圖片數(shù)據(jù)的一種方式

標準的 ascii 字符中 0-31 及 127闹炉，屬于控制字符，它們并沒有特定的圖形顯示润樱，但會依不同的應用程序渣触，而對文本顯示有不同的影響。

在網(wǎng)絡上交換數(shù)據(jù)時壹若，往往要經(jīng)過多個路由設備昵观，由于不同的設備對字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯誤舌稀，這是不利于傳輸?shù)陌∪Ｋ裕覀兘?jīng)常講源數(shù)據(jù)做 base64 處理

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

Base64 適用于小段內(nèi)容的編碼，比如數(shù)字證書簽名睡腿、Cookie 的內(nèi)容等语御。

網(wǎng)頁中，我們也使用 base64 來講較小的圖片轉(zhuǎn)換為字符串數(shù)據(jù)席怪，保存在 css 或者 html 中应闯。從而減少網(wǎng)絡請求的次數(shù)

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

Base64 并不適合直接放在 URL 里傳輸挂捻，因為 URL 編碼器會把標準 Base64 中的“/”和“+”字符轉(zhuǎn)義

• 優(yōu)點
  • 減少網(wǎng)絡請求
• 缺點
  • base64 轉(zhuǎn)換規(guī)則導致數(shù)據(jù)比源數(shù)據(jù)大 1/3
  • 字符串內(nèi)容存儲在 css 或者 js 中碉纺，會影響 css 樹解析速度或者 js 解釋器執(zhí)行速度

建議控制使用數(shù)量和圖片大小

雪碧圖（CSS Sprite）

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

• 優(yōu)點

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

• 缺點

  • 性能問題
    • 內(nèi)存占用 上邊已經(jīng)說過圖片在內(nèi)存中的顯示骨田，雖然我們需要的僅僅是其中一部分
    • 維護困難

• 適用場景

  • 圖標

iconfont

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

• 優(yōu)點

  • 減少請求次數(shù)，將多個 icon 合并到一個字體文件中醋火，從而提高網(wǎng)頁性能悠汽；
  • 自由的變化大小和顏色
  • 矢量圖不失真
  • 兼容性好

• 缺點

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

• 適用場景

  • 圖標
    
    
    

額外一些圖片相關知識

保存為 web 格式

• 保存好的圖片柿冲，分為兩個部分殖氏，

  • 1、圖片顯示內(nèi)容（我們上邊所有的描述都是基于此）

  • 2姻采、圖片的元數(shù)據(jù)
    圖片除了格式雅采，寬高等基礎數(shù)據(jù)之外。
    相片類圖片還包含了很多的文件簡介內(nèi)容慨亲，入創(chuàng)作者婚瓜，時間，位置等等信息刑棵。
    保存為 web 使用格式會刪除掉圖片元數(shù)據(jù)
    這樣既減小了請求消耗巴刻，又保護的用戶隱私。

    前端在使用圖片蛉签，一定要保存為web格式胡陪。既減少網(wǎng)絡帶寬，也方式用戶信息泄露碍舍。

webP

WebP 格式柠座，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有 JPEG的2/3片橡，并能節(jié)省大量的服務器寬帶資源和數(shù)據(jù)空間妈经。Facebook Ebay 等知名網(wǎng)站已經(jīng)開始測試并使用 WebP 格式。



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

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

gzip 壓縮

在真實環(huán)境中经瓷，為了減小網(wǎng)絡請求爆哑，服務端一般會開啟 gzip 壓縮。

因為圖片相對尺寸較大舆吮，而且基本上常用的圖片格式已經(jīng)被做過壓縮揭朝。

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