BMP GIF PNG JPG等圖片格式的區別和適用狀況

 

做者：趙鑫
連接：https://www.zhihu.com/question/20028452/answer/142593276
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

本文介紹和比較幾種常見圖片文件格式的優缺點，並介紹不一樣的文件格式對Web應用程序性能的影響。

有損vs無損

圖片文件格式有可能會對圖片的文件大小進行不一樣程度的壓縮，圖片的壓縮分爲有損壓縮和無損壓縮兩種。

• 有損壓縮。指在壓縮文件大小的過程當中，損失了一部分圖片的信息，也即下降了圖片的質量，而且這種損失是不可逆的，咱們不可能從有一個有損壓縮過的圖片中恢復出全來的圖片。常見的有損壓縮手段，是按照必定的算法將臨近的像素點進行合併。
• 無損壓縮。只在壓縮文件大小的過程當中，圖片的質量沒有任何損耗。咱們任什麼時候候均可以從無損壓縮過的圖片中恢復出原來的信息。

索引色vs直接色

計算機在表示顏色的時候，有兩種形式，一種稱做索引顏色(Index Color)，一種稱做直接顏色(Direct Color)。

• 索引色。用一個數字來表明（索引）一種顏色，在存儲圖片的時候，存儲一個數字的組合，同時存儲數字到圖片顏色的映射。這種方式只能存儲有限種顏色，一般是256種顏色，對應到計算機系統中，使用一個字節的數字來索引一種顏色。
• 直接色。使用四個數字來表明一種顏色，這四個數字分別表明這個顏色中紅色、綠色、藍色以及透明度。如今流行的顯示設備能夠在這四個維度分別支持256種變化，因此直接色能夠表示2的32次方種顏色。固然並不是全部的直接色都支持這麼多種，爲壓縮空間使用，有可能只有表達紅、綠、藍的三個數字，每一個數字也可能不支持256種變化之多。

點陣圖vs矢量圖

• 點陣圖，也叫作位圖，像素圖。構成點陣圖的最小單位是象素，位圖就是由象素陣列的排列來實現其顯示效果的，每一個象素有本身的顏色信息，在對位圖圖像進行編輯操做的時候，可操做的對象是每一個象素，咱們能夠改變圖像的色相、飽和度、明度，從而改變圖像的顯示效果。點陣圖縮放會失真，用最近很是流行的沙畫來比喻最恰當不過，當你從遠處看的時候，畫面細膩多彩，可是當你靠的很是近的時候，你就能看到組成畫面的每粒沙子以及每一個沙粒的顏色。
• 矢量圖，也叫作向量圖。矢量圖並不紀錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的算法，當你打開一付矢量圖的時候，軟件對圖形象對應的函數進行運算，將運算結果[圖形的形狀和顏色]顯示給你看。不管顯示畫面是大仍是小，畫面上的對象對應的算法是不變的，因此，即便對畫面進行倍數至關大的縮放，其顯示效果仍然相同(不失真)。

BMP

BitMap的縮寫，是無損的、既支持索引色也支持直接色的、點陣圖。

這是一種比較老的圖片格式。BMP是無損的，但同時這種圖片格式幾乎沒有對數據進行壓縮，因此BMP格式的圖片一般具備較大的文件大小。雖然同時支持索引色和直接色是一個優勢，可是太大的文件格式格式致使它幾乎沒有用武之地，如今除了在Windows操做系統中還比較常見以外，咱們幾乎看不到它。

從上圖中能夠看到，在一樣的圖片質量下，BMP格式的圖片文件大小是GIF格式的不少倍。

GIF

全稱Graphics Interchange Format，採用LZW壓縮算法進行編碼。是無損的、採用索引色的、點陣圖。

GIF是無損的，採用GIF格式保存圖片不會下降圖片質量。但得益於數據的壓縮，GIF格式的圖片，其文件大小要遠小於BMP格式的圖片。文件小，是GIF格式的優勢，同時，GIF格式還具備支持動畫以及透明的優勢。但，GIF格式僅支持8bit的索引色，即在整個圖片中，只能存在256種不一樣的顏色。

GIF格式適用於對色彩要求不高同時須要文件體積較小的場景，好比企業Logo、線框類的圖等。因其體積小的特色，如今GIF被普遍的應用在各種網站中。

JPEG

JPEG是有損的、採用直接色的、點陣圖。

JPEG圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，儘量的壓縮文件大小。這意味着JPEG去掉了一部分圖片的原始信息，也便是進行了有損壓縮。JPEG的圖片的優勢，是採用了直接色，得益於更豐富的色彩，JPEG很是適合用來存儲照片，用來表達更生動的圖像效果，好比顏色漸變。

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

PNG-8

PNG全稱Portable Network Graphics，PNG-8是PNG的索引色版本。PNG-8是無損的、使用索引色的、點陣圖。

PNG是一種比較新的圖片格式，PNG-8是很是好的GIF格式替代者，在可能的狀況下，應該儘量的使用PNG-8而不是GIF，由於在相同的圖片效果下，PNG-8具備更小的文件體積。除此以外，PNG-8還支持透明度的調節，而GIF並不支持。 如今，除非須要動畫的支持，不然咱們沒有理由使用GIF而不是PNG-8。固然了，PNG-8自己也是支持動畫的，只是瀏覽器支持得很差，不像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同樣，是支持圖片透明度的。

SVG

全稱Scalable Vector Graphics，是無損的、矢量圖。

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

 

SVG是不少種矢量圖中的一種，它的特色是使用XML來描述圖片。藉助於前幾年XML技術的流行，SVG也流行了不少。使用XML的優勢是，任什麼時候候你均可以把它當作一個文本文件來對待，也就是說，你能夠很是方便的修改SVG圖片，你所須要的只須要一個文本編輯器。

SVG並不是只能繪製簡單的Logo類的圖片，它能夠繪製出精緻的圖片的，好比下面這漲，嗯。

WebP

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

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

• 在無損壓縮的狀況下，相同質量的WebP圖片，文件大小要比PNG小26%；
• 在有損壓縮的狀況下，具備相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
• WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，若是要支持透明度只須要22%的格外文件大小。

想象Web上的圖片之多，百分之幾十的提高，是很是很是大的優化。只惋惜，目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，因此WebP的應用並不普遍。爲了使用更先進的技術，好比WebP圖片格式，來壓縮互聯網上傳輸的數據流量，谷歌甚至提供了Chrome Data Compression Proxy，設置了Chrome Data Compression Proxy做爲Web代理以後，你訪問的全部網站中的圖片，在通過Proxy的時候，都會被轉換成WebP格式，以下降圖片文件的大小。

我的總結：

圖片的壓縮方式有無損壓縮和有損壓縮兩種。前者壓縮後比後者要大。

圖片的顏色表示有直接顏色和索引顏色兩種。前者比後者更豐富，體積更大。

1. BMP採用無損壓縮和直接色，因此體積最大。太大的文件格式格式致使它幾乎沒有用武之地。
2. GIF採用無損和索引色的，適用於對色彩要求不高同時須要文件體積較小的場景，好比企業Logo、線框類的圖等。支持動畫和透明。
3. JPEG（JPG）採用有損壓縮和直接色，不適合用來存儲企業Logo、線框類的圖。由於有損壓縮會致使圖片模糊，而直接色的選用，又會致使圖片文件較GIF更大。而適合做爲攝影類的圖片。.
4. PNG-8是PNG的索引色版本，採用無損、索引色，支持透明度調節（gif不支持），除了動畫外能夠替代gif使用。
5. PNG-24是PNG的直接色版本，採用無損直接色，要比BMP小得多，但要比JPEG、GIF、PNG-8大得多，也支持透明度調節。

因此小圖片儘可能使用png、要想支持動畫則使用gif、大型圖片使用jpg。