[譯] 你用對圖片格式了嗎？

劉凱里發表於2018-10-08

原文連結：What is the Right Image Format for Your Website
作者：Maria Antonietta Perna
譯者：劉凱里

截至2017年3月，超過65%的網頁內容都是由圖片組成的。
這並不是一件令人意外的事情：圖片是一種美觀並具有感染力的資訊載體，它可以直觀的和你網站的訪問者建立聯絡並講述內容。
但出於事物的兩面性，如果使用的不得當，圖片往往會變成導致網頁載入緩慢和差勁使用者體驗的罪魁禍首。
適當的在網頁上使用圖片，有以下兩點：

在這篇文章中，我會對第一點做出討論。我會專門介紹在網頁上表現最好的圖片格式以及在對應情況下最合適的圖片格式。
不過在我說那些之前，讓我們先來簡要地將一些術語講清楚。

光柵圖片 vs 向量圖

光柵圖由二維的畫素網格組成。每個畫素儲存了顏色和透明度的值。
光柵圖並不能很好的支援縮放：如果你將一張光柵圖放大，圖片的銳度和清晰度都會下降。目前主流的光柵圖有這些格式：JPEG(jpg)、GIF和PNG。
相比之下，向量圖由一些線條、形狀和路徑點組成。向量圖的各種資訊並不是儲存在畫素點中，而是儲存在精確的繪畫指令中，而這些指令是完全獨立於畫素的。Alex Walker 曾對SVG表達了自己的喜愛，認為SVG是在網頁上最棒的向量圖：

SVG isn't an image format — it’s more of an image recipe.

獨立於解析度意味著你可以將一張向量圖放大聚焦之至你想要聚焦的任何地方：圖片的呈現會一如既往的贊，尤其適合 Retina 屏。

有損 vs 無損

這裡的有損和無損指的是文加壓縮技術對數字媒體檔案進行壓縮時的場景，即，圖片，音訊和視訊。
有失真壓縮：

會丟失掉部分資料，導致解壓縮時不能100%還原成壓縮前的樣子。有失真壓縮可對檔案進行高度壓縮從而得到一個更小的壓縮檔案，但始終有一部分原有畫素、聲音片段或者視訊幀會永久的丟失。
PCMag.com Encyclopedia

這句話的意思是，在實際操作中，你越是壓縮一個有所檔案，你得到的“成品”就會越小。同時，伴隨著更小的檔案體積，你也會製造一些不可逆的質量丟失。對於有失真壓縮而言，你需要在更小的檔案體積和檔案質量之間做一個合理的取捨。
JPEG 是目前人們見的最多的有損圖片型別。
相比之下，無失真壓縮在壓縮的過程中則不會出現資料丟失的情況。這意味著壓縮不會造成檔案質量的削減。但也正是因為如此，無損檔案的體積一般要比有損檔案大。
最常見的無損圖片格式是 GIF 和 PNG。
每當你需要選擇用哪種圖片格式來展示你的內容時，這些資訊會變得很有用。

JPEG

JPEG 是由 Joint Photographic Experts Group 所開發出的一種有損圖片。
現如今，幾乎有3%的網際網路資原始檔是 JPEG 格式的圖片。這種圖片格式之所以這麼受歡迎，是因為：

  • JPEG 格式的圖片可以呈現數百萬種顏色。所以每當需要在網站上展示攝影作品時，JPEG 總是最佳選擇。
  • 正因為是有損圖片，你可以通過壓縮大大的減少圖片的體積。JPEG 圖片提供了多種級別的壓縮選擇：網上的圖片用60%級別比較合適，如果選擇大於75%的壓縮等級，則會使圖片有明顯的質量下降。
  • 所有可以上網的裝置都支援顯示 JPEG 圖片，所以開發者可以隨意的使用而不用擔心相容性問題。

一個值得注意的點是，JPEG 格式的圖片並不支援透明效果。因此，如果你打算在頁面上用透明的效果來美化背景，JPEG 圖片並不是一個明智的選擇。

GIF

GIF 的意思是 Graphics Interchange Format，是一種最多支援256種顏色的8位無損圖片格式。這個限制讓 GIF 格式對於多顏色或者攝影圖片的展示無能為力。
以下這些點，是支援 GIF 格式長期被用於網站的原因：

  • 正因為只支援256中顏色，所以檔案體積通常都很小
  • 支援透明
  • 支援動畫，這讓 GIF 非常適合去展示一些無限迴圈的動畫，比如圖示、表情、廣告欄等。
  • 對於一些只有簡單色彩的圖片非常合適，但並不適用於照片

PNG

PNG 的意思是 Portable Network Graphics。這個由W3C開發的圖片格式，在大多數場景下可以替代 GIF。與 GIF 相同，PNG 採用了一種無損的壓縮演算法並且同時支援8位和24位。兩者都支援透明度。值得一提的是，24位的PNG圖片透明度支援使用RGB。因此，儘管GIF和8位的PNG圖片變成了完全不透明或完全透明，PNG圖片的每個畫素提供了高達256層級的透明度。
在使用時，24位的PNG有以下特點：

  • 具有多層級透明度的網路圖片
  • 支援複雜的照片和圖形
  • 對於經常需要匯出的圖片：PNG的無失真壓縮保障了壓縮後沒有質量退化

SVG

SVG 的意思是 Scalable Vector Graphics，是一種基於XML的向量檔案型別。
儘管 SVG 在 2001 年就問世了，但近幾年才變得流行起來。之所以遲到這麼久，是因為瀏覽器對 SVG 的支援在很長的一段時間內並不是很友好。幸運的是，在我寫這篇文章的時候，SVG 已經被各大主流瀏覽器支援了，當然了，某些時候還是會出現一些不相容的小bug。
SVG格式的圖片有非常多的好特性，因此對於網站來說，它會是一個非常棒的選擇，特別是用來展示一些小的圖片logo、地圖、圖示等。

SVG 格式的優點

  • SVG 格式的圖片通常要比光柵格式的圖片小很多，特別是當你作了特別的優化並且啟用 gzip 壓縮的時候
  • 它們是可縮放的，這意味著 SVG 圖片能在各種解析度的螢幕上展現的很清晰
  • 你可以把 SVG 的程式碼丟到 HTML 中以減少請求數量
  • 你可以用 CSS 來 DIY 任何 SVG
  • 最酷的是，你可以用 JavaScript 或者 CSS 讓你的 SVG 變成動畫

避免在網頁上使用一些非常複雜的SVG圖片，因為這會導致檔案的體積變大很多。最後，對於類似於攝影作品之類的圖片，SVG並不是一個好的選擇，你最好還是乖乖的用 JPEG 或者 webP 吧。

WebP

WebP 在 2010 年就面世了，如果說 webP 仍然是一種新的圖片格式並且它的知名度遠遠不如 JPEG 或者 PNG，那就大錯特錯了。這種格式的圖片，從骨子裡就是專門為網站而生的。
WebP 是由 Google 開發的一種開源圖片格式，它有這些特性：

WebP 是一種現代的網路圖片格式，它對於網頁上的圖片提供了效能出色的壓縮水平。WebP 無失真壓縮比 PNG 的體積小 26%，webP 的有失真壓縮比同質量的 JPEG 格式體積小 25-34%。無失真壓縮的 webP 支援透明度，但卻只有 22% 的位元組增加。 舉個例子，在同樣支援有失真壓縮 RGB 的情況下，有損的 webP 也支援透明度，並且檔案體積是 PNG 的三分之一。
WebP website

WebP 的美妙之處在於它以更小的體積糅合了 JPEG 和 PNG 的優點。
此時此刻，瀏覽器對 webP 的支援還算不錯：畢竟是 Google 的親兒子，所有以 blink 為核心基礎的瀏覽器都開始支援 webP 了。為了在一些不支援的瀏覽器中實現向後相容，一些聰明的開發者也已經在例如 IE/Edge、Firefox 和 Safari 中實現了相容的解決方案。
以下是一些關於 webP 不錯的資源，你可以利用它們開始使用 webP 了：

Conclusion

在這篇文章中，我說明了一些圖片格式以及簡要的討論了一下它們的適用場景。
JPEG，GIF 和 PNG 是目前主流的網路圖片格式，並且已經被使用了很長一段時間。
SVG 和 webP 是令人興奮的新興圖片格式。SVG 適合於插畫和簡單影象的展示，而 webP 則在所有用到了 JPEG 和 PNG 的場景下成為了更好的選擇。
你在開發的時候已經開始使用 SVG 和 webP 了嗎？你都面臨著哪些挑戰呢？你嚐到效能提升的甜頭了嗎？

相關文章