|
|
|
|
|
有幾十種圖像文件類型,每種都根據(jù)壓縮類型、格式和瀏覽器支持而變化。但最常用的兩種格式是 SVG 和 PNG 格式。
這兩種文件類型的區(qū)別再大不過(guò)了——每一種都更適合特定的情況。
SVG 代表Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量文件格式。讓我們分解一下:
矢量是用 XML 編寫的代碼片段,表示形狀、線條和顏色,以詳細(xì)說(shuō)明其工作原理。
雖然完全可以用代碼創(chuàng)建圖像,但大多數(shù)人使用矢量圖形編輯器,如 Inkscape 或 Adob??e Illustrator。你還可以將 PNG或其他光柵圖像轉(zhuǎn)換為 SVG,但結(jié)果并不總是很好。
當(dāng)頁(yè)面加載時(shí),此代碼將轉(zhuǎn)換為圖形,因此你無(wú)法立即將 SVG 與 PNG 區(qū)分開(kāi)來(lái)。但是因?yàn)?SVG 只是轉(zhuǎn)換為像素的代碼行,這意味著它們可以縮放到任何分辨率——無(wú)論大小——而不會(huì)損失質(zhì)量。
放大的SVG示例
SVG 還支持動(dòng)畫和透明度,使其成為一種通用的文件格式。
唯一的問(wèn)題是它不像 PNG 等更標(biāo)準(zhǔn)的格式那樣廣泛使用,因此它在較舊的瀏覽器和設(shè)備上的支持較少,而且將其上傳到你的站點(diǎn)并使其正確顯示并不總是最容易的。
盡管仍不如 PNG 等光柵文件類型廣泛使用,但矢量圖形的流行度正在迅速增長(zhǎng)。他們完成了一些光柵圖像無(wú)法完成的基本任務(wù)。這就是人們喜歡 SVG 的原因。
SVG 在 PNG 上有相當(dāng)多的優(yōu)勢(shì),從可擴(kuò)展到更小的尺寸,但并非在每種情況下都更好。這是矢量文件類型的缺點(diǎn)。
雖然你絕對(duì)不應(yīng)該將所有 PNG 轉(zhuǎn)換為 SVG,但矢量圖形可以很好地替代某些圖像。
SVG 圖像特別適用于裝飾性網(wǎng)站圖形、徽標(biāo)、圖標(biāo)、圖形和圖表以及其他簡(jiǎn)單圖像。
但是,它們不適用于涉及許多顏色和形狀的復(fù)雜圖像,例如屏幕截圖、攝影,甚至是詳細(xì)的藝術(shù)品。雖然可以將任何圖像轉(zhuǎn)換為 SVG,但瀏覽器并不總是能很好地處理具有數(shù)百種顏色的復(fù)雜矢量,因?yàn)樗鼈儽仨氃陧?yè)面加載時(shí)呈現(xiàn)。
此外,SVG 藝術(shù)品可以很漂亮,但設(shè)計(jì)復(fù)雜的圖像需要大量的時(shí)間、精力和熟練的高級(jí)編輯工具。如果您想創(chuàng)建矢量圖像,請(qǐng)保持簡(jiǎn)單。
如果你有詳細(xì)的圖像,一定要堅(jiān)持使用 PNG。
然而,由于 SVG 的可擴(kuò)展性和沒(méi)有質(zhì)量下降的情況,SVG 更適合響應(yīng)式和視網(wǎng)膜就緒的網(wǎng)頁(yè)設(shè)計(jì)。此外,它們支持動(dòng)畫,而 PNG 不支持,支持動(dòng)畫的光柵文件類型(如 GIF、APNG 和WebP )都存在問(wèn)題。
對(duì)于可能需要?jiǎng)赢嫴⒈WC在任何屏幕尺寸上都能很好地縮放的簡(jiǎn)單圖形,請(qǐng)使用 SVG。
PNG 代表便攜式網(wǎng)絡(luò)圖形,這個(gè)名稱反映在這種文件類型的廣泛性上。任何使用過(guò)計(jì)算機(jī)的人都可能使用過(guò) PNG,因?yàn)樗?Internet 上僅次于 JPEG的最常見(jiàn)的文件類型。
PNG 是一種光柵圖像文件類型,類似于最常見(jiàn)的圖像格式。這意味著它由像素組成,即在你的顯示器或屏幕上顯示的相同小點(diǎn)。雖然這使它易于顯示,但也意味著圖像質(zhì)量取決于分辨率——圖像中有多少像素。
因此,如果你放大或縮小光柵圖像的大小,質(zhì)量會(huì)受到影響。有時(shí)損害可以忽略不計(jì),尤其是在按比例縮小時(shí),有時(shí)它會(huì)使圖像變得模糊且完全無(wú)法使用。
放大的PNG示例
盡管如此,PNG 的流行使其成為通用用途的良好候選者。此文件類型支持透明度,但不支持動(dòng)畫。
是什么讓 PNG 成為在線使用最廣泛的圖像文件格式?以下是優(yōu)點(diǎn):
另一方面,PNG 格式是幾十年前創(chuàng)建的,并且有幾個(gè)尚未更新到現(xiàn)代的顯著缺陷。
PNG 是最常見(jiàn)的文件類型是有原因的;它用途廣泛,幾乎適合任何情況。使用它時(shí)需要考慮一些缺陷,例如它們的大文件大小和缺乏可擴(kuò)展性。
PNG 適用于顯示詳細(xì)的圖像、藝術(shù)品和攝影——矢量圖像無(wú)法處理的所有內(nèi)容。任何具有數(shù)百種顏色和高分辨率的東西都應(yīng)該是 PNG。
這并不是說(shuō)你不能將 PNG 用于更直接的圖像,例如徽標(biāo)和裝飾圖形,但 SVG 會(huì)更適合這項(xiàng)任務(wù)。
當(dāng)你不確定平臺(tái)是否會(huì)處理更新的、受支持較少的 SVG 文件類型時(shí),PNG 是你的最佳選擇——如果只是為了安全的話。
例如,你不能將 SVG 上傳到大多數(shù)社交媒體。由于某些電子郵件客戶端可能會(huì)遇到矢量問(wèn)題,因此通常建議在電子郵件模板中堅(jiān)持使用 PNG。
一般來(lái)說(shuō),PNG 可以很好地處理任何復(fù)雜的非動(dòng)畫圖像,尤其是那些需要透明度的圖像。你幾乎可以在任何地方使用它;只是有時(shí) SVG 會(huì)更合適。
請(qǐng)記住,如果你的 SVG 無(wú)法加載,你始終可以使用PNG 后備,因此即使你的大部分用戶群堅(jiān)持使用舊設(shè)備或?yàn)g覽器,使用矢量通常也是安全的。
兩種文件類型都不比另一種更好或更差;每個(gè)都有其局限性。盡管 SVG 在某些方面優(yōu)于 PNG,但 PNG 在處理某些事情方面要好得多。
不過(guò),一般來(lái)說(shuō),你應(yīng)該在適當(dāng)?shù)那闆r下堅(jiān)持使用 SVG,并在矢量無(wú)法處理的所有其他情況下使用 PNG。在這些情況下,你可能在技術(shù)上可以使用其中任何一種,但 SVG 在某些特定領(lǐng)域更可取。
雖然 SVG 支持動(dòng)畫,但 PNG 不支持。像 GIF 和 APNG 這樣的光柵文件類型可以被認(rèn)為是替代品。盡管如此,仍然沒(méi)有完美的動(dòng)畫光柵格式得到廣泛支持、廣為人知、質(zhì)量高、文件大小小。SVG 滿足所有這些利基。
SVG 還可以完美地縮放到任何屏幕尺寸,使其在默認(rèn)情況下具有響應(yīng)性和視網(wǎng)膜就緒。PNG 在調(diào)整大小時(shí)會(huì)降低質(zhì)量,并且讓它們很好地縮放是一件麻煩事——尤其是當(dāng)您只有在大屏幕上無(wú)法很好顯示的小圖像時(shí)。
最后,SVG 通常比 PNG 小,因此盡管需要在加載時(shí)渲染,但它們對(duì)您的服務(wù)器的負(fù)擔(dān)更少。
將它們用于你網(wǎng)站上的簡(jiǎn)單、純色藝術(shù)品、徽標(biāo)和裝飾圖形。
另一方面,PNG 適合以高分辨率顯示復(fù)雜的圖形,或具有數(shù)千種顏色的圖片。SVG 目前無(wú)法處理那么多顏色和形狀。
這些復(fù)雜的圖像通常會(huì)構(gòu)成你網(wǎng)站上的大部分圖片,所以現(xiàn)在還不是扔掉 PNG 的時(shí)候。
并且 PNG 在瀏覽器和特定平臺(tái)(如電子郵件客戶端)上得到更廣泛的支持。如果你不確定 SVG 是否會(huì)正確渲染,請(qǐng)謹(jǐn)慎行事并使用 PNG。
SVG 和 PNG 是兩種截然不同的文件格式。最后,在非常小眾的用例之外,在你的網(wǎng)站上使用 PNG 還是 JPEG 并不是什么大問(wèn)題,但在 SVG 和 PNG 之間進(jìn)行選擇是一個(gè)更重要的選擇。
你更有可能使用 PNG,因?yàn)樗且环N更簡(jiǎn)單、更易于訪問(wèn)且用途更廣泛的文件格式。屏幕截圖和詳細(xì)插圖等復(fù)雜圖像應(yīng)使用 PNG。
雖然 SVG 更難創(chuàng)建和編輯,但與 PNG 相比,它們具有多種優(yōu)勢(shì)。只要適合使用矢量圖像,例如裝飾性圖形和徽標(biāo),就一定要使用 SVG。
你不太可能將網(wǎng)站上的每張圖片都換成 SVG,但它們的響應(yīng)能力和較小的文件大小使它們成為某些情況下的理想選擇。