前言

作為一個(gè)客戶端開發(fā)，對(duì)于圖片格式一直沒有一個(gè)清晰的了解，這里簡(jiǎn)單的羅列出各種圖片格式的區(qū)別，文章中有部分是他人的引用，會(huì)在底部放上鏈接，望輕噴。

概念了解

有損壓縮 & 無(wú)損壓縮

有損壓縮（lossy compression）：

有損壓縮算法是一種數(shù)據(jù)壓縮方法，經(jīng)過(guò)此方法壓縮、解壓的數(shù)據(jù)會(huì)與原始數(shù)據(jù)不同但是非常接近。它是與無(wú)損數(shù)據(jù)壓縮相對(duì)的壓縮方法。有損數(shù)據(jù)壓縮又稱破壞性資料壓縮、有損壓縮、有損壓縮、不可逆壓縮。其原理是借由將次要的信息數(shù)據(jù)舍棄，犧牲一些質(zhì)量來(lái)減少數(shù)據(jù)量、提高壓縮比。這種方法經(jīng)常用于壓縮多媒體數(shù)據(jù)（音頻、視頻、圖片）。根據(jù)各種格式設(shè)計(jì)的不同，有損數(shù)據(jù)壓縮都會(huì)有代間損失——每次壓縮與解壓文件都會(huì)帶來(lái)漸進(jìn)的質(zhì)量下降。

無(wú)損壓縮（Lossless Compression）：

指數(shù)據(jù)經(jīng)過(guò)壓縮后，信息不受損失，還能完全恢復(fù)到壓縮前的原樣。無(wú)損壓縮通常用于嚴(yán)格要求“經(jīng)過(guò)壓縮、解壓縮的數(shù)據(jù)必須與原始數(shù)據(jù)一致”的場(chǎng)合。典型的例子包括文字文件、程序可執(zhí)行文件、程序源代碼。有些圖片文件格式，例如PNG和GIF，使用的是無(wú)損壓縮。

索引色 & 直接色

索引色：

索引顏色是一種以有限的方式管理數(shù)字圖像顏色的技術(shù)，以節(jié)省計(jì)算機(jī)內(nèi)存和文件存儲(chǔ)，同時(shí)加速顯示刷新和文件傳輸。即用一個(gè)數(shù)字來(lái)代表（索引）一種顏色，在存儲(chǔ)圖片的時(shí)候，存儲(chǔ)一個(gè)數(shù)字的組合，同時(shí)存儲(chǔ)數(shù)字到圖片顏色的映射。這種方式只能存儲(chǔ)有限種顏色，通常是256種顏色，對(duì)應(yīng)到計(jì)算機(jī)系統(tǒng)中，使用一個(gè)字節(jié)的數(shù)字來(lái)索引一種顏色。

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

直接色：

使用四個(gè)數(shù)字來(lái)代表一種顏色，這四個(gè)數(shù)字分別代表這個(gè)顏色中紅色、綠色、藍(lán)色以及透明度（即rgba）。現(xiàn)在流行的顯示設(shè)備可以在這四個(gè)維度分別支持256種變化，所以直接色可以表示2的32次方種顏色。當(dāng)然并非所有的直接色都支持這么多種，為壓縮空間使用，有可能只有表達(dá)紅、綠、藍(lán)的三個(gè)數(shù)字，每個(gè)數(shù)字也可能不支持256種變化之多。

位圖 & 矢量圖：

位圖：

位圖[bitmap]，也叫做點(diǎn)陣圖，柵格圖像，像素圖，簡(jiǎn)單的說(shuō)，就是最小單位由像素構(gòu)成的圖，縮放會(huì)失真。構(gòu)成位圖的最小單位是像素，位圖就是由像素陣列的排列來(lái)實(shí)現(xiàn)其顯示效果的，每個(gè)像素有自己的顏色信息，在對(duì)位圖圖像進(jìn)行編輯操作的時(shí)候，可操作的對(duì)象是每個(gè)像素，我們可以改變圖像的色相、飽和度、明度，從而改變圖像的顯示效果。舉個(gè)例子來(lái)說(shuō)，位圖圖像就好比在巨大的沙盤上畫好的畫，當(dāng)你從遠(yuǎn)處看的時(shí)候，畫面細(xì)膩多彩，但是當(dāng)你靠的非常近的時(shí)候，你就能看到組成畫面的每粒沙子以及每個(gè)沙粒單純的不可變化顏色。

矢量圖：

矢量圖[vector]，也叫做向量圖，簡(jiǎn)單的說(shuō)，就是縮放不失真的圖像格式。矢量圖是通過(guò)多個(gè)對(duì)象的組合生成的，對(duì)其中的每一個(gè)對(duì)象的紀(jì)錄方式，都是以數(shù)學(xué)函數(shù)來(lái)實(shí)現(xiàn)的，也就是說(shuō)，矢量圖實(shí)際上并不是象位圖那樣記錄畫面上每一點(diǎn)的信息，而是紀(jì)錄了元素形狀及顏色的算法，當(dāng)你打開一幅矢量圖的時(shí)候，軟件對(duì)圖形相對(duì)應(yīng)的函數(shù)進(jìn)行運(yùn)算，將運(yùn)算結(jié)果[圖形的形狀和顏色]顯示給你看。無(wú)論顯示畫面是大還是小，畫面上的對(duì)象對(duì)應(yīng)的算法是不變的，所以，即使對(duì)畫面進(jìn)行倍數(shù)相當(dāng)大的縮放，其顯示效果仍然相同[不失真]。舉例來(lái)說(shuō)，矢量圖就好比畫在質(zhì)量非常好的橡膠膜上的圖，不管對(duì)橡膠膜怎樣的常寬等比成倍拉伸，畫面依然清晰，不管你離得多么近去看，也不會(huì)看到圖形的最小單位。

圖片類型

BMP

BMP取自位圖BitMaP的縮寫，也稱為DIB（與設(shè)備無(wú)關(guān)的位圖），是一種與顯示器無(wú)關(guān)的位圖數(shù)字圖像文件格式。BMP同時(shí)支持索引色和直接色，但是其幾乎沒有壓縮，所以通常圖片非常的大，也導(dǎo)致了其幾乎沒有用武之地，現(xiàn)在除了在Windows操作系統(tǒng)中還比較常見之外，我們幾乎看不到它。再加上瀏覽器的不支持，所以作為web開發(fā)，更加少于看到BMP。

這里簡(jiǎn)單描述一下BMP解析成二進(jìn)制時(shí)的結(jié)構(gòu)：

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

GIF

全稱Graphics Interchange Format，采用LZW壓縮算法進(jìn)行編碼。是無(wú)損的、采用索引色的、點(diǎn)陣圖。GIF是無(wú)損的，采用GIF格式保存圖片不會(huì)降低圖片質(zhì)量。但得益于數(shù)據(jù)的壓縮，GIF格式的圖片，其文件大小要遠(yuǎn)小于BMP格式的圖片。文件小，是GIF格式的優(yōu)點(diǎn)，同時(shí)，GIF格式還具有支持動(dòng)畫以及透明的優(yōu)點(diǎn)。但，GIF格式僅支持8bit的索引色，即在整個(gè)圖片中，只能存在256種不同的顏色。

簡(jiǎn)單介紹下GIF使用的LZW壓縮算法，詳細(xì)可參考該文章：

LZW編碼 (Encoding) 的核心思想其實(shí)比較簡(jiǎn)單，就是把出現(xiàn)過(guò)的字符串映射到記號(hào)上，這樣就可能用較短的編碼來(lái)表示長(zhǎng)的字符串，實(shí)現(xiàn)壓縮。 比如： 我們可以將ABCDEFG 轉(zhuǎn)成 1 來(lái)代表， 這樣數(shù)據(jù)就會(huì)減少很多。再加上，LZW編碼是自解釋 (self-explaining) 的，即映射字典不會(huì)寫到壓縮數(shù)據(jù)里，他是在解碼的過(guò)程中還原出編碼時(shí)用的字典。

JPEG

JPEG是有損的、采用直接色的、點(diǎn)陣圖。JPEG也是一種針對(duì)照片影像而廣泛使用的有損壓縮標(biāo)準(zhǔn)方法。JPEG圖片格式的設(shè)計(jì)目標(biāo)，是在不影響人類可分辨的圖片質(zhì)量的前提下，盡可能的壓縮文件大小。這意味著JPEG去掉了一部分圖片的原始信息，也即是進(jìn)行了有損壓縮。JPEG的圖片的優(yōu)點(diǎn)，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來(lái)存儲(chǔ)照片，用來(lái)表達(dá)更生動(dòng)的圖像效果，比如顏色漸變。

JPEG的算法比較復(fù)雜， 如果有興趣可以參考該文章

其大概分為三步：

1. 把數(shù)據(jù)分為“重要部分”和“不重要部分”
2. 濾掉不重要的部分
3. 保存

PNG

便攜式網(wǎng)絡(luò)圖形（英語(yǔ)：Portable Network Graphics，縮寫：PNG）是一種無(wú)損壓縮的位圖圖形格式，支持索引、灰度、RGB三種顏色方案以及Alpha通道等特性。PNG的開發(fā)目標(biāo)是改善并取代GIF作為適合網(wǎng)絡(luò)傳輸?shù)母袷蕉恍鑼＠S可，所以被廣泛應(yīng)用于互聯(lián)網(wǎng)及其他方面上。

PNG-8

PNG-8是無(wú)損的、使用索引色的、點(diǎn)陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應(yīng)該盡可能的使用PNG-8而不是GIF，因?yàn)樵谙嗤膱D片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調(diào)節(jié)，而GIF并不支持。 現(xiàn)在，除非需要?jiǎng)赢嫷闹С?#xff0c;否則我們沒有理由使用GIF而不是PNG-8。當(dāng)然了，PNG-8本身也是支持動(dòng)畫的，只是瀏覽器支持得不好，不像GIF那樣受到廣泛的支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是無(wú)損的、使用直接色的、點(diǎn)陣圖。無(wú)損的、使用直接色的點(diǎn)陣圖，聽起來(lái)非常像BMP，是的，從顯示效果上來(lái)看，PNG-24跟BMP沒有不同。PNG-24的優(yōu)點(diǎn)在于，它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當(dāng)然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。雖然PNG-24的一個(gè)很大的目標(biāo)，是替換JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而顯示效果則通常只能獲得一點(diǎn)點(diǎn)提升。所以，只有在你不在乎圖片的文件體積，而想要最好的顯示效果時(shí)，才應(yīng)該使用PNG-24格式。另外，PNG-24跟PNG-8一樣，是支持圖片透明度的。

PNG-32

PNG32也是PNG的直接色版本。其表現(xiàn)與PNG-24差不多。

三者的區(qū)別在于：

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

SVG

SVG是很多種矢量圖中的一種，它的特點(diǎn)是使用XML來(lái)描述圖片。借助于前幾年XML技術(shù)的流行，SVG也流行了很多。使用XML的優(yōu)點(diǎn)是，任何時(shí)候你都可以把它當(dāng)做一個(gè)文本文件來(lái)對(duì)待，也就是說(shuō)，你可以非常方便的修改SVG圖片，你所需要的只需要一個(gè)文本編輯器。如果你是一個(gè)前端開發(fā)，那你應(yīng)該對(duì)其了解比較多。

圖片比較與場(chǎng)景應(yīng)用

類型	優(yōu)點(diǎn)	缺點(diǎn)	應(yīng)用場(chǎng)景
BMP	無(wú)損壓縮，圖質(zhì)最好，支持索引色和直接色	文件過(guò)大	目前僅存于WINDOWS系統(tǒng)
GIF	無(wú)損壓縮，支持動(dòng)畫及透明	僅支持256種顏色，畫質(zhì)差	需要?jiǎng)赢嫷男枨?/td>
JPEG	文件小	有損壓縮，畫質(zhì)損失	不考慮過(guò)好畫質(zhì)且需響應(yīng)速度較快， 如大背景圖
PNG-8	無(wú)損壓縮， 支持透明	畫質(zhì)中等	應(yīng)用于大多數(shù)中小圖且要求畫質(zhì)比較好的需求
SVG	支持放大縮小而不影響畫質(zhì)	編寫麻煩，性能差	多應(yīng)用于ICON之類

一圖勝前言

待補(bǔ)充

總結(jié)

了解各種圖片的格式，有助于我們與設(shè)計(jì)同事的溝通，與大家共勉。

引用 & 參考

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

轉(zhuǎn)載于:https://juejin.im/post/5c8a180f6fb9a049eb3cce9e

總結(jié)

以上是生活随笔為你收集整理的常见图片格式了解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。