在為線上網(wǎng)絡(luò)和其他有關(guān)數(shù)字媒體（尤其是在網(wǎng)站設(shè)計(jì)項(xiàng)目中）創(chuàng)建圖像時(shí)，哪種文件格式可以給你帶來最佳的視覺效果呢？ 你必須同時(shí)考慮速度與圖像質(zhì)量和規(guī)模。 所以，你應(yīng)該使用什么格式的圖像文件呢：SVG vs PNG vs JPG？

曾經(jīng)有一段時(shí)間你只需要使用一個(gè)尺寸合適的JPG來就可以適應(yīng)72 dpi的空間。 但是這種情況現(xiàn)在很難實(shí)現(xiàn)了，隨著高分辨率屏幕的普及，多種設(shè)備以及活潑的網(wǎng)站效果使得它成為一個(gè)更加復(fù)雜的過程。 所以讓我們深入了解每種格式的優(yōu)缺點(diǎn)！

SVG

SVG或者稱之為可縮放矢量圖形非常實(shí)用。 這就是設(shè)計(jì)師為什么更頻繁地使用它的原因。

因?yàn)镾VG是一種矢量格式，所以不管在什么分辨率和尺寸下它們都能保持很好的視覺輸出，適用于除照片之外的任何類型的圖像。

SVG實(shí)際上是一種無損格式 - 意味著它在壓縮時(shí)不會(huì)丟失任何數(shù)據(jù) - 并且可以呈現(xiàn)不同的顏色，最常用于網(wǎng)絡(luò)上的圖標(biāo)和logo以及我們現(xiàn)在在視網(wǎng)膜屏或其他高分辨率屏幕上查看的項(xiàng)目很多都采用了這種文件格式。

SVG格式的優(yōu)勢：

· 矢量格式可以呈現(xiàn)任何大小而不降低其質(zhì)量；

· 能夠在代碼或文本編輯器中創(chuàng)建簡單的SVG渲染；

· 可以從Adobe Illustrator或Sketch設(shè)計(jì)和導(dǎo)出復(fù)雜圖形

· 可以訪問SVG文本；

· SVG很容易設(shè)計(jì)風(fēng)格和腳本；

· 現(xiàn)代瀏覽器支持SVG格式，并且有很廣闊的未來；

· 格式具有高度可壓縮性和輕量級(jí)

· 由于基于文本的格式，因此有利于SEO；

· 支持透明度；

· 允許靜止或動(dòng)態(tài)圖像。

SVG格式的劣勢：

· 設(shè)計(jì)SVG可能會(huì)變得復(fù)雜；

· 無法在某些低版本的瀏覽器上呈現(xiàn)；

·  對(duì)于郵件客戶來說，它的格式有限。

PNG

PNG，或者你可以稱其為便攜式網(wǎng)絡(luò)圖形，是一種為網(wǎng)站設(shè)計(jì)所準(zhǔn)備的圖片格式，可以提供JPG圖像格式無法提供的東西 - 透明度。 僅此一點(diǎn)，就是為什么PNG如此受歡迎的原因，該格式的圖像元素可以很方便被上傳到網(wǎng)站設(shè)計(jì)中。

有兩種類型的PNG格式——PNG-8和PNG-24。 PNG-8使用更有限的調(diào)色板，只有256種顏色，透明度更好，輸出的尺寸更小。 PNG-24使用無限的調(diào)色板，保持透明度，但輸出的尺寸更大，文件大小也更大。 兩種PNG類型都可以無損壓縮。

雖然PNG格式與GIF類似，但它們不支持動(dòng)畫。 此格式最常用于圖標(biāo)，小型靜止圖像或任何需要透明度的圖像。

PNG格式的優(yōu)勢：

· 支持透明度；

· 適用于帶有文字的圖像；

· PNG格式可以很好地展示logo；

· 可以為了SEO的優(yōu)化嵌入文本說明；

· PNG-8文件很小，重量最輕；

· 格式輸出不會(huì)存在鋸齒狀邊緣。

PNG格式的劣勢：

· 對(duì)于大型文件（如圖像），文件大小會(huì)隨著圖像的尺寸設(shè)定而明顯；

· 一些較舊的電子郵件客戶端無法呈現(xiàn)它們；

· 不支持動(dòng)態(tài)效果；

· PNG-24文件可能會(huì)很大，不太適合用于共享。

JPEG

JPG或Joint Photographic Experts Group，就是我們所說的（JPEG）可能是最知名并且目前來說使用最廣的圖像格式了。 這是大多數(shù)圖像保存的默認(rèn)選項(xiàng)，因?yàn)樗鼛缀蹩梢詿o限制地顯示彩色照片。

JPG還提供了可以將圖像壓縮程度從0％（重壓縮）到100％（無壓縮）的選項(xiàng)。 大多數(shù)設(shè)計(jì)師選擇60％到70％的參數(shù)。 圖像在此壓縮級(jí)別仍然看起來很好，但文件大小要小得多。

JPG使用有損壓縮，并且在壓縮期間不保存原始數(shù)據(jù)。 每次重新保存照片并將其導(dǎo)出為JPG時(shí)，它都會(huì)降級(jí)。

JPG格式最常用于圖像，攝影和任何具有大量顏色的東西。

JPEG格式的優(yōu)勢：

· 非常適合高色彩和攝影圖像；

· 易于縮減文件大小；

· 在電子郵件客戶端中能夠很好的兼容。

JPEG格式的劣勢：

· 沒有透明度；

· 圖像中的文本在存儲(chǔ)后悔出現(xiàn)鋸齒狀邊緣；

· 不支持動(dòng)效；

· 有損格式；

· 沒有有利于SEO的數(shù)據(jù)，必須通過添加alt標(biāo)簽來優(yōu)化。

你應(yīng)該使用什么格式？

現(xiàn)在你已經(jīng)知道SVG與PNG和JPG之間存在哪些差異，你應(yīng)該如何選擇使用呢？

你可以試著問你自己幾個(gè)問題來得到答案。

· 你需要矢量還是光柵格式？

矢量：svg

柵格：png或jpg

· 你需要透明度嗎？

需要：png或svg

不需要：jpg

· 你需要一個(gè)高色值或顏色豐富的圖像嗎？

需要：png或jpg

不需要：svg

· 你要使用的是否是一個(gè)大圖片？

是：jpg

不是：png

· 圖像上需要保存文本內(nèi)容嗎？

需要：png

不需要：jpg

· 對(duì)于你來說無損和有損壓縮是否重要？

重要：svg或png

不重要：jpg

· 是否需要更新和重新部署圖形？

是：svg

否：png或jpg

· 是否需要?jiǎng)有л敵觯?/em>

是：svg

否：png或jpg

總結(jié)

所有三種圖像格式 - SVG，PNG和JPG - 都具有實(shí)用和廣泛的應(yīng)用。 雖然SVG是最新的格式，并且通?？梢员４娴阶钚〉奈募笮?，但對(duì)于不同的項(xiàng)目和需求，它并不總是最佳選擇。

在選擇文件類型時(shí)，考慮如何在項(xiàng)目中使用圖像，以找到最適合你要完成的項(xiàng)目的文件類型。 你甚至可能會(huì)發(fā)現(xiàn)項(xiàng)目中經(jīng)常會(huì)包含使用所有三種文件類型的圖像（這實(shí)際上很常見！）。