圖像格式是指計算機存儲圖像的方式。不同的文件格式?jīng)Q定著圖像不同的展示效果以及下載方式，理想的文件格式可以使圖像在不同的設備上都能良好的呈現(xiàn)，最大化發(fā)揮圖像的效用。相反，不恰當?shù)奈募袷讲坏珶o法利用圖片極佳的視覺效果，反而可能會在移動設備上出現(xiàn)顯示不全等問題，影響網(wǎng)站的整體表現(xiàn)，降低用戶體驗的舒適度。那么在做網(wǎng)站時究竟怎樣選擇最適合的文件格式呢?位圖和矢量圖之間有什么不同?什么時候應該使用PNG?哪些地方應該選擇SVG呢?今天小飛就針對這些問題，好好聊一下圖像文件的格式，介紹四種常見的圖像格式，分析分析不同圖像格式的適用情境。
四種常見的圖像格式：
GIF：圖像互換格式
在網(wǎng)站中使用GIF已經(jīng)有一段歷史了。尤其是在建站早期，由于網(wǎng)速較慢，GIF憑借其體積小、成像相對清晰的特征俘虜了大批粉絲。GIF是一種位圖格式，支持透明背景圖像。它可以分為靜態(tài)GIF和動態(tài)GIF，動態(tài)GIF主要是指能夠儲存多幅彩色圖像，當我們將一個文件中的多幅圖像數(shù)據(jù)逐個讀出并顯示到屏幕上，就能夠構(gòu)成一種簡單的動畫。網(wǎng)上很多流行的搞笑gif圖就是這種格式。
JPEG：聯(lián)合圖像專家組
JPEG是JPG的全稱，個人偏好不同在稱呼上可能會有差異。你可以讀"積派哥"也可以按照字母直接讀J P E G。JPEG支持最高級別的壓縮性能，同時具備比較好的重建質(zhì)量，在攝影、視頻處理領域廣為應用。但是這種圖像格式是一種有損壓縮格式，雖然圖像可以壓縮到很小，但可能會丟失一些重復或者不重要的資料，破壞圖像數(shù)據(jù)的完整性。不過，JPEG格式也很靈活，允許選擇圖像壓縮的不同程度，從0%(重壓縮)到100%(零壓縮)。這樣我們可以盡量在圖像質(zhì)量和文件尺寸之間找到一個平衡點，用最少的空間獲取較好的圖像質(zhì)量。實踐表明，60%到75%之間的壓縮程度能夠在很大程度上縮小文件尺寸，還能保證圖像的較高品質(zhì)。JPEG也是一種位圖格式，但它不支持透明背景圖像，更加適合顏色復雜的圖像。
PNG：可移植網(wǎng)絡圖形格式
從某種程度上來說，PNG是GIF和JPEG的結(jié)合體。這是因為它設計之初的目的就是試圖取代GIF和JPEG格式，增加一些這兩種文件格式所不具備的特性。一方面，與GIF格式相比，雖然gif支持透明背景顏色，但它只有1和0兩種透明信息，只有透明和不透明之分，而PNG支持α頻段0到255的透明信息，可以使圖像的透明區(qū)域?qū)哟畏置?，同時還能讓彩色圖像和背景圖片的邊緣呈現(xiàn)完美平滑的融合。另一方面，與JPEG相比，由于PNG使用特殊的編碼方法標記重復出現(xiàn)的數(shù)據(jù)，它可以實現(xiàn)圖像高壓縮比，便于網(wǎng)絡傳輸，與此同時保留與圖像有關的所有細節(jié)，不降低圖像質(zhì)量。這也是PNG最大的特點所在。PNG適合需要重新編輯、顏色復雜或需要透明度的圖像，但它并不能普遍兼容每個應用程序和平臺。PNG還可以分為PNG8和PNG24兩種格式，PNG8是用8位索引值在調(diào)色板上找到一個顏色，PNG24是用24位來保存一個像素值。PNG格式還常作為圖片素材來使用。
SVG：可縮放矢量圖形
與上面三種圖像格式最大的不同在于，SVG并不是位圖格式，而是一種矢量圖形格式，這意味著它可以在任意分辨率上顯示，而不破壞圖像的清晰度和細節(jié) 。這是因為位圖圖像儲存圖像上每一點的像素值，而矢量圖像用點和線來描述物體，能夠提供清晰的畫面。另外，SVG圖像中的文字雖然能呈現(xiàn)圖像化的修飾效果，但卻仍是以文本的形式存在的，能夠為搜索引擎蜘蛛讀取，還便于有視覺障礙的讀者使用工具進行瀏覽。一般來說，SVG文件要比JPEG和GIF的文件要小，在下載或移動設備上顯示時速度也更快。還有一點，SVG圖形很是靈活，我們可以在這樣的矢量圖形之中嵌入位圖圖形。下圖為一些SVG矢量圖標。
不同文件格式的適用情境：
GIF格式現(xiàn)在主要用來創(chuàng)造有趣的動畫，動態(tài)GIF應用的比較廣，而在靜態(tài)圖像上應用基本上已經(jīng)被PNG格式所取代了。小飛在這就不過多討論GIF格式了，一起看看其他三種文件格式的適用情境吧!
什么時候應該使用JPEG?
從上面介紹的JPEG的特性來看，它更適合用來存儲具有豐富色彩層次的攝影或?qū)憣嵳掌?。這是因為色彩層次豐富的圖像一般會由于陰影、反光或透視等效果形成明暗、深淺不同的區(qū)域，如果我們選擇使用PNG8來儲存的話，可能一些顏色在調(diào)色板上找不到，導致圖像上一些數(shù)據(jù)的丟失，如果使用PNG24的話，它確實可以查找到圖像不同層次的顏色，但它會因數(shù)據(jù)較多增大圖片的體積，嚴重拖慢加載速度，在網(wǎng)站上也容易顯示不全。所以，JPEG是最好的選擇，它能在盡量壓縮文件大小的情況下較好的還原圖片的品質(zhì)(見下圖)。為什么這里不使用SVG呢?SVG有自身的局限性，由于它是點和線精準計算的，一些位圖如攝影元素SVG無法實現(xiàn)合適的縮放。
什么時候應該使用PNG?
對于一些相對簡單的圖像來說，使用PNG格式進行保存更加適合。以下圖為例，我們可以清晰的看出使用JPG格式完全不壓縮圖像時文件的大小是使用PNG格式的5倍多，就算是以45%的程度進行壓縮，文件仍是比PNG格式的大，而且圖像還出現(xiàn)了失真的問題。相對而言，PNG格式能在保存很少色彩的情況高度還原這個圖像?，F(xiàn)在用戶平均等待網(wǎng)頁加載的時間只有1-3秒，加載速度(受文件大小影響)很大程度上決定了網(wǎng)站的流量，尤其是在移動設備上，使用PNG就可以解決這一問題。另外，在網(wǎng)站需要使用透明背景圖片時，PNG格式也是比較好的選擇。
什么時候使用SVG?
SVG主要用來顯示矢量圖，例如一些形狀、線和點的組合，所以目前很多主流的圖標庫都提供SVG格式的文件。在做網(wǎng)站時我們經(jīng)常會遇到這樣一個問題：是否使用的圖片要為高分辨率的瀏覽器做一些特別的設置?其實，這個問題的答案取決于你的目標訪客以及他們的瀏覽需求，畢竟用戶為先嘛。如果希望自己的網(wǎng)站可以很好的適應不同的屏幕分辨率時，使用SVG格式會方便得多。前面小飛也介紹過，SVG是可以完美適用任何屏幕尺寸還不有損圖片質(zhì)量的矢量格式，占服務器的空間也很小。另外，如果你想要在網(wǎng)站中應用懸浮效果或微妙的動畫，SVG也是比較好的選擇，因為它可以作為代碼輸出，，使用CSS或Javascript進行編輯。其實SVG也可以包含位圖(也就是GIT、PNG或者JPEG)，還可以被用來做JS控制的動畫。在HTML5的時代，SVG的用途將會越來越廣泛。
總而言之，如果網(wǎng)站中需要使用位圖(更易模仿照片的真實效果，表現(xiàn)力強)，可以根據(jù)不同的情況選擇，如不要求透明度使用JPEG，支持透明背景圖像使用PNG;如果想要使用矢量圖(適應任意分辨率而不失真)，使用SVG格式!由于SVG這一特點，不少人認為SVG格式和響應式網(wǎng)站更配哦，但這并不意味著網(wǎng)站中不能使用位圖。你怎么看?歡迎踴躍留言?？靵砥痫w頁自助建站平臺（）做一個網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
