適合您網站的正確圖像格式是什麼？

圖像格式選擇與優化：網站圖像最佳實踐

關鍵要點

• 正確選擇圖像格式並優化圖像對於網站圖像的正確使用至關重要。錯誤的使用會導致網站性能緩慢和用戶體驗差。
• JPEG、GIF、PNG、SVG 和 WebP 是常用的網站圖像格式。 JPEG、GIF 和 PNG 是長期使用的格式，而 SVG 和 WebP 則比較新，但由於其適合響應式和快速加載的網站，因此越來越受歡迎。
• 圖像格式的選擇取決於圖像類型、文件大小和瀏覽器兼容性。例如，JPEG 由於其質量和壓縮性而非常適合照片，而 PNG 由於其支持透明度而非常適合徽標和圖標。
• WebP 是一種由 Google 開發的現代圖像格式，它結合了 JPEG 和 PNG 的優點，而不會產生較大的文件大小，使其成為網絡使用的理想選擇。但是，並非所有瀏覽器都普遍支持它。

本文是與 SiteGround 合作創建的系列文章的一部分。感謝您支持使 SitePoint 成為可能的合作夥伴。

截至 2017 年 3 月，圖像佔據了超過 65% 的網絡內容。

這並不奇怪：圖像增加了美感，傳達信息，講述故事並與您的網站訪問者建立聯繫。

另一方面，如果使用不當，圖像往往是網站速度緩慢和用戶體驗差的主要原因。

在網絡上正確使用圖像主要涉及兩件事：

• 選擇正確的圖像格式
• 優化圖像

在本文中，我將討論第一點。特別是，我將介紹在網絡上效果最佳的圖像格式以及它們最適合的圖像類型。

但在進一步討論之前，讓我們簡要澄清一些術語。

柵格/位圖與矢量圖像

柵格或位圖圖像由二維像素網格組成。每個像素存儲顏色和透明度值。

柵格圖像的縮放效果不是很好：如果放大柵格圖像，它會失去清晰度和質量。網絡上常用的柵格圖像類型是 JPEG 或 JPG、GIF 和 PNG 格式。

以下是蘋果的兩個柵格圖像 (JPG)。第一個是圖像的自然大小。第二個顯示了同一圖像放大版本的細節。

柵格圖像自然大小示例。

遠大於自然大小的柵格圖像細節。

請注意，放大後的圖像版本相對於原始副本的質量下降。

相比之下，矢量圖像是由線條、形狀和路徑點組成的。矢量的信息不是存儲在像素中。相反，它們存儲在與像素完全無關的數學繪圖指令中。 Alex Walker 在提到 SVG（網絡上最流行的矢量格式）時，說得非常好：

SVG 不是圖像格式——它更像是一種圖像“配方”。

為什麼 JPEG 像麥當勞蘋果派（而 SVG 不是）

與分辨率無關的一個含義是，您可以隨意縮放矢量圖像：它們將始終看起來清晰明了，非常適合視網膜屏幕。

小比例的 SVG 圖形。

放大的 SVG 圖形細節。

上面的兩張圖像都是同一矢量圖形的視圖，但在第二個圖像中，矢量的渲染大小是第一個圖像的兩倍多。然而，並沒有質量損失。

有損與無損

“有損”和“無損”都指應用於數字媒體（即圖像、音頻和視頻）的文件壓縮技術。

有損壓縮：

不會將數字數據解壓縮回原始數據的 100%。有損方法可以提供高度的壓縮率，並產生較小的壓縮文件，但原始像素、聲波或視頻幀中的某些數量將永遠丟失。

PCMag.com 百科全書

這在實踐中意味著，您壓縮有損文件越多，它就越小。但是，隨著文件大小的減小，您也會不可逆地損失一些原始文件的質量。有損壓縮涉及文件大小和質量之間的權衡。

您在網絡上經常看到的一種有損圖像類型是 JPEG。

相比之下，無損壓縮不會在壓縮的資源和原始資源之間造成任何數據丟失。這意味著壓縮不會導致文件質量下降。但是，正因為如此，無損文件格式通常比有損文件格式的文件大小更大。

您可以在網絡上輕鬆找到的無損圖像格式是 GIF 和 PNG。

在決定內容的最佳圖像格式時，這些初步信息非常有用。

我下面要介紹的前三種圖像文件類型，即 JPG、GIF 和 PNG，已經在網站上使用了很長時間。最後兩種，即 SVG 和 webP，雖然並非完全是新格式，但尚未成為主流。然而，由於它們非常適合對響應式和快速加載網站的需求，因此它們的普及程度一直在不斷提高。

JPEG

JPEG 或 JPG 是一種由聯合圖像專家組開發的有損圖像格式

網站上幾乎 3% 的所有內容類型都是由 JPG 圖像組成的。這就是這種圖像格式如此受歡迎的原因：

• JPG 格式可以顯示數百萬種顏色。這使其成為在網絡上顯示攝影作品的理想選擇
• 作為一種有損文件類型，您可以使用壓縮來大幅降低其文件大小。 JPG 文件提供各種壓縮級別：大約 60% 對於網絡圖像來說足夠了，而高於 75% 的任何壓縮都會導致圖像質量下降。
• 所有支持互聯網的設備都支持 JPG 圖像格式，這使得它易於在網站上使用。

JPG 文件中缺少的一件顯而易見的事情是支持透明度。因此，如果您計劃使用透明背景將圖像與網頁上的背景顏色或紋理混合，則 JPG 圖像不是合適的選擇。最好選擇我下面列出的選項之一。

GIF

GIF 代表圖形交換格式。它是一種 8 位無損格式，最多支持 256 種顏色。此限制使 GIF 文件不適合顯示寬色域和攝影圖像。

以下是一些在 GIF 文件在網站上長期使用中發揮巨大作用的要點：

• 鑑於 256 種顏色的限制，文件大小通常非常小
• 支持透明度
• 支持動畫。這使其適合顯示循環動畫圖像，例如圖標、表情符號、橫幅等。
• 適用於具有平面顏色的簡單圖像，但不適用於照片

PNG

PNG 代表可移植網絡圖形。它是 W3C 開發的 GIF 的替代格式。與 GIF 一樣，它使用無損壓縮算法，並且有 8 位或 24 位格式。這兩種格式都支持透明度。但是，24 位 PNG 圖像中的透明度是使用 alpha 通道以及紅色、綠色和藍色通道實現的。因此，雖然 GIF 和 8 位 PNG 圖像要么完全不透明，要么完全透明，但 PNG 圖像中的每個像素都提供多達 256 個不透明度級別。

您可以將 24 位 PNG 格式用於

• 具有各種透明度級別的網絡圖像
• 複雜的圖片和圖形
• 您需要經常編輯和導出的圖形：它們的無損格式確保不會降低質量。

與 GIF 格式不同，PNG 圖像類型不支持動畫，並且它們的文件大小可能相當大。

SVG

SVG 代表可縮放矢量圖形，它是一種基於 XML 的矢量文件類型。雖然它自 2001 年就存在，但它直到最近才在網絡開發人員中變得非常流行。這種遲來的喜愛的原因在於 SVG 多年來一直享有較差的瀏覽器支持。幸運的是，我很高興地說，在撰寫本文時，SVG 在所有主要瀏覽器中都受支持，儘管存在一些不一致之處和錯誤。

SVG 格式具有許多功能，可以推薦它作為網絡圖形格式的絕佳選擇，尤其是在用於徽標、地圖、圖標等簡單圖像時，它特別適合。

SVG 格式的優點

• SVG 的文件大小通常小於其柵格對應物，特別是如果您針對網絡對其進行了優化並以 gzip 格式提供它們
• 它們是可縮放的，這意味著無論屏幕分辨率如何，它們看起來都很清晰
• 您可以在 HTML 標記內使用 SVG 代碼並保存 HTTP 請求
• SVG 代碼本身就可以使用 CSS 進行自定義
• 您可以使用 CSS 和 JavaScript 對 SVG 圖像及其各個部分進行動畫處理，這非常酷。

因為文件大小可能會變得相當大，所以嘗試避免將過於復雜的 SVG 圖像用於網絡使用。最後，對於攝影圖像，SVG 不適用，您最好堅持使用 JPG 格式或 webP。

WebP

儘管自 2010 年以來就已存在，但我不會說 webP 仍然感覺很新，而且不像 JPG 或 PNG 那樣知名。但是，這種圖像格式的 DNA 中包含了網絡：它天生就是為了在網絡上使用而設計的，這使其非常有趣

WebP 是一種由 Google 開發的開源圖像格式。以下是其主要功能：

WebP 是一種現代圖像格式，它為網絡上的圖像提供了卓越的有損和無損壓縮。 ……WebP 無損圖像的大小比 PNG 小 26%。 WebP 有損圖像比可比的 JPEG 圖像小 25-34%……無損 WebP 支持透明度……只需額外增加 22% 的字節。對於可以接受有損 RGB 壓縮的情況，有損 WebP 也支持透明度，通常比 PNG 提供 3 倍更小的文件大小。

WebP 網站

WebP 的優點在於它結合了 JPG 和 PNG 格式的優點，而不會產生龐大的文件大小。

目前，瀏覽器支持非常好：基於 Blink 的瀏覽器從一開始就都支持它，畢竟，webP 是 Google 的產品之一。對於不支持的瀏覽器（即 IE/Edge、Firefox 和 Safari）的向後兼容性，一些聰明的人已經設計了適當的解決方法。

以下是一些很棒的資源，您可以從中了解有關 webP 的更多信息以及如何立即實現它：

• WebP 常見問題解答
• 什麼是 WebP 圖像格式（以及為什麼它很重要）？
• 如何選擇完美的圖像格式以優化您的網站
• 使用 WebP 圖像的指南：案例研究
• 使用 WebP 圖像

結論

在本文中，我概述了網絡圖像格式，並簡要討論了它們更適合的圖像類型。

JPG、GIF 和 PNG 非常流行，並且已經使用了很長時間。 SVG 和 webP 是更新穎、令人興奮的替代方案。 SVG 非常適合插圖和簡單圖像，webP 非常適合 JPG 和 PNG 可用於的所有情況。

您在開發工作中是否使用過 SVG 或 webP？您面臨哪些挑戰？您是否體驗過任何顯著的性能提升？

點擊評論框分享！

關於網站圖像格式的常見問題解答 (FAQ)

選擇網站圖像格式時需要考慮哪些關鍵因素？

為您的網站選擇圖像格式取決於幾個因素。首先，考慮您正在處理的圖像類型。例如，照片最好以 JPEG 格式保存，以獲得最佳質量和壓縮效果，而徽標和圖標則可以使用 PNG 格式，以支持透明度。其次，考慮文件大小。較小的文件大小加載速度更快，從而提高您網站的速度和性能。最後，考慮瀏覽器兼容性。雖然大多數現代瀏覽器都支持 JPEG、PNG 和 GIF 等格式，但 WebP 等較新的格式並非所有瀏覽器都支持。

圖像格式如何影響我的網站 SEO？

圖像格式會顯著影響您的網站 SEO。搜索引擎（如 Google）優先考慮加載速度更快的網站，而較小的圖像文件大小可以幫助實現此目標。此外，Google 更喜歡 JPEG 2000、JPEG XR 和 WebP 等某些圖像格式，因為它們具有卓越的壓縮和質量特性。使用這些格式可能會提高您網站的搜索引擎排名。

有損壓縮和無損壓縮有什麼區別？

有損和無損是圖像格式中使用的兩種數據壓縮類型。有損壓縮通過消除“不必要”的數據位來減小文件大小，但這會導致圖像質量下降。 JPEG 是一種常見的有損格式。另一方面，無損壓縮在不犧牲圖像質量的情況下減小文件大小，但生成的

以上是適合您網站的正確圖像格式是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！