在網頁上使用JPG、PNG和SVG：新手指南

如今，影象已經成為網路不可或缺的一部分。但情況並非一貫如此。直到1993年，Mosaic瀏覽器才在網頁內容中加入影象。有些影象格式像GIF和JPEG當時已經存在，而PNG和SVG直到90年代才出現。影象用途多樣，如：顯示圖片、品牌、插圖、圖表以及許多其他內容。

由於圖片格式多樣以及繁多的應用場景，如何選擇正確的圖片格式變得更加困難。LOGO應該是選擇SVG還是PNG？而截圖是選JPEG好還是PNG好？在不生成過大檔案的前提下，檔案的最優質量是多少？瞭解每個影象格式的工作原理以及它們各自的利弊可以幫助回答這些問題。

在過去幾年中，數字化設計和前端開發裡大量的研究和測試工具已經幫助我們搞清楚了這些問題。在本文中，我將展示一下每種格式的工作原理，它們各自的優點以及在網頁使用時的壓縮與儲存方法。

JPEG

JEPG由聯合影象專家小組（Joint Photographic Experts Group）於1992年建立，並以建立者命名。JPEG是一種有損光柵影象格式，這意味著每次壓縮儲存JPEG時，一些資訊將發生不可逆轉地丟失。

JPEG利用人眼感知的缺陷 – 對亮度比對顏色更敏感 – 使用了一種壓縮演算法來丟棄我們不太擅長獲取的資訊，因此屬於“有損格式”。壓縮率的設定將決定最終儲存檔案的大小和質量。 JPEG壓縮技術遠遠不止這些，如果你想深入瞭解，可以看看大衛·奧斯丁（David Austin）的這篇文章 。

JPEG的用途

因為JPEG適用於亮度和色彩壓縮，所以在照片，以及其他寫實或者帶陰影的影象（如繪畫和3D渲染）上使用效果良好。這就是為什麼它是多年來最流行的儲存圖片的格式。出於同樣的原因，JPEG不適宜用在向量圖片，如徽標，幾何圖形，截圖等方面。

照片，以及繪畫等複雜的或帶陰影的影象，是使用JPEG的很好的例子。

壓縮JPEG

作為有損格式，JPEG檔案的壓縮率與最終影象質量呈反比。在像Photoshop這樣的工具中儲存JPEG時，你會看到一個從0到100的質量設定。Photoshop設定了一些影象質量範圍：

• 低 — 10%
• 中 — 30%
• 高 — 60%
• 非常高 — 80%
• 最佳 — 100%

最佳 100% (61 KB), 非常高 80% (29 KB).

高 60% (16 KB), 中 80% (7 KB).

低 100% (6 KB), 最低 0% (3 KB).

Web頁面上建議使用在50％到60％質量之間的JPEG，因為它能兼顧不錯的影象質量和較小的檔案尺寸。刪除後設資料也可以減少JPEG檔案體積。還有如TinyJPG的線上工具，以及桌面應用程式如 ImageOptim (Mac) 和 RIOT (Windows)都可以用來壓縮圖片。在Photoshop裡，可以通過在“匯出”中選擇“後設資料：無”或“儲存為Web所用格式（舊版）”來完成壓縮。對影象整體或者部分進行模糊處理也會產生較小的檔案，不信的話你可以看這裡。請注意，由於JPEG是有損格式，即使以100％的質量儲存相同的檔案，因為壓縮演算法在同一影象上一次又一次地應用，多次之後也會導致影象質量的降低。但這一變化可能不會顯示在檔案大小的改變上。

PNG

可移植網路圖形（Portable Network Graphics）也是一種自1995年以來就一直存在的光柵影象格式。它與JPEG不同，因為它是一種無損格式，並且是目前網路上最常見的無損格式。這意味著由於它的壓縮演算法，當檔案被儲存和壓縮時，不會丟失任何資訊。

PNG有很多很酷的特性，如：

• 透明通道 – 意味著每個畫素可以具有不同的透明度;
• 8位檔案可以使用基於調色盤的顏色模型（也稱為索引顏色） – 這意味著如果減少顏色數量，檔案可能更小;
• 依據libPNG的說法，PNG壓縮效率比GIF高25％
• 二維隔行掃描 — 影象會在載入過程中漸進顯示，而不是隻有當影象完全載入時才顯示。你必須謹慎使用此選項，因為它會增加檔案大小。

有關PNG更多特性、歷史和技術資訊的完整列表，請檢視libpng的頁面.

PNG的用途

PNG對於線條圖，LOGO，圖示和顏色較少的影象非常適合。顏色複雜的照片和影象使用PNG格式將生成巨大的檔案。PNG另一個y優點是支援透明背景。在這種情況下，即使是複雜的圖片仍然需要使用PNG，因為JPEG中無法實現圖片透明。

PNG可以很好地用線上條作品，LOGO和圖示上。 (漫畫作者：xkcd)

壓縮PNG

因為PNG中的壓縮演算法是無損的，你可以選擇性地減少它的顏色，從而通過外部工具減小圖片尺寸。 Pngquant就是一個很好的工具，它可以在保證透明度不變的情況下同時減少檔案大小。請注意，這一過程會建立一個8位檔案，即該檔案最多可以有256種顏色。可能看起來不多，但是用這麼多顏色足以獲得很好的效果。

左邊的24點陣圖像 (149 KB) 和右邊8位，256色影象 (54 KB) — 縮小了63.7%

對於大多數PNG使用場景（線圖，圖形，圖示），256色是足夠的。因此，可以通過減少調色盤中的顏色數量來進一步減少檔案大小。 使用GUI工具是個不錯的選擇，如Pngyu 或 ImageAlpha，這些工具允許你預覽生成的檔案。 下面的例子顯示瞭如何在不會顯著影響質量的前提下，將調色盤減少到32種顏色。在類似的例子中，影象很難被自動化地壓縮——因為需要不斷預覽和測試來達到最佳效果——同時使用最少的顏色和產生最小的檔案尺寸。就像JPEG一樣，也有用於壓縮PNG的線上工具，如：TinyPNG.

在這個示例中，LOGO從原始的24位PNG（10 KB）減少到8位，32色版本（2 KB，縮減80％），並且沒有丟失任何明顯的細節。

那麼，GIF怎麼樣呢？

圖形交換格式（Graphics Interchange Format）也是一種點陣圖格式，並且比本文中提到的其它格式都出現地更早。它於1989年由Steve Wilhite建立, 在PNG建立前都是最流行的8點陣圖像格式。GIF與PNG具有類似的特性，但有一些缺點：

• 僅支援256種顏色;
• 一維隔行交錯 — 影象會漸進顯示，但不夠平滑;
• 與PNG相比壓縮效能差
• 二進位制透明度 – 畫素只能是100％透明或100％可見;
• 有歧義的發音

GIF因動畫而出名並被廣泛使用。但是，現在即使是動畫也可以通過其它的方式完成，而且檔案大小更小：例如使用SVG和Javascript，PNG序列幀或視訊。所以，除非有非常特殊的原因必須使用GIF，否則我更建議大家使用PNG或SVG。

SVG

可伸縮向量圖形（Scalable Vector Graphics）與前面講的柵格格式不同，顧名思義，它是向量格式。這意味著它不會基於畫素儲存資料，而是通過記錄座標的形式儲存圖形資訊。SVG使用基於XML的語義化標籤結構，這有點像HTML。由於是DOM結構，你可以通過ID獲取SVG元素，並操縱它們。這帶來了很多可能性，例如使用JavaScript和CSS 修改並對元素進行動畫操作或者建立響應式圖形。

請看這個例子：#1 – 咖啡機 – CSS3製作SVG動畫 ，作者喬納森·席爾瓦（Jonathan Silva）(@jonathansilva) 發表於 CodePen。

就像其它向量格式，SVG圖片能不丟失任何細節地放大到任何大小。打個比方，同一個圖示，可以以多種尺寸使用，並且在任何螢幕解析度（比如Retina顯示器）中都將看起來很清晰，而不需要存成多個檔案。

向量圖片 (右) 能夠在保持圖片質量的前提下任意放大

SVG的用途

SVG線上條藝術，LOGO，圖示，插畫和資料視覺化方面用途廣泛。但它不適用於寫實影象和有許多細節的複雜圖片。在一些情況下，SVG和PNG都能很好地達到同一個目的。對於線條藝術，SVG通常能生成較小的檔案。但是這不是必然的，實際情況會根據向量影象究竟有多少個錨點，它甚至可能會生成比PNG更大的檔案。 SVG真正出色的地方是資料視覺化。由於可以使用JavaScript來操縱和建立向量動畫，諸如D3之類的庫提供了無限的可能性.

LOGO, 圖示和資料視覺化是SVG使用的優秀範例。

壓縮SVG

大多數情況下，使用如SVGz（GZipped SVG）等工具來壓縮在Web網頁中使用的SVG檔案是不必要的。你可以（並且應該）在伺服器上開啟 Gzip 來實現壓縮功能，雖然可能效果寥寥。比較好的方法應該是通過清除SVG向量圖形中不必要的錨點、元素和屬性來減少檔案大小。錨點繪製了向量影象，因此，你需要確保已移除的錨點不會影響向量圖形的最終形狀。如果您使用Adobe Illustrator編輯SVG，請確保使用匯出>匯出為…而不是檔案>另存為…進行儲存，因為這樣才能生成一個最小化的檔案，當然它還有其它優點。在Sketch裡, 注意不要使用不必要的資料夾，因為它們也會作為額外的標籤儲存到SVG中。

清理不必要的節點是縮減SVG尺寸的一種途徑。

元素標籤是包含在SVG檔案內的所有內容，包括開始和結束標籤。向量編輯軟體，如Adobe Illustrator和Sketch可能會到處含有非必要元素和屬性的SVG。SVG壓縮器可用於刪除這種多餘的資訊。Compressor和SVGOMG等線上工具可以完成此工作。如果你是開發人員，而且不習慣清理和壓縮SVG，可以用自動執行工具SVGO，如果你是設計師，可以與該專案的開發人員談談SVG的優化，通過使用自動化的方式來避免你手動完成優化。

在下面的例子裡，這個從Sketch裡匯出的圖示有1364B大小。同一個圖示在清理和壓縮後，就只剩460B — 縮小了66%。

請在 CodePen上看這個例子：來自Sketch的SVG 作者布魯諾·穆勒（Bruno Müller）(@brunomuler) 。

優化前：

優化後的SVG：

文末思考

如同任何其他技術一樣，影象格式也在不斷髮展。作為網頁設計師和開發人員，我們的主要考慮的是瀏覽器相容性。幾年前，在IE6為主流瀏覽器的時代，PNG還不能使用透明通道。在不久的將來，也許我們會使用新的格式，如 Google’s WebP 或者其它仍未被建立出來的圖片格式。

瞭解如何使用和優化每種圖片格式將確保更好的使用者體驗。因為使用者將能夠更早地預覽和接收內容，同時減少頻寬的使用。它還為設計人員提供了繪製建立動畫和響應式頁面的新機會。

我希望這篇文章有助於解決一些網路上關於影象格式的諸多不確定性問題。如果你還有任何問題或建議，請在下方發表評論或與我聯絡。另外，如果覺得本文對你有幫助，不要忘了分享。