域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

圖像格式是指計(jì)算機(jī)存儲(chǔ)圖像的方式。不同的文件格式?jīng)Q定著圖像不同的展示效果以及下載方式，理想的文件格式可以使圖像在不同的設(shè)備上都能良好的呈現(xiàn)，最大化發(fā)揮圖像的效用。相反，不恰當(dāng)?shù)奈募袷讲坏珶o(wú)法利用圖片極佳的視覺效果，反而可能會(huì)在移動(dòng)設(shè)備上出現(xiàn)顯示不全等問題，影響網(wǎng)站的整體表現(xiàn)，降低用戶體驗(yàn)的舒適度。那么在做網(wǎng)站時(shí)究竟怎樣選擇最適合的文件格式呢?位圖和矢量圖之間有什么不同?什么時(shí)候應(yīng)該使用PNG?哪些地方應(yīng)該選擇SVG呢?今天小飛就針對(duì)這些問題，好好聊一下圖像文件的格式，介紹四種常見的圖像格式，分析分析不同圖像格式的適用情境。

四種常見的圖像格式：

GIF：圖像互換格式

在網(wǎng)站中使用GIF已經(jīng)有一段歷史了。尤其是在建站早期，由于網(wǎng)速較慢，GIF憑借其體積小、成像相對(duì)清晰的特征俘虜了大批粉絲。GIF是一種位圖格式，支持透明背景圖像。它可以分為靜態(tài)GIF和動(dòng)態(tài)GIF，動(dòng)態(tài)GIF主要是指能夠儲(chǔ)存多幅彩色圖像，當(dāng)我們將一個(gè)文件中的多幅圖像數(shù)據(jù)逐個(gè)讀出并顯示到屏幕上，就能夠構(gòu)成一種簡(jiǎn)單的動(dòng)畫。網(wǎng)上很多流行的搞笑gif圖就是這種格式。

JPEG：聯(lián)合圖像專家組

JPEG是JPG的全稱，個(gè)人偏好不同在稱呼上可能會(huì)有差異。你可以讀"積派哥"也可以按照字母直接讀J P E G。JPEG支持最高級(jí)別的壓縮性能，同時(shí)具備比較好的重建質(zhì)量，在攝影、視頻處理領(lǐng)域廣為應(yīng)用。但是這種圖像格式是一種有損壓縮格式，雖然圖像可以壓縮到很小，但可能會(huì)丟失一些重復(fù)或者不重要的資料，破壞圖像數(shù)據(jù)的完整性。不過，JPEG格式也很靈活，允許選擇圖像壓縮的不同程度，從0%(重壓縮)到100%(零壓縮)。這樣我們可以盡量在圖像質(zhì)量和文件尺寸之間找到一個(gè)平衡點(diǎn)，用最少的空間獲取較好的圖像質(zhì)量。實(shí)踐表明，60%到75%之間的壓縮程度能夠在很大程度上縮小文件尺寸，還能保證圖像的較高品質(zhì)。JPEG也是一種位圖格式，但它不支持透明背景圖像，更加適合顏色復(fù)雜的圖像。

PNG：可移植網(wǎng)絡(luò)圖形格式

從某種程度上來(lái)說(shuō)，PNG是GIF和JPEG的結(jié)合體。這是因?yàn)樗O(shè)計(jì)之初的目的就是試圖取代GIF和JPEG格式，增加一些這兩種文件格式所不具備的特性。一方面，與GIF格式相比，雖然gif支持透明背景顏色，但它只有1和0兩種透明信息，只有透明和不透明之分，而PNG支持α頻段0到255的透明信息，可以使圖像的透明區(qū)域?qū)哟畏置鳎瑫r(shí)還能讓彩色圖像和背景圖片的邊緣呈現(xiàn)完美平滑的融合。另一方面，與JPEG相比，由于PNG使用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，它可以實(shí)現(xiàn)圖像高壓縮比，便于網(wǎng)絡(luò)傳輸，與此同時(shí)保留與圖像有關(guān)的所有細(xì)節(jié)，不降低圖像質(zhì)量。這也是PNG最大的特點(diǎn)所在。PNG適合需要重新編輯、顏色復(fù)雜或需要透明度的圖像，但它并不能普遍兼容每個(gè)應(yīng)用程序和平臺(tái)。PNG還可以分為PNG8和PNG24兩種格式，PNG8是用8位索引值在調(diào)色板上找到一個(gè)顏色，PNG24是用24位來(lái)保存一個(gè)像素值。PNG格式還常作為圖片素材來(lái)使用。

SVG：可縮放矢量圖形

與上面三種圖像格式最大的不同在于，SVG并不是位圖格式，而是一種矢量圖形格式，這意味著它可以在任意分辨率上顯示，而不破壞圖像的清晰度和細(xì)節(jié) 。這是因?yàn)槲粓D圖像儲(chǔ)存圖像上每一點(diǎn)的像素值，而矢量圖像用點(diǎn)和線來(lái)描述物體，能夠提供清晰的畫面。另外，SVG圖像中的文字雖然能呈現(xiàn)圖像化的修飾效果，但卻仍是以文本的形式存在的，能夠?yàn)樗阉饕嬷┲胱x取，還便于有視覺障礙的讀者使用工具進(jìn)行瀏覽。一般來(lái)說(shuō)，SVG文件要比JPEG和GIF的文件要小，在下載或移動(dòng)設(shè)備上顯示時(shí)速度也更快。還有一點(diǎn)，SVG圖形很是靈活，我們可以在這樣的矢量圖形之中嵌入位圖圖形。下圖為一些SVG矢量圖標(biāo)。

不同文件格式的適用情境：

GIF格式現(xiàn)在主要用來(lái)創(chuàng)造有趣的動(dòng)畫，動(dòng)態(tài)GIF應(yīng)用的比較廣，而在靜態(tài)圖像上應(yīng)用基本上已經(jīng)被PNG格式所取代了。小飛在這就不過多討論GIF格式了，一起看看其他三種文件格式的適用情境吧!

什么時(shí)候應(yīng)該使用JPEG?

從上面介紹的JPEG的特性來(lái)看，它更適合用來(lái)存儲(chǔ)具有豐富色彩層次的攝影或?qū)憣?shí)照片。這是因?yàn)樯蕦哟呜S富的圖像一般會(huì)由于陰影、反光或透視等效果形成明暗、深淺不同的區(qū)域，如果我們選擇使用PNG8來(lái)儲(chǔ)存的話，可能一些顏色在調(diào)色板上找不到，導(dǎo)致圖像上一些數(shù)據(jù)的丟失，如果使用PNG24的話，它確實(shí)可以查找到圖像不同層次的顏色，但它會(huì)因數(shù)據(jù)較多增大圖片的體積，嚴(yán)重拖慢加載速度，在網(wǎng)站上也容易顯示不全。所以，JPEG是最好的選擇，它能在盡量壓縮文件大小的情況下較好的還原圖片的品質(zhì)(見下圖)。為什么這里不使用SVG呢?SVG有自身的局限性，由于它是點(diǎn)和線精準(zhǔn)計(jì)算的，一些位圖如攝影元素SVG無(wú)法實(shí)現(xiàn)合適的縮放。

什么時(shí)候應(yīng)該使用PNG?

對(duì)于一些相對(duì)簡(jiǎn)單的圖像來(lái)說(shuō)，使用PNG格式進(jìn)行保存更加適合。以下圖為例，我們可以清晰的看出使用JPG格式完全不壓縮圖像時(shí)文件的大小是使用PNG格式的5倍多，就算是以45%的程度進(jìn)行壓縮，文件仍是比PNG格式的大，而且圖像還出現(xiàn)了失真的問題。相對(duì)而言，PNG格式能在保存很少色彩的情況高度還原這個(gè)圖像。現(xiàn)在用戶平均等待網(wǎng)頁(yè)加載的時(shí)間只有1-3秒，加載速度(受文件大小影響)很大程度上決定了網(wǎng)站的流量，尤其是在移動(dòng)設(shè)備上，使用PNG就可以解決這一問題。另外，在網(wǎng)站需要使用透明背景圖片時(shí)，PNG格式也是比較好的選擇。

什么時(shí)候使用SVG?

SVG主要用來(lái)顯示矢量圖，例如一些形狀、線和點(diǎn)的組合，所以目前很多主流的圖標(biāo)庫(kù)都提供SVG格式的文件。在做網(wǎng)站時(shí)我們經(jīng)常會(huì)遇到這樣一個(gè)問題：是否使用的圖片要為高分辨率的瀏覽器做一些特別的設(shè)置?其實(shí)，這個(gè)問題的答案取決于你的目標(biāo)訪客以及他們的瀏覽需求，畢竟用戶為先嘛。如果希望自己的網(wǎng)站可以很好的適應(yīng)不同的屏幕分辨率時(shí)，使用SVG格式會(huì)方便得多。前面小飛也介紹過，SVG是可以完美適用任何屏幕尺寸還不有損圖片質(zhì)量的矢量格式，占服務(wù)器的空間也很小。另外，如果你想要在網(wǎng)站中應(yīng)用懸浮效果或微妙的動(dòng)畫，SVG也是比較好的選擇，因?yàn)樗梢宰鳛榇a輸出，，使用CSS或Javascript進(jìn)行編輯。其實(shí)SVG也可以包含位圖(也就是GIT、PNG或者JPEG)，還可以被用來(lái)做JS控制的動(dòng)畫。在HTML5的時(shí)代，SVG的用途將會(huì)越來(lái)越廣泛。

總而言之，如果網(wǎng)站中需要使用位圖(更易模仿照片的真實(shí)效果，表現(xiàn)力強(qiáng))，可以根據(jù)不同的情況選擇，如不要求透明度使用JPEG，支持透明背景圖像使用PNG;如果想要使用矢量圖(適應(yīng)任意分辨率而不失真)，使用SVG格式!由于SVG這一特點(diǎn)，不少人認(rèn)為SVG格式和響應(yīng)式網(wǎng)站更配哦，但這并不意味著網(wǎng)站中不能使用位圖。你怎么看?歡迎踴躍留言。快來(lái)起飛頁(yè)自助建站平臺(tái)（）做一個(gè)網(wǎng)站吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！