圖像格式選擇與優(yōu)化：網(wǎng)站圖像最佳實(shí)踐

關(guān)鍵要點(diǎn)

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

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

截至 2017 年 3 月，圖像佔(zhàn)據(jù)了超過 65% 的網(wǎng)絡(luò)內(nèi)容。

這並不奇怪：圖像增加了美感，傳達(dá)信息，講述故事並與您的網(wǎng)站訪問者建立聯(lián)繫。

另一方面，如果使用不當(dāng)，圖像往往是網(wǎng)站速度緩慢和用戶體驗(yàn)差的主要原因。

在網(wǎng)絡(luò)上正確使用圖像主要涉及兩件事：

• 選擇正確的圖像格式
• 優(yōu)化圖像

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

但在進(jìn)一步討論之前，讓我們簡(jiǎn)要澄清一些術(shù)語。

柵格/位圖與矢量圖像

柵格或位圖圖像由二維像素網(wǎng)格組成。每個(gè)像素存儲(chǔ)顏色和透明度值。

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

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

請(qǐng)注意，放大後的圖像版本相對(duì)於原始副本的質(zhì)量下降。

相比之下，矢量圖像是由線條、形狀和路徑點(diǎn)組成的。矢量的信息不是存儲(chǔ)在像素中。相反，它們存儲(chǔ)在與像素完全無關(guān)的數(shù)學(xué)繪圖指令中。 Alex Walker 在提到 SVG（網(wǎng)絡(luò)上最流行的矢量格式）時(shí)，說得非常好：

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

為什麼 JPEG 像麥當(dāng)勞蘋果派（而 SVG 不是）

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

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

有損與無損

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

有損壓縮：

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

PCMag.com 百科全書

這在實(shí)踐中意味著，您壓縮有損文件越多，它就越小。但是，隨著文件大小的減小，您也會(huì)不可逆地?fù)p失一些原始文件的質(zhì)量。有損壓縮涉及文件大小和質(zhì)量之間的權(quán)衡。

您在網(wǎng)絡(luò)上經(jīng)?？吹降囊环N有損圖像類型是 JPEG。

相比之下，無損壓縮不會(huì)在壓縮的資源和原始資源之間造成任何數(shù)據(jù)丟失。這意味著壓縮不會(huì)導(dǎo)致文件質(zhì)量下降。但是，正因?yàn)槿绱耍瑹o損文件格式通常比有損文件格式的文件大小更大。

您可以在網(wǎng)絡(luò)上輕鬆找到的無損圖像格式是 GIF 和 PNG。

在決定內(nèi)容的最佳圖像格式時(shí)，這些初步信息非常有用。

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

JPEG

JPEG 或 JPG 是一種由聯(lián)合圖像專家組開發(fā)的有損圖像格式

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

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

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

GIF

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

以下是一些在 GIF 文件在網(wǎng)站上長(zhǎng)期使用中發(fā)揮巨大作用的要點(diǎn)：

• 鑑於 256 種顏色的限制，文件大小通常非常小
• 支持透明度
• 支持動(dòng)畫。這使其適合顯示循環(huán)動(dòng)畫圖像，例如圖標(biāo)、表情符號(hào)、橫幅等。
• 適用於具有平面顏色的簡(jiǎn)單圖像，但不適用於照片

PNG

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

您可以將 24 位 PNG 格式用於

• 具有各種透明度級(jí)別的網(wǎng)絡(luò)圖像
• 複雜的圖片和圖形
• 您需要經(jīng)常編輯和導(dǎo)出的圖形：它們的無損格式確保不會(huì)降低質(zhì)量。

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

SVG

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

SVG 格式具有許多功能，可以推薦它作為網(wǎng)絡(luò)圖形格式的絕佳選擇，尤其是在用於徽標(biāo)、地圖、圖標(biāo)等簡(jiǎn)單圖像時(shí)，它特別適合。

SVG 格式的優(yōu)點(diǎn)

• SVG 的文件大小通常小於其柵格對(duì)應(yīng)物，特別是如果您針對(duì)網(wǎng)絡(luò)對(duì)其進(jìn)行了優(yōu)化並以 gzip 格式提供它們
• 它們是可縮放的，這意味著無論屏幕分辨率如何，它們看起來都很清晰
• 您可以在 HTML 標(biāo)記內(nèi)使用 SVG 代碼並保存 HTTP 請(qǐng)求
• SVG 代碼本身就可以使用 CSS 進(jìn)行自定義
• 您可以使用 CSS 和 JavaScript 對(duì) SVG 圖像及其各個(gè)部分進(jìn)行動(dòng)畫處理，這非?？帷?

因?yàn)槲募笮】赡軙?huì)變得相當(dāng)大，所以嘗試避免將過於復(fù)雜的 SVG 圖像用於網(wǎng)絡(luò)使用。最後，對(duì)於攝影圖像，SVG 不適用，您最好堅(jiān)持使用 JPG 格式或 webP。

WebP

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

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

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

WebP 網(wǎng)站

WebP 的優(yōu)點(diǎn)在於它結(jié)合了 JPG 和 PNG 格式的優(yōu)點(diǎn)，而不會(huì)產(chǎn)生龐大的文件大小。

目前，瀏覽器支持非常好：基於 Blink 的瀏覽器從一開始就都支持它，畢竟，webP 是 Google 的產(chǎn)品之一。對(duì)於不支持的瀏覽器（即 IE/Edge、Firefox 和 Safari）的向後兼容性，一些聰明的人已經(jīng)設(shè)計(jì)了適當(dāng)?shù)慕鉀Q方法。

以下是一些很棒的資源，您可以從中了解有關(guān) webP 的更多信息以及如何立即實(shí)現(xiàn)它：

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

結(jié)論

在本文中，我概述了網(wǎng)絡(luò)圖像格式，並簡(jiǎn)要討論了它們更適合的圖像類型。

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

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

點(diǎn)擊評(píng)論框分享！

關(guān)於網(wǎng)站圖像格式的常見問題解答 (FAQ)

選擇網(wǎng)站圖像格式時(shí)需要考慮哪些關(guān)鍵因素？

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

圖像格式如何影響我的網(wǎng)站 SEO？

圖像格式會(huì)顯著影響您的網(wǎng)站 SEO。搜索引擎（如 Google）優(yōu)先考慮加載速度更快的網(wǎng)站，而較小的圖像文件大小可以幫助實(shí)現(xiàn)此目標(biāo)。此外，Google 更喜歡 JPEG 2000、JPEG XR 和 WebP 等某些圖像格式，因?yàn)樗鼈兙哂凶吭降膲嚎s和質(zhì)量特性。使用這些格式可能會(huì)提高您網(wǎng)站的搜索引擎排名。

有損壓縮和無損壓縮有什麼區(qū)別？

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

以上是適合您網(wǎng)站的正確圖像格式是什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！