前言

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

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

我的更多文章可以看 GitHub博客,

基本概念

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

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

[[265920]]

 

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

舉個🌰，如果一個像素用一位二進制數表示，能有多少種顏色呢?

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

下圖展示了一個像素二進制的位數最多可以展示多少種顏色。

 

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

根據圖的類型分類

• 點陣圖(位圖)
• 矢量圖

位圖(點陣圖)

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

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

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

矢量圖

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

無論顯示畫面是大還是小，畫面上的對象對應的算法是不變的，所以，即使對畫面進行倍數相當大的縮放，其顯示效果仍然相同(不失真)。

常見的就是 svg 格式的。

根據壓縮分類

• 無壓縮。
• 無損壓縮。
• 有損壓縮。

無壓縮

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

有損壓縮

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

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

無損壓縮

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

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

png 是其中的代表。

小結

• 使用有損壓縮處理圖像，是去除某些像素數據，無法找回原圖。
• 使用無損處理圖像，是對像素數據進行壓縮，可以找回原圖。

常見的圖片格式解析

GIF

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

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

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

GIF 的特性是幀動畫。

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

優勢

• 優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小。
• 可插入多幀，從而實現動畫效果。
• 可設置透明色以產生對象浮現于背景之上的效果。

缺點

• 由于采用了 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。

[[265921]]

Progressive JPEG

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

[[265922]]

漸進式圖片帶來的好處是可以讓用戶在沒有下載完圖片就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗(瀑布留的網站建議還是使用標準型的)。

更多關于 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 具有更小的文件體積?，F在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。

• 在無損壓縮的情況下，相同質量的 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種類型的圖形對象：矢量圖形(vectorgraphicshape例如：由直線和曲線組成的路徑)、圖象(image)、文本(text)。圖形對象還可進行分組、添加樣式、變換、組合等操作，特征集包括嵌套變換(nestedtransformations)、剪切路徑(clippingpaths)、alpha 蒙板(alphamasks)、濾鏡效果(filtereffects)、模板對象(templateobjects)和其它擴展(extensibility)。

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

優點：

• SVG 可被非常多的工具讀取和修改(比如記事本)。
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的。
• SVG 圖像中的文本是可選的，同時也是可搜索的(很適合制作地圖)。
• SVG 可以與 JavaScript 技術一起運行
• SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現位圖格式中類似文字陰影的效果。
• SVG圖形格式可以用來動態生成圖形。例如，可用 SVG 動態生成具有交互功能的地圖，嵌入網頁中，并顯示給終端用戶。

缺點：

• 渲染成本比較高，對于性能有影響。
• SVG 的學習成本比較高，因為它是可編程的。

適用場景

1、高保真度復雜矢量文檔是并將繼續是 SVG 點。它非常詳細，適用于查看和打印，可以是獨立的，也可以嵌入到網頁中

2、在WEB項目中的平面圖繪制，如需要繪制線，多邊形，圖片等。

3、數據可視化。

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

總結

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

其中 APNG 和 WebP 格式出現的較晚，尚未被 Web 標準所采納，只有在特定平臺或瀏覽器環境可以預知的情況下加以采用。圖片格式選擇過程如下：

圖片格式	支持透明	動畫支持	壓縮方式	瀏覽器支持	相對原圖大小	適應場景
baseline-jpeg	不支持	不支持	有損	所有	由畫質決定	所有通用場景
progressive-jpeg	不支持	不支持	有損	所有	由畫質決定	所有通用場景, 漸進式加載
gif	支持	支持	無損	所有	由幀數和每幀圖片大小決定	簡單顏色，動畫
png	支持	不支持	無損	所有	由png色值位數決定	需要透明時
webp	支持	不支持	有損和無損	所有(除IE和Safari)	由壓縮率決定	復雜顏色及形狀，瀏覽器平臺可預知
apng	支持	支持	無損	所有(除IE 和Opera)	由每幀圖片決定	需要半透明效果的動畫
svg	支持	支持	無損	所有(IE8以上)	由內容和特效復雜度決定	簡單圖形，需要良好的放縮體驗，需要動態控制圖片特效

 

附加內容

以下內容大多來自于網絡，由于我在寫這篇文章的過程中看到了這些，我覺得有必要了解一下，所以我將這些貼出來，跟文章內容關系不大，可以不看。

位圖圖像屬性

索引顏色/顏色表

位圖常用的一種壓縮方法。從位圖圖片中選擇最有代表性的若干種顏色(通常不超過256種)編制成顏色表，然后將圖片中原有顏色用顏色表的索引來表示。這樣原圖片可以被大幅度有損壓縮。適合于壓縮網頁圖形等顏色數較少的圖形，不適合壓縮照片等色彩豐富的圖形。

Alpha通道

在原有的圖片編碼方法基礎上，增加像素的透明度信息。圖形處理中，通常把 RGB 三種顏色信息稱為紅通道、綠通道和藍通道，相應的把透明度稱為 Alpha 通道。多數使用顏色表的位圖格式都支持 Alpha 通道。

色彩深度

色彩深度又叫色彩位數，即位圖中要用多少個二進制位來表示每個點的顏色，是分辨率的一個重要指標。常用有1位(單色)，2位(4色，CGA)，4位(16色，VGA)，8位(256色)，16位(增強色)，24位(真彩色)和32位等。色深16位以上的位圖還可以根據其中分別表示RGB三原色或CMYK四原色(有的還包括Alpha通道)的位數進一步分類，如16位位圖圖片還可分為R5G6B5，R5G5B5X1(有1位不攜帶信息)，R4G4B4A4等等。

• 8位色，所謂8位色并不是圖像只有8種顏色，而是2^8，即256種顏色，8位圖指的是用8個bits來表示顏色;
• 16位色，2^16，從人眼的感覺來說，16位色基本可以滿足視覺需要了;
• 24位色，又稱為“真彩色”。大概有1600萬之多，這個數字幾乎是人類視覺可分辨顏色的極限;
• 32位色，并非 2^32, 其實也是 2^24 種顏色，不過它增加了2^8 階顏色的灰度，也就是8位透明度，因此規定它為32位色。

在制作網站頁面圖片的時候，設計者一般選擇 24 位圖像。32 位圖像雖然質量更好，但同時也帶來更大的圖像體積(事實上，一般肉眼也很難分辨 24 位圖和 32 位圖的區別)。此外將原始位圖放大與縮小都會使圖像效果失真，這是因為它們減小了圖像中有效像素的數量或密度的緣故，所以在制作過程中應盡量避免圖片被編輯的次數。

真彩色與偽彩色、直接色

描述一幅圖像需要使用圖像的屬性。圖像的屬性包含分辨率、像素深度、表示法和種類等。本節介紹前面三個特性。

搞清真彩色、偽彩色與直接色的含義，對于編寫圖像顯示程序、理解圖像文件的存儲格式有直接的指導意義，也不會對出現諸如這樣的現象感到困惑：本來是用真彩色表示的圖像，但在VGA顯示器上顯示的圖像顏色卻不是原來圖像的顏色。

我這里就不以圖形學的方式介紹各種花里胡哨的概念，我就用最簡單的，作為一個程序員的角度來理解就行了。

真彩色

真彩像是一種用三個或更多字節描述像素的計算機圖像存儲方式。

一般來說，前三個通道都會各用一個字節表示，如紅綠藍(RGB)或者藍綠紅(BGR)。如果存在第四個字節，則表示該圖像采用了 Alpha 通道。然而，實際系統往往用多于 8 位(即1字節)表達一個通道，如一個 48 位的掃描儀等。這樣的系統都統稱為真彩色系統。

偽彩色

索引圖像，他的每個像素值存儲的不是直接的基色強度，而是存儲的索引。就跟 js 里面的引用變量一樣，變量只是個地址，變量所指向的值才是真正的值。

直接色

直接色又稱假彩色。它和偽彩色的區別就是，前者的每個基色強度都要通過索引找到真正的基色強度。

小結

直接色系統產生顏色與真彩色系統相比，相同之處是都采用R，G，B分量決定基色強度，不同之處是前者的基色強度直接用R，G，B決定，而后者的基色強度由R，G，B經變換后決定。因而這兩種系統產生的顏色就有差別。

直接色系統與偽彩色系統相比，相同之處是都采用查找表，不同之處是前者對 R，G，B分量分別進行變換，后者是把整個像素當作查找表的索引值進行彩色變換。