常見圖片格式瞭解

前言

做爲一個客戶端開發，對於圖片格式一直沒有一個清晰的瞭解，這裏簡單的羅列出各類圖片格式的區別，文章中有部分是他人的引用，會在底部放上連接，望輕噴。

概念瞭解

有損壓縮 & 無損壓縮

有損壓縮（lossy compression）：

有損壓縮算法是一種數據壓縮方法，通過此方法壓縮、解壓的數據會與原始數據不一樣可是很是接近。它是與無損數據壓縮相對的壓縮方法。有損數據壓縮又稱破壞性資料壓縮、有損壓縮、有損壓縮、不可逆壓縮。其原理是藉由將次要的信息數據捨棄，犧牲一些質量來減小數據量、提升壓縮比。這種方法常常用於壓縮多媒體數據（音頻、視頻、圖片）。根據各類格式設計的不一樣，有損數據壓縮都會有代間損失——每次壓縮與解壓文件都會帶來漸進的質量降低。

無損壓縮（Lossless Compression）：

指數據通過壓縮後，信息不受損失，還能徹底恢復到壓縮前的原樣。無損壓縮一般用於嚴格要求「通過壓縮、解壓縮的數據必須與原始數據一致」的場合。典型的例子包括文字文件、程序可執行文件、程序源代碼。有些圖片文件格式，例如PNG和GIF，使用的是無損壓縮。

索引色 & 直接色

索引色：

索引顏色是一種以有限的方式管理數字圖像顏色的技術，以節省計算機內存和文件存儲，同時加速顯示刷新和文件傳輸。即用一個數字來表明（索引）一種顏色，在存儲圖片的時候，存儲一個數字的組合，同時存儲數字到圖片顏色的映射。這種方式只能存儲有限種顏色，一般是256種顏色，對應到計算機系統中，使用一個字節的數字來索引一種顏色。

索引色常見有1位（即黑白），8位（即灰階/256色），16位（即高彩），24位（即真彩），30/36/48位（即全綵），更多詳細參考該百科。

直接色：

使用四個數字來表明一種顏色，這四個數字分別表明這個顏色中紅色、綠色、藍色以及透明度（即rgba）。如今流行的顯示設備能夠在這四個維度分別支持256種變化，因此直接色能夠表示2的32次方種顏色。固然並不是全部的直接色都支持這麼多種，爲壓縮空間使用，有可能只有表達紅、綠、藍的三個數字，每一個數字也可能不支持256種變化之多。

位圖 & 矢量圖：

位圖：

位圖[bitmap]，也叫作點陣圖，柵格圖像，像素圖，簡單的說，就是最小單位由像素構成的圖，縮放會失真。構成位圖的最小單位是像素，位圖就是由像素陣列的排列來實現其顯示效果的，每一個像素有本身的顏色信息，在對位圖圖像進行編輯操做的時候，可操做的對象是每一個像素，咱們能夠改變圖像的色相、飽和度、明度，從而改變圖像的顯示效果。舉個例子來講，位圖圖像就比如在巨大的沙盤上畫好的畫，當你從遠處看的時候，畫面細膩多彩，可是當你靠的很是近的時候，你就能看到組成畫面的每粒沙子以及每一個沙粒單純的不可變化顏色。

矢量圖：

矢量圖[vector]，也叫作向量圖，簡單的說，就是縮放不失真的圖像格式。矢量圖是經過多個對象的組合生成的，對其中的每個對象的紀錄方式，都是以數學函數來實現的，也就是說，矢量圖實際上並非象位圖那樣記錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的算法，當你打開一幅矢量圖的時候，軟件對圖形相對應的函數進行運算，將運算結果[圖形的形狀和顏色]顯示給你看。不管顯示畫面是大仍是小，畫面上的對象對應的算法是不變的，因此，即便對畫面進行倍數至關大的縮放，其顯示效果仍然相同[不失真]。舉例來講，矢量圖就比如畫在質量很是好的橡膠膜上的圖，無論對橡膠膜怎樣的常寬等比成倍拉伸，畫面依然清晰，無論你離得多麼近去看，也不會看到圖形的最小單位。

圖片類型

BMP

BMP取自位圖BitMaP的縮寫，也稱爲DIB（與設備無關的位圖），是一種與顯示器無關的位圖數字圖像文件格式。BMP同時支持索引色和直接色，可是其幾乎沒有壓縮，因此一般圖片很是的大，也致使了其幾乎沒有用武之地，如今除了在Windows操做系統中還比較常見以外，咱們幾乎看不到它。再加上瀏覽器的不支持，因此做爲web開發，更加少於看到BMP。

這裏簡單描述一下BMP解析成二進制時的結構：

位置	含義
bmp文件頭(bmp file header)	提供文件的格式、大小等信息
位圖信息頭(bitmap information)	提供圖像數據的尺寸、位平面數、壓縮方式、顏色索引等信息
調色板(color palette)（若是有的話）	如使用索引來表示圖像，調色板就是索引與其對應的顏色的映射表
位圖數據(bitmap data)	則圖片數據

GIF

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

簡單介紹下GIF使用的LZW壓縮算法，詳細可參考該文章：

LZW編碼 (Encoding) 的核心思想其實比較簡單，就是把出現過的字符串映射到記號上，這樣就可能用較短的編碼來表示長的字符串，實現壓縮。 好比： 咱們能夠將ABCDEFG 轉成 1 來表明， 這樣數據就會減小不少。再加上，LZW編碼是自解釋 (self-explaining) 的，即映射字典不會寫到壓縮數據裏，他是在解碼的過程當中還原出編碼時用的字典。

JPEG

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

JPEG的算法比較複雜， 若是有興趣能夠參考該文章

其大概分爲三步：

1. 把數據分爲「重要部分」和「不重要部分」
2. 濾掉不重要的部分
3. 保存

PNG

便攜式網絡圖形（英語：Portable Network Graphics，縮寫：PNG）是一種無損壓縮的位圖圖形格式，支持索引、灰度、RGB三種顏色方案以及Alpha通道等特性。PNG的開發目標是改善並取代GIF做爲適合網絡傳輸的格式而不需專利許可，因此被普遍應用於互聯網及其餘方面上。

PNG-8

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

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-32

PNG32也是PNG的直接色版本。其表現與PNG-24差很少。

三者的區別在於：

• PNG-32每一個像素的深度爲32bits，其中RGBA四個通道各佔8bits。所謂的RGBA四個通道，就是紅，綠，藍，透明 這四種色值各自的大小，都用8bits來表示（0～255）。
• PNG-24的像素深度爲24bits，其中RGB三個通道各佔8bits。
• PNG-8則是使用8位的索引色。

SVG

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

圖片比較與場景應用

類型	優勢	缺點	應用場景
BMP	無損壓縮，圖質最好，支持索引色和直接色	文件過大	目前僅存於WINDOWS系統
GIF	無損壓縮，支持動畫及透明	僅支持256種顏色，畫質差	須要動畫的需求
JPEG	文件小	有損壓縮，畫質損失	不考慮過好畫質且需響應速度較快， 如大背景圖
PNG-8	無損壓縮， 支持透明	畫質中等	應用於大多數中小圖且要求畫質比較好的需求
SVG	支持放大縮小而不影響畫質	編寫麻煩，性能差	多應用於ICON之類

一圖勝前言

待補充

總結

瞭解各類圖片的格式，有助於咱們與設計同事的溝通，與你們共勉。

引用 & 參考

圖片格式那麼多，哪一種更適合你？