圖像格式是指計算機存儲圖像的方式。不同的文件格式?jīng)Q定了圖像的不同顯示效果和下載方法。理想的文件格式允許圖像在不同設(shè)備上很好地呈現(xiàn)，從而最大化圖像的實用性。相反，不適當(dāng)?shù)奈募袷讲粌H可以利用圖片的優(yōu)異視覺效果，而且可能導(dǎo)致諸如移動設(shè)備上的不完整顯示，影響網(wǎng)站的整體性能和降低用戶體驗的舒適性等問題。那么在做網(wǎng)站時如何選擇最合適的文件格式呢？位圖和矢量有什么區(qū)別？我什么時候應(yīng)該使用PNG？我應(yīng)該在哪里選擇SVG？今天，小飛將解決這些問題并進行討論。圖像文件的格式引入了四種常見的圖像格式，并分析和分析了不同圖像格式的適用場景。

四種常見的圖像格式：

　　GIF：圖像互換格式

在網(wǎng)站上使用GIF的歷史。特別是在建站的早期，由于網(wǎng)絡(luò)速度慢，GIF以其小巧的尺寸和相對清晰的圖像捕捉了大量的粉絲。 GIF是一種支持透明背景圖像的位圖格式。它可以分為靜態(tài)GIF和動態(tài)GIF。動態(tài)GIF主要指存儲多個彩色圖像的能力。當(dāng)我們逐個讀取并顯示文件中的多個圖像數(shù)據(jù)時，它可以形成一個簡單的動畫。 ?；ヂ?lián)網(wǎng)上許多流行的搞笑GIF都采用這種格式。

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

JPEG是JPG的全名，個人首選項可能在標(biāo)題上有所不同。你可以閱讀'Ji Pai Ge'，你可以直接通過信函閱讀J P E G. JPEG支持最高級別的壓縮性能，同時具有更好的重建質(zhì)量，并廣泛用于攝影和視頻處理。但是，此圖像格式是有損壓縮格式。盡管可以在很小程度上壓縮圖像，但是可能丟失一些重復(fù)或不重要的數(shù)據(jù)，并且可能破壞圖像數(shù)據(jù)的完整性。但是，JPEG格式也很靈活，允許不同程度的圖像壓縮，從0％（再壓縮）到100％（零壓縮）。通過這種方式，我們可以嘗試在圖像質(zhì)量和文件大小之間找到平衡，并以最少的空間獲得更好的圖像質(zhì)量。實踐表明，壓縮率在60％到75％之間可以大大減小文件大小并確保更高的圖像質(zhì)量。 JPEG也是位圖格式，但它不支持透明背景圖像，更適合復(fù)雜的彩色圖像。

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

在某種程度上，PNG是GIF和JPEG的組合。這是因為它最初的目的是嘗試替換GIF和JPEG格式，添加這兩種文件格式中不可用的功能。一方面，與GIF格式相比，雖然gif支持透明背景色，但它只有1和0個透明信息，只有透明和不透明，而PNG支持α帶0到255透明信息可以使圖像透明區(qū)域定義明確，同時允許彩色圖像和背景圖像的邊緣完美和平滑地融合。另一方面，與JPEG相比，PNG使用特殊的編碼方法來標(biāo)記重復(fù)數(shù)據(jù)，這可以實現(xiàn)高圖像壓縮比并且便于網(wǎng)絡(luò)傳輸，同時保留與圖像相關(guān)的所有細(xì)節(jié)而不降低圖像質(zhì)量。這也是PNG的最大特色。 PNG適用于需要重新編輯，復(fù)雜顏色或透明度的圖像，但它并不普遍與每個應(yīng)用程序和平臺兼容。 PNG也可以分為PNG8和PNG24格式。 PNG8使用8位索引值在調(diào)色板上查找顏色，PNG24使用24位來保存像素值。 PNG格式也經(jīng)常用作圖片素材。

　SVG：可縮放矢量圖形

與上述三種圖像格式的最大區(qū)別在于SVG不是位圖格式，而是矢量圖形格式，這意味著它可以以任何分辨率顯示，而不會破壞圖像的清晰度和細(xì)節(jié)。這是因為位圖圖像存儲圖像上每個點的像素值，而矢量圖像使用點和線來描述對象，從而提供清晰的圖像。另外，盡管SVG圖像中的文本可以通過圖形修改，但它仍然以文本的形式存在，可以由搜索引擎蜘蛛讀取，并且還便于視覺障礙的讀者使用工具進行瀏覽。通常，SVG文件小于JPEG和GIF文件，并且在下載或移動設(shè)備上顯得更快。另一點是SVG圖形非常靈活，我們可以在這樣的矢量圖形中嵌入位圖圖形。下圖顯示了一些SVG矢量圖標(biāo)。

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

GIF格式現(xiàn)在主要用于創(chuàng)建有趣的動畫。動態(tài)GIF應(yīng)用程序被廣泛使用，靜止圖像上的應(yīng)用程序基本上已被PNG格式取代。小飛并不是在談?wù)揋IF格式。我們來看看其他三種文件格式的適用場景！

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

根據(jù)上述JPEG的特性，它更適合存儲具有豐富色彩級別的照片或真實照片。這是因為具有豐富色彩級別的圖像通常由于陰影，反射或透視而形成明亮，暗色和陰影區(qū)域。如果我們選擇使用PNG8進行存儲，則可能無法在調(diào)色板上找到某些顏色，從而產(chǎn)生圖像。有些數(shù)據(jù)丟失了。如果您使用PNG24，它可以找到圖像的不同顏色級別，但由于更多數(shù)據(jù)會增加圖像的大小，這會降低加載速度并使其易于在網(wǎng)站上顯示。因此，JPEG是最佳選擇，它可以在盡可能壓縮文件大小時更好地恢復(fù)圖像質(zhì)量（參見下圖）。為什么不在這里使用SVG？ SVG有其自身的局限性。由于對點和線進行了精確計算，因此某些位圖（如照片元素SVG）無法實現(xiàn)適當(dāng)?shù)目s放。

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

對于一些相對簡單的圖像，以PNG格式保存更合適。下圖是一個例子。我們可以清楚地看到，當(dāng)使用JPG格式時，文件的大小是PNG格式的5倍以上。即使壓縮率為45％，文件仍然大于PNG格式。并且圖像也存在失真問題。相比之下，PNG格式可以在非常少的顏色的情況下高度恢復(fù)該圖像?，F(xiàn)在普通用戶等待頁面加載僅1-3秒。加載速度（受文件大小影響）在很大程度上決定了網(wǎng)站的流量，特別是在移動設(shè)備上。 PNG可以解決這個問題。此外，當(dāng)網(wǎng)站需要使用透明背景圖像時，PNG格式是一個不錯的選擇。

什么時候使用SVG?

SVG主要用于顯示矢量圖形，例如形狀，線條和點的組合，因此許多主流圖標(biāo)庫目前提供SVG格式的文件。在做網(wǎng)站時，我們經(jīng)常會遇到這樣一個問題：您是否想使用圖片為高分辨率瀏覽器進行一些特殊設(shè)置？事實上，這個問題的答案取決于您的目標(biāo)訪問者和他們的瀏覽需求，畢竟，用戶是第一個。如果您希望您的網(wǎng)站適應(yīng)不同的屏幕分辨率，使用SVG格式會更方便。正如之前的Xiaofei所提到的，SVG是一種矢量格式，可以完美地適應(yīng)任何屏幕尺寸而不會影響圖像的質(zhì)量，并且服務(wù)器占用的空間也很小。此外，如果您想將懸停效果或微妙動畫應(yīng)用于您的網(wǎng)站，SVG是一個不錯的選擇，因為它可以作為代碼輸出，使用CSS或Javascript進行編輯。實際上，SVG也可以包含位圖（即GIT，PNG或JPEG），也可以用于JS控制的動畫。在HTML5時代，SVG的使用將變得越來越廣泛。

總之，如果您需要在您的網(wǎng)站中使用位圖（更有可能模仿照片的真實效果，您可以表達(dá)它們），您可以根據(jù)不同的情況選擇，例如不使用JPEG進行透明，PNG進行透明背景圖像，并使用矢量圖形（適應(yīng)任何分辨率而不失真），使用SVG格式！由于SVG的特點，很多人認(rèn)為SVG格式和響應(yīng)式網(wǎng)站更合適，但這并不意味著位圖不能在網(wǎng)站中使用。你怎么看？歡迎留言。來到起飛頁自助網(wǎng)站（http://www.qifeiye.com/?t_wd=a5）成為一個網(wǎng)站！

« BAOCMS外賣2.0系統(tǒng)戰(zhàn)斗組：梯子組怎么玩 | 京東宣布反腐敗進展：很多人被刑事拘留 »