SVG vs PNG vs JPG：圖像格式優(yōu)點(diǎn)和缺點(diǎn)
在為網(wǎng)絡(luò)和其他數(shù)字用途創(chuàng)建圖像時(shí)，哪種文件格式會(huì)給您帶來最佳效果？你必須考慮速度與圖像質(zhì)量和規(guī)模。那么你應(yīng)該使用什么：SVG vs PNG vs JPG？
曾經(jīng)有一段時(shí)間你剛剛使用了一個(gè)尺寸合適的JPG來適應(yīng)72 dpi的空間并繼續(xù)前進(jìn)。不再。高分辨率屏幕，多個(gè)視口以及需要擁有一個(gè)活潑的網(wǎng)站使得它成為一個(gè)更加復(fù)雜的過程。讓我們深入了解每種格式的優(yōu)缺點(diǎn)！
SVG
SVG看起來很棒，適用于除照片之外的任何類型的圖像。
SVG或可縮放矢量圖形非常實(shí)用。這就是設(shè)計(jì)師更頻繁地使用它的原因。
因?yàn)镾VG是一種矢量格式，所以它們看起來很棒，適用于除照片之外的任何類型的圖像。
SVG是一種無損格式 - 意味著它在壓縮時(shí)不會(huì)丟失任何數(shù)據(jù) - 呈現(xiàn)無限數(shù)量的顏色，最常用于網(wǎng)絡(luò)上的圖形和徽標(biāo)以及將在視網(wǎng)膜或其他高分辨率屏幕上查看的項(xiàng)目。
SVG的優(yōu)點(diǎn)
矢量格式呈現(xiàn)任何大小
能夠在代碼或文本編輯器中創(chuàng)建簡(jiǎn)單的SVG渲染
從Adobe Illustrator或Sketch設(shè)計(jì)和導(dǎo)出復(fù)雜圖形
可以訪問SVG文本
SVG很容易設(shè)計(jì)風(fēng)格和腳本
現(xiàn)代瀏覽器支持SVG格式，并且面向未來
格式具有高度可壓縮性和輕量級(jí)
由于基于文本的格式，因此適合搜索
支持透明度
允許靜止或動(dòng)畫圖像
SVG的缺點(diǎn)
設(shè)計(jì)SVG可能會(huì)變得復(fù)雜
不要在某些降級(jí)的瀏覽器上呈現(xiàn)
電子郵件客戶端支持有限
想知道更多？我們有兩個(gè)導(dǎo)游介紹更多關(guān)于SVG：實(shí)用新手指南SVG和如何（為什么）SVG是將接管。
PNG
PNG提供了JPG無法提供的東西 - 透明度。
PNG，或便攜式網(wǎng)絡(luò)圖形，是一種為網(wǎng)絡(luò)設(shè)計(jì)的格式，提供JPG無法提供的東西 - 透明度。僅此一點(diǎn)就是為什么PNG如此受歡迎，以便將徽標(biāo)等元素上傳到網(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)點(diǎn)
支持透明度
適用于帶有文字的圖像
PNG格式可以很好地呈現(xiàn)徽標(biāo)
包括搜索引擎的嵌入式文本說明
PNG-8文件很小，重量最輕
出口沒有鋸齒狀邊緣
PNG的缺點(diǎn)
對(duì)于大型文件（如圖像），文件大小會(huì)快速增長(zhǎng)
一些較舊的電子郵件客戶端無法呈現(xiàn)它們
沒有動(dòng)畫
PNG-24文件可能變大; 不太適合網(wǎng)絡(luò)共享
JPEG
每次重新保存照片并將其導(dǎo)出為JPG時(shí)，它都會(huì)降級(jí)。
JPG或聯(lián)合圖像專家組（JPEG）可能是最知名的圖像格式。這是大多數(shù)圖像保存的默認(rèn)選項(xiàng)，因?yàn)樗鼛缀蹩梢詿o限制地顯示彩色照片。
JPG還提供了選擇圖像壓縮程度從0％（重壓縮）到100％（無壓縮）的能力。大多數(shù)設(shè)計(jì)師選擇60％到70％的產(chǎn)品。圖像在此壓縮級(jí)別仍然看起來很好，但文件大小要小得多。
JPG使用有損壓縮，并且在壓縮期間不維護(hù)原始數(shù)據(jù)。每次重新保存照片并將其導(dǎo)出為JPG時(shí)，它都會(huì)降級(jí)。
JPG格式最常用于圖像，攝影和任何具有大量顏色的東西。
JPEG的優(yōu)點(diǎn)
非常適合高色彩和攝影
易于減小文件大小
在電子郵件客戶端中始終呈現(xiàn)
JPEG的缺點(diǎn)
沒有透明度
為文本創(chuàng)建鋸齒狀邊緣
沒有動(dòng)畫
有損格式
沒有自動(dòng)搜索元數(shù)據(jù)，必須包含alt信息
你應(yīng)該使用什么格式？
現(xiàn)在您已經(jīng)知道SVG與PNG和JPG之間存在哪些差異，您應(yīng)該使用什么？
你可以問自己幾個(gè)問題來得到答案。
你需要矢量或光柵格式嗎？
矢量：SVG
Raster：JPG或PNG
你需要透明度嗎？
是：SVG或PNG
No：JPG
你使用的是高彩色圖像嗎？
是：JPG或PNG
No：SVG
這是一張大照片嗎？
是的：JPG
No：PNG
圖像是否包含文字？
是的：PNG
No：JPG
無損壓縮對(duì)您來說很重要嗎？
是：SVG或PNG
No：JPG
是否需要更新和重新部署圖形？
是：SVG
No：PNG或JPG
你在用動(dòng)畫嗎？
是：SVG
No：JPG或PNG
結(jié)論
所有三種圖像格式 - SVG，PNG和JPG - 都具有實(shí)用和廣泛的應(yīng)用。雖然SVG是最新的格式，并且通常可以保存到最小的文件大小，但它并不總是最佳選擇。
在選擇文件類型時(shí)，考慮如何在項(xiàng)目中使用圖像，以找到最適合您要完成的項(xiàng)目的文件類型。您甚至可能會(huì)發(fā)現(xiàn)項(xiàng)目包含使用所有三種文件類型的圖像。
意派Coolsite360交互式線網(wǎng)頁編輯系統(tǒng)
“創(chuàng)意不該受技術(shù)束縛，交互可以變得簡(jiǎn)單有趣”