圖像格式選擇與優化：網站圖像最佳實踐
關鍵要點
本文是與 SiteGround 合作創建的系列文章的一部分。感謝您支持使 SitePoint 成為可能的合作夥伴。
截至 2017 年 3 月，圖像佔據了超過 65% 的網絡內容。
這並不奇怪：圖像增加了美感，傳達信息，講述故事並與您的網站訪問者建立聯繫。
另一方面，如果使用不當，圖像往往是網站速度緩慢和用戶體驗差的主要原因。
在網絡上正確使用圖像主要涉及兩件事：
在本文中，我將討論第一點。特別是，我將介紹在網絡上效果最佳的圖像格式以及它們最適合的圖像類型。
但在進一步討論之前，讓我們簡要澄清一些術語。
柵格/位圖與矢量圖像
柵格或位圖圖像由二維像素網格組成。每個像素存儲顏色和透明度值。
柵格圖像的縮放效果不是很好：如果放大柵格圖像，它會失去清晰度和質量。網絡上常用的柵格圖像類型是 JPEG 或 JPG、GIF 和 PNG 格式。
以下是蘋果的兩個柵格圖像 (JPG)。第一個是圖像的自然大小。第二個顯示了同一圖像放大版本的細節。
相比之下，矢量圖像是由線條、形狀和路徑點組成的。矢量的信息不是存儲在像素中。相反，它們存儲在與像素完全無關的數學繪圖指令中。 Alex Walker 在提到 SVG（網絡上最流行的矢量格式）時，說得非常好：
SVG 不是圖像格式——它更像是一種圖像“配方”。
為什麼 JPEG 像麥當勞蘋果派（而 SVG 不是）
與分辨率無關的一個含義是，您可以隨意縮放矢量圖像：它們將始終看起來清晰明了，非常適合視網膜屏幕。
有損與無損
“有損”和“無損”都指應用於數字媒體（即圖像、音頻和視頻）的文件壓縮技術。
有損壓縮：
不會將數字數據解壓縮回原始數據的 100%。有損方法可以提供高度的壓縮率，並產生較小的壓縮文件，但原始像素、聲波或視頻幀中的某些數量將永遠丟失。
PCMag.com 百科全書
這在實踐中意味著，您壓縮有損文件越多，它就越小。但是，隨著文件大小的減小，您也會不可逆地損失一些原始文件的質量。有損壓縮涉及文件大小和質量之間的權衡。
您在網絡上經常看到的一種有損圖像類型是 JPEG。
相比之下，無損壓縮不會在壓縮的資源和原始資源之間造成任何數據丟失。這意味著壓縮不會導致文件質量下降。但是，正因為如此，無損文件格式通常比有損文件格式的文件大小更大。
您可以在網絡上輕鬆找到的無損圖像格式是 GIF 和 PNG。
在決定內容的最佳圖像格式時，這些初步信息非常有用。
我下面要介紹的前三種圖像文件類型，即 JPG、GIF 和 PNG，已經在網站上使用了很長時間。最後兩種，即 SVG 和 webP，雖然並非完全是新格式，但尚未成為主流。然而，由於它們非常適合對響應式和快速加載網站的需求，因此它們的普及程度一直在不斷提高。
JPEG
JPEG 或 JPG 是一種由聯合圖像專家組開發的有損圖像格式
網站上幾乎 3% 的所有內容類型都是由 JPG 圖像組成的。這就是這種圖像格式如此受歡迎的原因：
JPG 文件中缺少的一件顯而易見的事情是支持透明度。因此，如果您計劃使用透明背景將圖像與網頁上的背景顏色或紋理混合，則 JPG 圖像不是合適的選擇。最好選擇我下面列出的選項之一。
GIF
GIF 代表圖形交換格式。它是一種 8 位無損格式，最多支持 256 種顏色。此限制使 GIF 文件不適合顯示寬色域和攝影圖像。
以下是一些在 GIF 文件在網站上長期使用中發揮巨大作用的要點：
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 不適用，您最好堅持使用 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 的更多信息以及如何立即實現它：
結論
在本文中，我概述了網絡圖像格式，並簡要討論了它們更適合的圖像類型。
JPG、GIF 和 PNG 非常流行，並且已經使用了很長時間。 SVG 和 webP 是更新穎、令人興奮的替代方案。 SVG 非常適合插圖和簡單圖像，webP 非常適合 JPG 和 PNG 可用於的所有情況。
您在開發工作中是否使用過 SVG 或 webP？您面臨哪些挑戰？您是否體驗過任何顯著的性能提升？
點擊評論框分享！
關於網站圖像格式的常見問題解答 (FAQ)
為您的網站選擇圖像格式取決於幾個因素。首先，考慮您正在處理的圖像類型。例如，照片最好以 JPEG 格式保存，以獲得最佳質量和壓縮效果，而徽標和圖標則可以使用 PNG 格式，以支持透明度。其次，考慮文件大小。較小的文件大小加載速度更快，從而提高您網站的速度和性能。最後，考慮瀏覽器兼容性。雖然大多數現代瀏覽器都支持 JPEG、PNG 和 GIF 等格式，但 WebP 等較新的格式並非所有瀏覽器都支持。
圖像格式會顯著影響您的網站 SEO。搜索引擎（如 Google）優先考慮加載速度更快的網站，而較小的圖像文件大小可以幫助實現此目標。此外，Google 更喜歡 JPEG 2000、JPEG XR 和 WebP 等某些圖像格式，因為它們具有卓越的壓縮和質量特性。使用這些格式可能會提高您網站的搜索引擎排名。
有損和無損是圖像格式中使用的兩種數據壓縮類型。有損壓縮通過消除“不必要”的數據位來減小文件大小，但這會導致圖像質量下降。 JPEG 是一種常見的有損格式。另一方面，無損壓縮在不犧牲圖像質量的情況下減小文件大小，但生成的
以上是適合您網站的正確圖像格式是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
