每一個前端工程師都應該瞭解的圖片知識

轉自：https://mp.weixin.qq.com/s/j6V5CLeHJzU5WxysmnQUqg

 

 

前言

隨着web的發展，網站資源的流量也變得愈來愈大。據統計，60% 的網站流量均來自網站圖片，可見對圖片合理優化能夠大幅影響網站流量，減少帶寬消耗和服務器壓力。

有時候你花大力氣去配置 webpack 使打包體積減小，不如好好優化幾張圖片，這篇文章就是讓你明白如何選擇正確的圖片，而且讓你明白這麼多圖片格式，在什麼場景下使用什麼格式，若是想看答案，那麼直接滑到文末看圖便可。

基本概念

在進入正題以前，先聊聊一些圖片相關的基本概念。

一張照片（位圖）不斷放大以後，會看到一個個小格子，這些小格子，叫像素。

一個格子（像素），在計算機中，用二進制來表示，使用的二進制位數越多，像素的色彩就越豐富。

舉個🌰，若是一個像素用一位二進制數表示，能有多少種顏色呢？

兩種，一個二進制位，要不放 0（表示黑色），要不放 1（表示白色）

下圖展現了一個像素二進制的位數最多能夠展現多少種顏色。

在對圖片有了基本的瞭解以後，接下來對圖片進行分下類，有利於理解各類格式圖片的特色。

根據圖的類型分類

• 點陣圖(位圖)

• 矢量圖

位圖(點陣圖)

位圖，也叫作點陣圖，像素圖。構成點陣圖的最小單位是像素，位圖就是由像素陣列的排列來實現其顯示效果的，每一個像素有本身的顏色信息，在對位圖圖像進行編輯操做的時候，可操做的對象是每一個像素，咱們能夠改變圖像的色相、飽和度、透明度，從而改變圖像的顯示效果。

前面介紹中的那種不斷放大會有小格子的圖就是屬於位圖。

常見的好比：jpg、png、webp等，咱們平時遇到的大多數都是位圖。

矢量圖

矢量圖，也叫作向量圖。矢量圖並不紀錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的算法，當你打開一幅矢量圖的時候，軟件對圖形對應的函數進行運算，將運算結果圖形的形狀和顏色顯示給你看。

不管顯示畫面是大仍是小，畫面上的對象對應的算法是不變的，因此，即便對畫面進行倍數至關大的縮放，其顯示效果仍然相同(不失真)。

常見的就是 svg 格式的。

根據壓縮分類

• 無壓縮。

• 無損壓縮。

• 有損壓縮。

無壓縮

無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。BMP 格式就是其中之一。

有損壓縮

指在壓縮文件大小的過程當中，損失了一部分圖片的信息，也即下降了圖片的質量，而且這種損失是不可逆的，咱們不可能從一個有損壓縮過的圖片中恢復出完整的圖片。

常見的有損壓縮手段，是按照必定的算法將臨近的像素點進行合併。壓縮算法不會對圖片全部的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼沒法識別的圖片細節。所以有損壓縮能夠在同等圖片質量的狀況下大幅下降圖片的尺寸。其中的表明是 jpg。

無損壓縮

在壓縮圖片的過程當中，圖片的質量沒有任何損耗。咱們任什麼時候候均可以從無損壓縮過的圖片中恢復出原來的信息。

壓縮算法對圖片的全部的數據進行編碼壓縮，能在保證圖片的質量的同時下降圖片的尺寸。

png 是其中的表明。

小結

• 使用有損壓縮處理圖像，是去除某些像素數據，沒法找回原圖。

• 使用無損處理圖像，是對像素數據進行壓縮，能夠找回原圖。

常見的圖片格式解析

GIF

關鍵詞：無損壓縮、索引色、透明、動畫

GIF(Graphics Interchange Format) 的原義是「圖像互換格式」，是一種基於 LZW 算法連續色調的無損的基於索引色的壓縮格式。其壓縮率通常在 50% 左右，它不屬於任何應用程序因此幾乎全部相關軟件都支持它，公共領域有大量的軟件在使用 GIF 圖像文件。

GIF 是一種無損壓縮，因此它只是對像素數據進行壓縮，其實 LZW 算法只是一個壓縮數據的算法，若是你懂哈夫曼算法的話，可能就比較好理解壓縮數據是怎麼回事兒了。

GIF 的特性是幀動畫。

相比古老的bmp格式，尺寸較小，並且支持透明(不支持半透明，由於不支持 Alpha 透明通道 )和動畫。

優點

1. 優秀的壓縮算法使其在必定程度上保證圖像質量的同時將體積變得很小。

2. 可插入多幀，從而實現動畫效果。

3. 可設置透明色以產生對象浮現於背景之上的效果。

缺點

因爲採用了 8 位壓縮，最多隻能處理 256 種顏色，故不宜應用於真彩色(文末的附錄有解釋)圖片。

適合場景

色彩簡單的 logo、icon、線框圖、文字輸出等

JPG/JPEG

關鍵詞：有損壓縮、直接色、適合大圖、體積小

JPEG 格式是最多見的一種圖像格式，文件後輟名爲「.JPEG」或「.jpg」，JPEG 能夠說是人們最熟悉的圖檔格式，相信在數字相機普及的如今，幾乎每臺數字相機、照相手機均可以（甚至只能）輸出 JPEG 格式的圖檔。

JPEG 是一種很典型的使用有損壓縮圖像格式，也就是說使用者每次進行 JPEG 的存檔動做後，圖檔的一些內容細節都會遭到永久性的破壞，尤爲是使用太高的壓縮比例，將使最終解壓縮後恢復的圖像質量明顯下降，若是追求高品質圖像，不宜採用太高壓縮比例。

JPEG 圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，儘量的壓縮文件大小。

Baseline JPEG 和 Progressive JPEG

JPEG 有兩種保存方式：Baseline JPEG（標準型）、Progressive JPEG（漸進式）。兩種格式有相同尺寸以及圖像數據，他們的擴展名也是相同的，惟一的區別是兩者顯示的方式不一樣。

Baseline JPEG

Baseline JPEG 文件存儲方式是按從上到下的掃描方式，把每一行順序的保存在 JPEG 文件中。打開這個文件顯示它的內容時，數據將按照存儲時的順序從上到下一行一行的被顯示出來，直到全部的數據都被讀完，就完成了整張圖片的顯示。若是文件較大或者網絡下載速度較慢，那麼就會看到圖片被一行行加載的效果，這種格式的JPEG沒有什麼優勢，所以，通常都推薦使用Progressive JPEG。

Progressive JPEG

和 Baseline 一遍掃描不一樣，Progressive JPEG 文件包含屢次掃描，這些掃描順尋的存儲在 JPEG 文件中。打開文件過程當中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增長，圖片變得愈來愈清晰。這種格式的主要優勢是在網絡較慢的狀況下，能夠看到圖片的輪廓知道正在加載的圖片大概是什麼。在一些網站打開較大圖片時，你就會注意到這種技術。

漸進式圖片帶來的好處是可讓用戶在沒有下載完圖片就能夠看到最終圖像的大體輪廓，必定程度上能夠提高用戶體驗（瀑布流的網站建議仍是使用標準型的）。

更多關於 Baseline JPEG 和 Progressive JPEG 請看這篇文章：使用漸進式JPEG來提高用戶體驗。

優勢

• 能夠支持 24bit 真彩色，廣泛應用於須要連續色調的圖像如色彩豐富的圖片、照片等；

• 可利用可變的壓縮比以控制文件大小；

• 支持交錯（對於漸近式 JPEG 文件）；

缺點

• JPEG 不適合用來存儲企業 Logo、線框類的圖。由於有損壓縮會致使圖片模糊，而直接色的選用，又會致使圖片文件較GIF更大。

• 有損耗壓縮會使原始圖片數據質量降低。

• JPEG 圖像不支持透明度處理，透明圖片須要召喚 PNG 來呈現。

適合場景

JPG 適用於呈現色彩豐富的圖片，在咱們平常開發中，JPG 圖片常常做爲大的背景圖、輪播圖或 Banner 圖出現。

GIF vs JPEG

因爲 GIF 與 JPEG 有着如此不一樣的特性，所以咱們能夠很輕易的選擇什麼時候該用哪種格式來輸出咱們須要的圖檔：當圖片擁有豐富的色彩時，而且沒有明顯銳利反差的邊緣線條時，選擇 JPEG 能夠獲得最好的輸出結果，照片就是最好的例子；當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能須要透明背景時，GIF 是很好的選擇，檔案小、畫質又精美。

PNG

關鍵詞：無損壓縮、索引色、支持透明、體積大

便攜式網絡圖形（簡稱 PNG，英語全稱：Portable Network Graphics）。PNG 可以提供長度比 GIF 小30%的無損壓縮圖像文件。它同時提供 24 位和 32 位真彩色圖像支持以及其餘諸多技術性支持。因爲PNG 優秀的特色，PNG 格式圖片能夠稱爲「網頁設計專用格式」。PNG 最初的開發目的是爲了做爲 GIF 的替代方案的，做爲作新開發的影像傳輸文件格式，PNG 一樣使用了無損壓縮格式，事實上 PNG 的開發就是由於 GIF 所使用的無損壓縮格式專利問題而誕生的。

PNG 有三種形式，下面分別介紹一下他們的區別。

PNG-8

PNG-8 是 PNG 的索引色版本。PNG-8 是無損的、使用索引色的、點陣圖。

PNG-8 是很是好的 GIF 替代者，在可能的狀況下，應該儘量的使用 PNG-8 而不是 GIF，由於在相同的圖片效果下，PNG-8 具備更小的文件體積。除此以外，PNG-8 還支持透明度的調節，而 GIF 並不支持。 如今，除非須要動畫的支持，不然咱們沒有理由使用 GIF 而不是 PNG-8。

PNG-24

PNG-24 是 PNG 的直接色版本。PNG-24 是無損的、使用直接色的、點陣圖。

無損的、使用直接色的點陣圖，聽起來很是像 BMP，是的，從顯示效果上來看，PNG-24 跟 BMP 沒有不一樣。PNG-24 的優勢在於，它壓縮了圖片的數據，使得一樣效果的圖片，PNG-24 格式的文件大小要比 BMP 小得多。固然，PNG24 的圖片仍是要比 JPEG、GIF、PNG-8 大得多。

雖然 PNG-24 的一個很大的目標，是替換 JPEG 的使用。但通常而言，PNG-24 的文件大小是 JPEG 的五倍之多，而顯示效果則一般只能得到一點點提高。因此，只有在你不在意圖片的文件體積，而想要最好的顯示效果時，才應該使用 PNG-24 格式。

另外，PNG-24 跟 PNG-8 同樣，是支持圖片透明度的。

理論上來講，當你追求最佳的顯示效果、而且不在乎文件體積大小時，是推薦使用 PNG-24 的。

實踐當中，爲了規避體積的問題，咱們通常不用PNG去處理較複雜的圖像。當咱們遇到適合 PNG 的場景時，也會優先選擇更爲小巧的 PNG-8。

PNG-32

PNG-32 跟 PNG-24 的區別就是多了一個 Alpha 通道，用來支持半透明，其餘的跟 PNG-24 基本同樣。

優勢：

• 支持高級別無損耗壓縮；

• 支持 alpha 通道透明度；

• 支持 256 色調色板技術以產生小體積文件

• 最高支持 24 位真彩色圖像以及 8 位灰度圖像。

• 支持圖像亮度的 Gamma 校準信息。

• 支持存儲附加文本信息，以保留圖像名稱、做者、著做權、創做時間、註釋等信息。

• 漸近顯示和流式讀寫，適合在網絡傳輸中快速顯示預覽效果後再展現全貌。

缺點

• 較舊的瀏覽器 IE6- 和程序可能不支持 PNG 文件；

• 與 JPEG 的有損耗壓縮相比，PNG 提供的壓縮量較少；

• 與 GIF 格式相比，對多圖像文件或動畫文件不提供任何支持。

適合場景

呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等。

關於 PNG 的小知識點

PNG 分爲兩種，一種是 Index，一種是 RGB。Index 記錄同一種顏色的值和出現的位置（簡單地說，好比一個 2px*2px 的超級小圖，從左往右從上往下依次的顏色是紅，白，白，紅，那麼記錄的方法就是「紅-1,4；白-2,3」）；而 RGB 圖則把全部像素的色值依次記錄下來（即「紅，白，白紅」）。對於相同的圖片，Index 格式的尺寸老是小於 RGB。

其中 PNG-8 就是 Index，稱做爲索引色，而 PNG-24 和 PNG-32 是 RGB 形式，也可稱做爲直接色。

由於 PNG 是無損壓縮，保留了圖片須要的全部信息，因此索引色是能夠轉化爲直接色的。

WebP

關鍵詞：年輕、有損、無損、兼容性

WebP 是谷歌開發的一種新圖片格式，WebP 是同時支持有損和無損壓縮的、使用直接色的、點陣圖。

從名字就能夠看出來它是爲 Web 而生的，什麼叫爲 Web 而生呢？就是說相同質量的圖片，WebP 具備更小的文件體積。如今網站上充滿了大量的圖片，若是可以下降每個圖片的文件大小，那麼將大大減小瀏覽器和服務器之間的數據傳輸量，進而下降訪問延遲，提高訪問體驗。

• 在無損壓縮的狀況下，相同質量的 WebP 圖片，文件大小要比 PNG 小26%；

• 在有損壓縮的狀況下，具備相同圖片精度的 WebP 圖片，文件大小要比 JPEG 小 25%~34%；

• WebP 圖片格式支持圖片透明度，一個無損壓縮的 WebP 圖片，若是要支持透明度只須要 22% 的格外文件大小。

能夠看到 WebP 集多種圖片文件格式的優勢於一身，因此在圖片的質量和性能上，WebP 無疑是贏家。

不過 WebP 有有一個缺點，致使還不能大規模使用，那就是兼容性。

這是我 2019 年 5 月截的圖，能夠看到 IE 和 Safari 全部的版本都是不支持的(這是硬傷)， 火狐也是最新的幾個版本纔開始支持，年輕有年輕的代價。

此外，WebP 與 JPG 相比較，編碼速度慢 10 倍，解碼速度慢 1.5 倍，而絕大部分的網絡應用中，圖片都是靜態文件，因此對於用戶使用只須要關心解碼速度便可。但實際上，WebP 雖然會增長額外的解碼時間，可是因爲減小了文件體積，縮短了加載的時間，實際上文件的渲染速度反而變快了。

使用場景

**WebP **集多種圖片文件格式的優勢於一身，因此基本上適合各類場景，可是因爲兼容性很差，因此咱們若是大規模的適用 WebP，必定要在 Safari 和 IE 裏面施行降級。

這是淘寶商品圖片是我在 Chrome 打開的例子，能夠看到圖片的後綴是 .jpg_.webp，若是這張圖片在 Safari 打開後綴就變爲了 .jpg，這是一種降級方案，其餘的方案請讀者自行研究，不在本文討論中。

APNG

APNG（Animated Portable Network Graphics）顧名思義是基於 PNG 格式擴展的一種動畫格式，增長了對動畫圖像的支持，同時加入了 24 位圖像和 8 位 Alpha 透明度的支持，這意味着動畫將擁有更好的質量，其誕生的目的是爲了替代老舊的 GIF 格式，但它目前並無得到 PNG 組織官方的承認。

APNG 第1幀爲標準 PNG 圖像，剩餘的動畫和幀速等數據放在 PNG 擴展數據塊，所以只支持原版 PNG 的軟件會正確顯示第 1 幀。

在兼容性方面絕大部分瀏覽器都仍是支持的，若是之前是由於動畫的緣由用 GIF 的，如今用 APNG 是一個不錯的選擇，其餘的特性是跟 PNG 樣的，由於 APNG 只是一個 PNG 的擴展。

更多 APNG 相關的能夠看 APNG 那些事

SVG

關鍵詞：無損、矢量圖、體積小、不失真、兼容性好

可縮放矢量圖形，英文 Scalable Vector Graphics(SVG)，是無損的、矢量圖。

SVG是一種用 XML 定義的語言，用來描述二維矢量及矢量/柵格圖形。SVG提供了3種類型的圖形對象：矢量圖形（例如：由直線和曲線組成的路徑）、圖象、文本。圖形對象還可進行分組、添加樣式、變換、組合等操做，特徵集包括嵌套變換、剪切路徑、alpha 蒙板、濾鏡效果、模板對象和其它擴展。

SVG 跟上面這些圖片格式最大的不一樣，是 SVG 是矢量圖。這意味着 SVG 圖片由直線和曲線以及繪製它們的方法組成。當你放大一個 SVG 圖片的時候，你看到的仍是線和曲線，而不會出現像素點。這意味着 SVG 圖片在放大時，不會失真，因此它很是適合用來繪製企業 Logo、Icon 等。

優勢：

• SVG 可被很是多的工具讀取和修改（好比記事本）。

• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

• SVG 是可伸縮的。

• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）。

• SVG 能夠與 JavaScript 技術一塊兒運行

• SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下能夠實現位圖格式中相似文字陰影的效果。

• SVG圖形格式能夠用來動態生成圖形。例如，可用 SVG 動態生成具備交互功能的地圖，嵌入網頁中，並顯示給終端用戶。

缺點：

• 渲染成本比較高，對於性能有影響。

• SVG 的學習成本比較高，由於它是可編程的。

適用場景

一、高保真度複雜矢量文檔已經是並將繼續是 SVG 的最佳點。它很是詳細，適用於查看和打印，能夠是獨立的，也能夠嵌入到網頁中
二、在WEB項目中的平面圖繪製，如須要繪製線，多邊形，圖片等。
三、數據可視化。

SVG 只是 Web 開發經常使用的一種矢量圖，其實矢量圖常見還有幾種格式：BW 格式、AI 格式、CDR 格式、ICO 格式。

總結

本文詳細的介紹了常見的圖片格式：GIF、JPEG、PNG、WebP、APNG、SVG，介紹了他們是什麼，有什麼用，優勢和缺點，以及使用場景。因爲圖片相關的知識確實太多了，我只是把一些我以爲必要的寫出來，下面在網上找到了一個選擇圖片過程的表格和圖，下次不知道選擇什麼圖片格式，直接看圖就行。

其中 APNG 和 WebP 格式出現的較晚，還沒有被 Web 標準所採納，只有在特定平臺或瀏覽器環境能夠預知的狀況下加以採用。圖片格式選擇過程以下：

附加內容

如下內容大多來自於網絡，因爲我在寫這篇文章的過程當中看到了這些，我以爲有必要了解一下，因此我將這些貼出來，跟文章內容關係不大，能夠不看。因爲擔憂文章太長，我把附加內容當作一篇文章發佈了，想看的請移步至：一些圖片相關的基礎知識。

參考連接

• 趙鑫

• 真彩色與僞彩色、直接色的區別

• 10 個免費的圖像壓縮優化工具和腳本

• 網頁中圖片格式的選擇