常用的幾種圖片格式

在開發中，圖片的優化很重要，圖片過大，很消耗頁面的性能的，那么作為前段開發，對不同圖片的格式的特點需要了解清楚，這樣在工作中才能正確使用相應的圖片。

jpg  jpeg baseline-jpeg progressive-jpeg   gif  png  webp apng  svg  bpg

在介紹圖片的之前，來了解兩個概念：

矢量圖與位圖

位圖：是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成圖樣。當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。擴大位圖尺寸的效果是增多單個像素，從而使線條和形狀顯得參差不齊。

然而，如果從稍遠的位置觀看它位圖的顏色和形狀又顯得是連續的，縮小位圖尺寸也會使原圖變形，因為此舉是通過減少像素來使整個圖像變小的。

簡單說，位圖就是以無數的色彩點組成的圖案，當你無限放大時你會看到一塊一塊的像素色塊，效果會失真。常用於圖片處理、影視婚紗效果圖等，象常用的照片，掃描，數碼照片等。Photoshop主要處理的是位圖圖像。

矢量圖：在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

矢量圖是根據幾何特性來繪制圖形，矢量可以是一個點或一條線，矢量圖只能靠軟件生成，文件占用內在空間較小，因為這種類型的圖像文件包含獨立的分離圖像，可以自由無限制的重新組合。

它的特點是放大后圖像不會失真，和分辨率無關，適用於圖形設計、文字設計和一些標志設計、版式設計等。

在web中圖標字體，比如 font-awesome  就是矢量圖

 

有損壓縮和無損壓縮

 

有損壓縮

有損壓縮是對圖像數據進行處理，去掉那些圖像上會被人眼忽略的細節，然后使用附近的顏色通過漸變或其他形式進行填充。這樣既能大大降低圖像信息的數據量，又不會影響圖像的還原效果。

 

無損壓縮

PNG是我們最常見的一種采用無損壓縮的圖片格式。無損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不同的，然后把這些相同的數據信息進行壓縮記錄，而把不同的數據另外保存。

無損壓縮只是一種相對的“無損”壓縮，並不是說無論如何壓縮圖片都不會失真。

 

 1，baseline-jpeg和progressive-jpeg的特點及不同

jpeg文件后輟名為"．jpg"或"．jpeg"，baseline-jpeg和progressive-jpeg分別是jpeg文件的兩種保存方式

baseline-jpeg和progressive-jpeg這兩種格式有相同尺寸以及圖像數據，擴展名也是相同的，唯一的區別是二者顯示的方式不同。

baseline-jpeg屬於通用的標准型圖片，圖片是從上到下的掃描方式，把每一行順序的保存在jpeg文件中。當打開這個圖片時，圖片內容從上到下一行一行的被顯示出來，直到所有的圖片數據都被讀完，就完成了整張圖片的顯示。如果文件較大或者網絡下載速度較慢，那么就會看到圖片被一行行加載的效果，像瀑布流式的網頁布局使用這種比較合適。

progressive-jpeg屬於漸進式圖片，ps保持圖片的時候有個交錯式的格式，選擇這個就是保存為漸進式格式的圖片啦。這種格式的圖片和baseline-jpeg一遍掃描不同，progressive-jpeg文件包含多次掃描，這些掃描順尋的存儲在JPEG文件中。打開文件過程中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增加，圖片變得越來越清晰。這種格式的主要優點是在網絡較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。在一些網站打開較大圖片時，會使用這種圖片。

優缺點：

baseline-jpeg沒有什么很大優點，一般使用progressive-jpeg比較多

progressive-jpeg帶來的好處是可以讓用戶在沒有下載完圖片就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗。

progressive-jpeg的大小並不會和基本的圖片大小相差很多，有時候可能會比基本圖片更小。

progressive-jpeg圖片的缺點就是吃用戶的CPU和內存，不過對於現在的電腦來說這點圖片的計算並不算什么。

basbaseline-jpeg和progressive-jpeg不支持透明。不支持動畫。都是有損壓縮。所有瀏覽器都支持。相對原圖的大小呢是由畫質來決定的。

2，gif

應用：

gif圖片一般用來做loading圖，還有表情等。

特點：

gif圖是無損壓縮的。支持透明。所有瀏覽器都支持。相對原圖的大小是由幀數和每幀圖片大小決定的。256位色，簡單色不多。

3，png

應用：

在web中一些icon使用png

特點：

png圖支持透明。無損壓縮。所有瀏覽器都支持。相對原圖大小由png色值位數決定。使用場景是需要透明的時候。

png格式有8位、24位、32位三種形式：

8位png支持兩種不同的透明形式（索引透明和alpha透明）。

24位png不支持透明。

32位png在24位基礎上增加了8位透明通道，因此可展現256級透明程度。

png8和png24后面的數字則是代表這種png格式最多可以索引和存儲的顏色值。8代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。

 

4，webp

webp是goole新推出的影像技術

特點：

支持透明，不支持動畫。有損壓縮。谷歌和歐朋瀏覽器支持。相對原圖大小由壓縮率決定 。適用於復雜的顏色及形狀，瀏覽器平台可預知。

如何判斷瀏覽器是否支持webp圖片格式：

第一種：對webp的圖片進行base64，復值給img標簽的src，如果觸發了onerror 就證明該瀏覽器不支持webp格式圖片。如果onload 事件觸發了，並且沒有觸發onerror就說明該瀏覽器支持webp格式的圖片

第二種是：請求頭中accept中標明了格式就說明該瀏覽器支持的圖片格式

 

cdn就會根據這個來判斷瀏覽器是否支持webp格式圖片，如果支持就返回webp，不支持就返回本來的圖片如jpg,png等。

5，apng

特點：支持透明。支持動畫。無損壓縮，支持的瀏覽器有firefox safari ios。相對原圖大小由每幀圖片決定。適用於需要半透明效果動畫。

6，svg

屬於矢量圖片

特點：支持透明。支持動畫。無損壓縮。所有瀏覽器支持（ie8以上）。相對原圖大小由特效和內容復雜度決定。適用場景是簡單圖型，需要良好的放縮體驗，需要動態控制圖片特效。

svg並沒有廣泛被使用，實際上在開發中維護svg成本很高，所以適用jpg和png更多一些。

7，bpg

同樣大小的jpg和bpg，bpg 圖片清晰度要高。

做動圖，相同動畫要比apng小很多

特點：支持透明。支持動畫。有損壓縮。所有瀏覽器不支持，需要js解碼。相對原圖大小由畫質決定。適用場景jpeg上需要極限優化場景。

 

以上就是自己學習的圖片格式總結，希望大家共同學習。fighting!!!!!!!!!!