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

基本概念

在進(jìn)入正題之前,，先聊聊一些圖片相關(guān)的基本概念。

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

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

舉個??,，如果一個像素用一位二進(jìn)制數(shù)表示,，能有多少種顏色呢？

兩種,，一個二進(jìn)制位,，要不放 0（表示黑色），要不放 1（表示白色）

下圖展示了一個像素二進(jìn)制的位數(shù)最多可以展示多少種顏色,。

在對圖片有了基本的了解之后,，接下來對圖片進(jìn)行分下類，有利于理解各種格式圖片的特點,。

根據(jù)圖的類型分類

• 點陣圖(位圖)

• 矢量圖

位圖(點陣圖)

位圖,，也叫做點陣圖，像素圖,。構(gòu)成點陣圖的最小單位是像素,，位圖就是由像素陣列的排列來實現(xiàn)其顯示效果的，每個像素有自己的顏色信息,，在對位圖圖像進(jìn)行編輯操作的時候,，可操作的對象是每個像素，我們可以改變圖像的色相,、飽和度,、透明度，從而改變圖像的顯示效果,。

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

常見的比如：jpg、png,、webp等,，我們平時遇到的大多數(shù)都是位圖。

矢量圖

矢量圖,，也叫做向量圖,。矢量圖并不紀(jì)錄畫面上每一點的信息，而是紀(jì)錄了元素形狀及顏色的算法,，當(dāng)你打開一幅矢量圖的時候,，軟件對圖形對應(yīng)的函數(shù)進(jìn)行運算,，將運算結(jié)果圖形的形狀和顏色顯示給你看。

無論顯示畫面是大還是小,，畫面上的對象對應(yīng)的算法是不變的,，所以，即使對畫面進(jìn)行倍數(shù)相當(dāng)大的縮放,，其顯示效果仍然相同(不失真),。

常見的就是 svg 格式的。

根據(jù)壓縮分類

• 無壓縮,。

• 無損壓縮,。

• 有損壓縮。

無壓縮

無壓縮的圖片格式不對圖片數(shù)據(jù)進(jìn)行壓縮處理,，能準(zhǔn)確地呈現(xiàn)原圖片,。BMP 格式就是其中之一。

有損壓縮

指在壓縮文件大小的過程中,，損失了一部分圖片的信息,，也即降低了圖片的質(zhì)量，并且這種損失是不可逆的,，我們不可能從一個有損壓縮過的圖片中恢復(fù)出完整的圖片,。

常見的有損壓縮手段，是按照一定的算法將臨近的像素點進(jìn)行合并,。壓縮算法不會對圖片所有的數(shù)據(jù)進(jìn)行編碼壓縮,，而是在壓縮的時候，去除了人眼無法識別的圖片細(xì)節(jié),。因此有損壓縮可以在同等圖片質(zhì)量的情況下大幅降低圖片的尺寸,。其中的代表是 jpg。

無損壓縮

在壓縮圖片的過程中,，圖片的質(zhì)量沒有任何損耗,。我們?nèi)魏螘r候都可以從無損壓縮過的圖片中恢復(fù)出原來的信息。

壓縮算法對圖片的所有的數(shù)據(jù)進(jìn)行編碼壓縮,，能在保證圖片的質(zhì)量的同時降低圖片的尺寸,。

png 是其中的代表。

小結(jié)

• 使用有損壓縮處理圖像,，是去除某些像素數(shù)據(jù),，無法找回原圖。

• 使用無損處理圖像,，是對像素數(shù)據(jù)進(jìn)行壓縮,，可以找回原圖。

常見的圖片格式解析

GIF

關(guān)鍵詞：無損壓縮,、索引色,、透明,、動畫

GIF(Graphics Interchange Format) 的原義是“圖像互換格式”，是一種基于 LZW 算法連續(xù)色調(diào)的無損的基于索引色的壓縮格式,。其壓縮率一般在 50% 左右,，它不屬于任何應(yīng)用程序所以幾乎所有相關(guān)軟件都支持它，公共領(lǐng)域有大量的軟件在使用 GIF 圖像文件,。

GIF 是一種無損壓縮,，所以它只是對像素數(shù)據(jù)進(jìn)行壓縮，其實 LZW 算法只是一個壓縮數(shù)據(jù)的算法,，如果你懂哈夫曼算法的話，可能就比較好理解壓縮數(shù)據(jù)是怎么回事兒了,。

GIF 的特性是幀動畫,。

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

優(yōu)勢

1. 優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時將體積變得很小,。

2. 可插入多幀,，從而實現(xiàn)動畫效果。

3. 可設(shè)置透明色以產(chǎn)生對象浮現(xiàn)于背景之上的效果,。

缺點

由于采用了 8 位壓縮,，最多只能處理 256 種顏色，故不宜應(yīng)用于真彩色(文末的附錄有解釋)圖片,。

適合場景

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

JPG/JPEG

關(guān)鍵詞：有損壓縮,、直接色、適合大圖,、體積小

JPEG 格式是最常見的一種圖像格式,，文件后輟名為“.JPEG”或“.jpg”，JPEG 可以說是人們最熟悉的圖檔格式,，相信在數(shù)字相機普及的現(xiàn)在,，幾乎每臺數(shù)字相機、照相手機都可以（甚至只能）輸出 JPEG 格式的圖檔,。

JPEG 是一種很典型的使用有損壓縮圖像格式,，也就是說使用者每次進(jìn)行 JPEG 的存檔動作后，圖檔的一些內(nèi)容細(xì)節(jié)都會遭到永久性的破壞,，尤其是使用過高的壓縮比例,，將使最終解壓縮后恢復(fù)的圖像質(zhì)量明顯降低,，如果追求高品質(zhì)圖像，不宜采用過高壓縮比例,。

JPEG 圖片格式的設(shè)計目標(biāo),，是在不影響人類可分辨的圖片質(zhì)量的前提下，盡可能的壓縮文件大小,。

Baseline JPEG 和 Progressive JPEG

JPEG 有兩種保存方式：Baseline JPEG（標(biāo)準(zhǔn)型）,、Progressive JPEG（漸進(jìn)式）。兩種格式有相同尺寸以及圖像數(shù)據(jù),，他們的擴(kuò)展名也是相同的,，唯一的區(qū)別是二者顯示的方式不同。

Baseline JPEG

Baseline JPEG 文件存儲方式是按從上到下的掃描方式,，把每一行順序的保存在 JPEG 文件中,。打開這個文件顯示它的內(nèi)容時，數(shù)據(jù)將按照存儲時的順序從上到下一行一行的被顯示出來,，直到所有的數(shù)據(jù)都被讀完,，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)下載速度較慢,，那么就會看到圖片被一行行加載的效果,，這種格式的JPEG沒有什么優(yōu)點，因此,，一般都推薦使用Progressive JPEG,。

Progressive JPEG

和 Baseline 一遍掃描不同，Progressive JPEG 文件包含多次掃描,，這些掃描順尋的存儲在 JPEG 文件中,。打開文件過程中，會先顯示整個圖片的模糊輪廓,，隨著掃描次數(shù)的增加,，圖片變得越來越清晰。這種格式的主要優(yōu)點是在網(wǎng)絡(luò)較慢的情況下,，可以看到圖片的輪廓知道正在加載的圖片大概是什么,。在一些網(wǎng)站打開較大圖片時，你就會注意到這種技術(shù),。

漸進(jìn)式圖片帶來的好處是可以讓用戶在沒有下載完圖片就可以看到最終圖像的大致輪廓,，一定程度上可以提升用戶體驗（瀑布流的網(wǎng)站建議還是使用標(biāo)準(zhǔn)型的）。

更多關(guān)于 Baseline JPEG 和 Progressive JPEG 請看這篇文章：使用漸進(jìn)式JPEG來提升用戶體驗,。

優(yōu)點

• 可以支持 24bit 真彩色,，普遍應(yīng)用于需要連續(xù)色調(diào)的圖像如色彩豐富的圖片、照片等；

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

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

缺點

• JPEG 不適合用來存儲企業(yè) Logo,、線框類的圖,。因為有損壓縮會導(dǎo)致圖片模糊，而直接色的選用,，又會導(dǎo)致圖片文件較GIF更大,。

• 有損耗壓縮會使原始圖片數(shù)據(jù)質(zhì)量下降。

• JPEG 圖像不支持透明度處理,，透明圖片需要召喚 PNG 來呈現(xiàn),。

適合場景

JPG 適用于呈現(xiàn)色彩豐富的圖片，在我們?nèi)粘ｉ_發(fā)中,，JPG 圖片經(jīng)常作為大的背景圖,、輪播圖或 Banner 圖出現(xiàn)。

GIF vs JPEG

由于 GIF 與 JPEG 有著如此不同的特性,，因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔：當(dāng)圖片擁有豐富的色彩時，并且沒有明顯銳利反差的邊緣線條時,，選擇 JPEG 可以得到最好的輸出結(jié)果,，照片就是最好的例子；當(dāng)圖片是擁有明確邊緣的線條圖,、沒有使用太多色彩,、甚至可能需要透明背景時，GIF 是很好的選擇,，檔案小,、畫質(zhì)又精美。

PNG

關(guān)鍵詞：無損壓縮,、索引色,、支持透明、體積大

便攜式網(wǎng)絡(luò)圖形（簡稱 PNG,，英語全稱：Portable Network Graphics）,。PNG 能夠提供長度比 GIF 小30%的無損壓縮圖像文件。它同時提供 24 位和 32 位真彩色圖像支持以及其他諸多技術(shù)性支持,。由于PNG 優(yōu)秀的特點,，PNG 格式圖片可以稱為“網(wǎng)頁設(shè)計專用格式”。PNG 最初的開發(fā)目的是為了作為 GIF 的替代方案的,，作為做新開發(fā)的影像傳輸文件格式,，PNG 同樣使用了無損壓縮格式，事實上 PNG 的開發(fā)就是因為 GIF 所使用的無損壓縮格式專利問題而誕生的。

PNG 有三種形式,，下面分別介紹一下他們的區(qū)別,。

PNG-8

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

PNG-8 是非常好的 GIF 替代者,，在可能的情況下,，應(yīng)該盡可能的使用 PNG-8 而不是 GIF，因為在相同的圖片效果下,，PNG-8 具有更小的文件體積,。除此之外，PNG-8 還支持透明度的調(diào)節(jié),，而 GIF 并不支持?，F(xiàn)在，除非需要動畫的支持,，否則我們沒有理由使用 GIF 而不是 PNG-8,。

PNG-24

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

無損的,、使用直接色的點陣圖,，聽起來非常像 BMP，是的,，從顯示效果上來看,，PNG-24 跟 BMP 沒有不同。PNG-24 的優(yōu)點在于,，它壓縮了圖片的數(shù)據(jù),，使得同樣效果的圖片，PNG-24 格式的文件大小要比 BMP 小得多,。當(dāng)然,，PNG24 的圖片還是要比 JPEG、GIF,、PNG-8 大得多,。

雖然 PNG-24 的一個很大的目標(biāo)，是替換 JPEG 的使用,。但一般而言,，PNG-24 的文件大小是 JPEG 的五倍之多，而顯示效果則通常只能獲得一點點提升。所以,，只有在你不在乎圖片的文件體積,，而想要最好的顯示效果時，才應(yīng)該使用 PNG-24 格式,。

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

理論上來說,，當(dāng)你追求最佳的顯示效果、并且不在意文件體積大小時,，是推薦使用 PNG-24 的,。

實踐當(dāng)中，為了規(guī)避體積的問題,，我們一般不用PNG去處理較復(fù)雜的圖像,。當(dāng)我們遇到適合 PNG 的場景時，也會優(yōu)先選擇更為小巧的 PNG-8,。

PNG-32

PNG-32 跟 PNG-24 的區(qū)別就是多了一個 Alpha 通道,，用來支持半透明，其他的跟 PNG-24 基本一樣,。

優(yōu)點：

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

• 支持 alpha 通道透明度；

• 支持 256 色調(diào)色板技術(shù)以產(chǎn)生小體積文件

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

• 支持圖像亮度的 Gamma 校準(zhǔn)信息。

• 支持存儲附加文本信息,，以保留圖像名稱,、作者、著作權(quán),、創(chuàng)作時間,、注釋等信息。

• 漸近顯示和流式讀寫,，適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌,。

缺點

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

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

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

適合場景

呈現(xiàn)小的 Logo,、顏色簡單且對比強烈的圖片或背景等。

關(guān)于 PNG 的小知識點

PNG 分為兩種，一種是 Index,，一種是 RGB,。Index 記錄同一種顏色的值和出現(xiàn)的位置（簡單地說，比如一個 2px*2px 的超級小圖,，從左往右從上往下依次的顏色是紅,，白，白,，紅,，那么記錄的方法就是“紅-1,4；白-2,3”）,；而 RGB 圖則把所有像素的色值依次記錄下來（即“紅,，白，白紅”）,。對于相同的圖片,，Index 格式的尺寸總是小于 RGB。

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

因為 PNG 是無損壓縮,，保留了圖片需要的所有信息，所以索引色是可以轉(zhuǎn)化為直接色的,。

WebP

關(guān)鍵詞：年輕,、有損、無損,、兼容性

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

從名字就可以看出來它是為 Web 而生的，什么叫為 Web 而生呢,？就是說相同質(zhì)量的圖片,，WebP 具有更小的文件體積。現(xiàn)在網(wǎng)站上充滿了大量的圖片,，如果能夠降低每一個圖片的文件大小,，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪問延遲,，提升訪問體驗,。

• 在無損壓縮的情況下,，相同質(zhì)量的 WebP 圖片，文件大小要比 PNG 小26%,；

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

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

可以看到 WebP 集多種圖片文件格式的優(yōu)點于一身,，所以在圖片的質(zhì)量和性能上，WebP 無疑是贏家,。

不過 WebP 有有一個缺點,，導(dǎo)致還不能大規(guī)模使用，那就是兼容性,。

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

此外，WebP 與 JPG 相比較,，編碼速度慢 10 倍,，解碼速度慢 1.5 倍，而絕大部分的網(wǎng)絡(luò)應(yīng)用中,，圖片都是靜態(tài)文件,，所以對于用戶使用只需要關(guān)心解碼速度即可。但實際上,，WebP 雖然會增加額外的解碼時間,，但是由于減少了文件體積，縮短了加載的時間,，實際上文件的渲染速度反而變快了。

使用場景

**WebP **集多種圖片文件格式的優(yōu)點于一身,，所以基本上適合各種場景,，但是由于兼容性不好，所以我們?nèi)绻笠?guī)模的適用 WebP,，一定要在 Safari 和 IE 里面施行降級,。

這是淘寶商品圖片是我在 Chrome 打開的例子，可以看到圖片的后綴是 .jpg_.webp,，如果這張圖片在 Safari 打開后綴就變?yōu)榱?.jpg,，這是一種降級方案,，其他的方案請讀者自行研究，不在本文討論中,。

APNG

APNG（Animated Portable Network Graphics）顧名思義是基于 PNG 格式擴(kuò)展的一種動畫格式,，增加了對動畫圖像的支持，同時加入了 24 位圖像和 8 位 Alpha 透明度的支持,，這意味著動畫將擁有更好的質(zhì)量,，其誕生的目的是為了替代老舊的 GIF 格式，但它目前并沒有獲得 PNG 組織官方的認(rèn)可,。

APNG 第1幀為標(biāo)準(zhǔn) PNG 圖像,，剩余的動畫和幀速等數(shù)據(jù)放在 PNG 擴(kuò)展數(shù)據(jù)塊，因此只支持原版 PNG 的軟件會正確顯示第 1 幀,。

在兼容性方面絕大部分瀏覽器都還是支持的,，如果以前是因為動畫的原因用 GIF 的，現(xiàn)在用 APNG 是一個不錯的選擇,，其他的特性是跟 PNG 樣的,，因為 APNG 只是一個 PNG 的擴(kuò)展。

更多 APNG 相關(guān)的可以看 APNG 那些事

SVG

關(guān)鍵詞：無損,、矢量圖,、體積小、不失真,、兼容性好

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

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

SVG 跟上面這些圖片格式最大的不同,，是 SVG 是矢量圖,。這意味著 SVG 圖片由直線和曲線以及繪制它們的方法組成。當(dāng)你放大一個 SVG 圖片的時候,，你看到的還是線和曲線,，而不會出現(xiàn)像素點。這意味著 SVG 圖片在放大時,，不會失真,，所以它非常適合用來繪制企業(yè) Logo、Icon 等,。

優(yōu)點：

• SVG 可被非常多的工具讀取和修改（比如記事本）,。

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

• SVG 是可伸縮的。

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

• SVG 可以與 JavaScript 技術(shù)一起運行

• SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實現(xiàn)位圖格式中類似文字陰影的效果,。

• SVG圖形格式可以用來動態(tài)生成圖形,。例如，可用 SVG 動態(tài)生成具有交互功能的地圖,，嵌入網(wǎng)頁中,，并顯示給終端用戶。

缺點：

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

• SVG 的學(xué)習(xí)成本比較高，因為它是可編程的,。

適用場景

1,、高保真度復(fù)雜矢量文檔已是并將繼續(xù)是 SVG 的最佳點。它非常詳細(xì),，適用于查看和打印,，可以是獨立的，也可以嵌入到網(wǎng)頁中
2,、在WEB項目中的平面圖繪制,，如需要繪制線，多邊形,，圖片等,。
3,、數(shù)據(jù)可視化,。

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

總結(jié)

本文詳細(xì)的介紹了常見的圖片格式：GIF,、JPEG,、PNG、WebP,、APNG,、SVG，介紹了他們是什么,，有什么用,，優(yōu)點和缺點，以及使用場景,。由于圖片相關(guān)的知識確實太多了,，我只是把一些我覺得必要的寫出來，下面在網(wǎng)上找到了一個選擇圖片過程的表格和圖,，下次不知道選擇什么圖片格式,，直接看圖就行。

其中 APNG 和 WebP 格式出現(xiàn)的較晚,，尚未被 Web 標(biāo)準(zhǔn)所采納,，只有在特定平臺或瀏覽器環(huán)境可以預(yù)知的情況下加以采用。圖片格式選擇過程如下：

• 趙鑫

• 真彩色與偽彩色,、直接色的區(qū)別

• 10 個免費的圖像壓縮優(yōu)化工具和腳本

• 網(wǎng)頁中圖片格式的選擇