JPG、PNG、SVG到底要選哪個(gè)開發(fā)對(duì)接不再頭疼

1、作為設(shè)計(jì)師，除了廢寢忘食做設(shè)計(jì)，與開發(fā)對(duì)接無(wú)疑是最費(fèi)心、最費(fèi)力的事情，做不好不僅吃力不討好，還耗費(fèi)大量精力和頭發(fā)，那設(shè)計(jì)師在圖片設(shè)計(jì)導(dǎo)出中應(yīng)該注意哪些問(wèn)題才能更好適配移動(dòng)端、網(wǎng)頁(yè)端各種不同的端口，又有哪些工具可以讓我們更加高效操作，減輕團(tuán)隊(duì)負(fù)擔(dān)呢？常見(jiàn)格式的特點(diǎn)首先看看JPG、PNG、SVG、WebP這幾種常見(jiàn)格式有什么特點(diǎn)，又適用于什么呢？從好幾個(gè)不同的維度，我們大致歸納了不同格式各自的特點(diǎn)，但魚與熊掌不可兼得，大多數(shù)時(shí)候某種格式它總有更適合使用的地方，那一起來(lái)來(lái)看看吧！JPGJPG 是一種有損光柵圖像格式，這意味著每次保存壓縮的 JPG 時(shí)，都會(huì)不可逆地留下一些信息。這就是為什么我們常見(jiàn)的

2、高糊圖，常常都是JPG格式，但也是最好傳播的。JPG 利用人眼感知的缺陷我們對(duì)亮度比對(duì)顏色更敏感因此它使用壓縮算法來(lái)丟棄我們不擅長(zhǎng)感知的信息，因此命名為“有損格式”。應(yīng)用于給定圖像的壓縮量將與生成的文件的質(zhì)量和大小直接相關(guān)。優(yōu)點(diǎn)：文件大小最小最適合高品質(zhì)照片兼容網(wǎng)絡(luò)和任何設(shè)備缺點(diǎn)：壓縮太多，圖像質(zhì)量會(huì)大大降低JPG 不支持透明背景JPG 的適用的地方JPG 最適合非移動(dòng)照片和其他不需要透明背景的文件。我們要避免在彩色背景上使用 JPG。它適用于亮度和顏色壓縮，所以 JPG 非常適用于圖片和其他逼真或陰影圖像，如繪畫和 3D 渲染。這就是為什么它多年來(lái)一直是最流行的圖片存儲(chǔ)格式。出于同樣的原因，

3、JPEG 對(duì)圖形（例如徽標(biāo)、幾何圖形、屏幕截圖等）的處理效果不佳?？梢詮?JPG 中剝離元數(shù)據(jù)以減小文件大小。模糊圖像或圖像區(qū)域也會(huì)導(dǎo)致文件變小。JPG適合包含多種顏色的復(fù)雜圖片壓縮后會(huì)損失嚴(yán)重PNG該便攜式網(wǎng)絡(luò)圖形也是一個(gè)光柵圖像格式，它出現(xiàn)自1995年，是與JPG不同，因?yàn)樗且环N無(wú)損格式，是目前最常見(jiàn)的無(wú)損格式，這意味著當(dāng)一個(gè)文件保存和壓縮，不會(huì)因壓縮算法丟失任何信息。優(yōu)點(diǎn)：能夠擁有透明背景，以便在彩色背景上分層圖像可以壓縮而不會(huì)損失與 JPG 一樣多的質(zhì)量缺點(diǎn)：文件大小往往比 JPG 大不支持動(dòng)畫PNG的適用的地方PNG 非常適合用于線條圖、徽標(biāo)、圖標(biāo)和顏色很少的圖像。另一方面，具有多

4、種顏色的圖片和圖像將導(dǎo)致文件大小過(guò)大。PNG 的另一個(gè)重要用途是當(dāng)你需要使用透明背景時(shí)。在這種情況下，即使對(duì)于復(fù)雜的圖片，仍然可以使用 PNG，因?yàn)?JPG 中不存在透明度功能。PNG 非常適合用于線條圖、徽標(biāo)、圖標(biāo)，或需要透明背景的圖片SVG可縮放矢量圖形或 SVG，是一種基于可擴(kuò)展標(biāo)記語(yǔ)言 (XML) 的二維圖形矢量圖像格式。它支持交互性和動(dòng)畫?？梢允褂美L圖軟件或任何文本編輯器創(chuàng)建和編輯 SVG 圖像。SVG格式是UI設(shè)計(jì)師相當(dāng)熟悉的格式了，開發(fā)交接我們離不開它。SVG格式使用文本來(lái)定義圖像，讓可以在不損失質(zhì)量的情況下縮放圖像。它與分辨率無(wú)關(guān)，鼓勵(lì)在網(wǎng)頁(yè)設(shè)計(jì)中使用 SVG 格式，因?yàn)樗梢?/p>

5、更改以適應(yīng)未來(lái)的變化。另一個(gè)優(yōu)點(diǎn)是可以使用 GZIP 壓縮輕松壓縮SVG ，使文件縮小 50% 到 80%，而不會(huì)丟失任何信息。在軟件方面，可以使用許多程序創(chuàng)建和操作 SVG 文件。其中包括Adobe Illustrator、其他 Adobe程序、Microsoft Visio和CorelDraw。SVG 因 Web 的當(dāng)前狀態(tài)而獲得了很多關(guān)注?；ヂ?lián)網(wǎng)變得越來(lái)越緩慢。第三方cookie、跟蹤器、廣告、javascript ，不必要代碼的數(shù)量對(duì)速度有相當(dāng)大的影響。如今對(duì)于用戶來(lái)說(shuō)，等待5秒已是極限，5g時(shí)代背景下更是如此。如果不想要大量的跳出率，必須考慮用戶體驗(yàn)。等待不是一個(gè)積極的特征，這在很大

6、程度上取決于用戶界面。隨著網(wǎng)絡(luò)變得越來(lái)越復(fù)雜，站點(diǎn)可能會(huì)變得臃腫，這不僅是因?yàn)榇a層，還因?yàn)閳D像的大小。許多設(shè)計(jì)師和開發(fā)人員使用 PNG、JPG 和 GIF 來(lái)加載屏幕和登錄頁(yè)面，有時(shí)這可能沒(méi)問(wèn)題。但是，如果有機(jī)會(huì)用輕量級(jí) SVG 替換它們，可能會(huì)看到加載時(shí)間、性能以及最重要的用戶體驗(yàn)方面的改進(jìn)。SVG 為日常網(wǎng)絡(luò)用戶提供了一種解脫。優(yōu)點(diǎn)：文件大小小無(wú)限大?。ㄊ噶浚┒粫?huì)降低質(zhì)量開發(fā)人員的靈活性（可以更改設(shè)置，包括顏色和大?。┛梢栽谑噶砍绦蛑羞M(jìn)行編輯，例如AIS可以在 Microsoft Office 產(chǎn)品中支持圖形可以動(dòng)畫缺點(diǎn)：圖像質(zhì)量和文件大小與顏色數(shù)量有關(guān)。圖像中的顏色越多，圖像越清晰，

7、但文件越大。圖像中的顏色越少，圖像越有顆粒感，但文件大小越小。我們只能使用 256 色的圖像。簡(jiǎn)單圖形圖標(biāo)或動(dòng)圖都很適合WebPWebP 是一種由 Google 開發(fā)的圖像格式，它允許網(wǎng)頁(yè)設(shè)計(jì)人員創(chuàng)建具有小文件大小的豐富圖像的站點(diǎn)。優(yōu)點(diǎn)：免費(fèi)的存儲(chǔ)空間：當(dāng)圖像占用更少的空間時(shí)，網(wǎng)絡(luò)托管不會(huì)受到影響。更快的加載時(shí)間：緩慢的頁(yè)面加載速度會(huì)對(duì)您的 SEO 排名產(chǎn)生負(fù)面影響。實(shí)現(xiàn)更快加載時(shí)間的一種方法是壓縮圖像，從而釋放磁盤空間。完整性：WebP 結(jié)合了有損和無(wú)損壓縮，以確保您獲得兩者的好處。兼容性：WebP雖然還沒(méi)有通用的兼容性，但是Chrome和Opera用戶仍然可以廣泛使用WebP；Firefo

8、x 和 Safari 等瀏覽器可以使用 WebP，但需要插件。高質(zhì)量：WebP 格式比 JPG 圖像小約 30%，比 PNG 格式小近 25%。盡管如此，質(zhì)量指數(shù)沒(méi)有差異。缺點(diǎn)：并非所有瀏覽器都支持盡管 WebP 擁有大部分瀏覽器，但仍有一些不支持它（Internet Explorer 采用它的速度很慢，這是 Internet Explorer 的品牌）。有一種解決方法涉及在 HTML 中創(chuàng)建后備圖像，但創(chuàng)建一個(gè)完整的其他文件作為備份有時(shí)會(huì)抵消首先使用 WebP 節(jié)省的所有額外存儲(chǔ)空間。質(zhì)量仍然下降與其說(shuō)是 WebP 的缺點(diǎn)，不如說(shuō)是所有有損壓縮的缺點(diǎn)，圖像質(zhì)量仍然下降。對(duì)于大多數(shù)人來(lái)說(shuō)，數(shù)量

9、可以忽略不計(jì)，但對(duì)于攝影或平面設(shè)計(jì)作品集等視覺(jué)網(wǎng)站，希望獲得最大的視覺(jué)質(zhì)量。JPEG 格式562 KB，WebP 格式416 KB ，小了 25%。比較圖像格式文件大小與質(zhì)量的圖表，以結(jié)構(gòu)相似性 (SSIM) 衡量。設(shè)計(jì)中的選擇知道了以上四種常見(jiàn)圖像格式類型，但運(yùn)用在我們的設(shè)計(jì)中，才能發(fā)揮實(shí)際作用，用對(duì)了年終績(jī)效蹭蹭漲，用不對(duì)又免不了被甲方爸爸一頓敲打，那么我們?cè)谶M(jìn)行設(shè)計(jì)中又應(yīng)該如何進(jìn)行選擇呢？當(dāng)我們需要圖片時(shí)圖片通常在有損壓縮方面表現(xiàn)很好（取決于編碼器的配置）。這使得JPG和WebP成為圖片的不錯(cuò)選擇，JPG 更兼容，但 WebP 可能提供更好的壓縮。為了最大限度地提高質(zhì)量并最大限度地減少下載時(shí)間，請(qǐng)考慮使用WebP 作為第一選擇和 JPG 作為第二選擇的回退。否則，JPEG 是兼容性的安全選擇。當(dāng)我們需要設(shè)計(jì)icon時(shí)對(duì)于圖標(biāo)等較小的圖像，使用無(wú)損格式可以避免在尺寸受限的圖像中丟失細(xì)節(jié)。雖然無(wú)損 WebP 是實(shí)現(xiàn)此目的的理想選擇，但支持尚不廣泛，因此 PNG 是更好的選擇。如果圖像包含少于 256 種顏色，GIF也是一種選擇，盡管 PNG 通常使用其索引壓縮選項(xiàng) (PNG-8) 壓縮得更小。如果可以使用矢量圖形表示圖標(biāo)，請(qǐng)考