使用SVG圖像適合您的網站的性能嗎？

SVG圖像：網頁設計的理想選擇

可縮放矢量圖形（SVG）是網頁圖形格式的絕佳選擇，原因有很多，其中一個重要原因就是其相對較小的文件大小。然而，這並非絕對的。讓我們深入探討一下。

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

矢量圖像的優勢

光柵圖像（例如.JPEG、.PNG等）由網格中排列的方形像素構成。因此，圖像越大，使用的像素就越多，導致文件大小增加。

不僅如此，基於像素的圖形縮放效果並不好。這意味著什麼？這是一張原始寬度為300 x 225像素的花朵.JPEG圖像：

這是同一張圖像在更高分辨率下的顯示效果：

注意其模糊的邊緣、模糊的表面以及圖像整體質量的顯著下降。

鑑於視網膜屏幕如今在用戶設備上很常見，您的網站上使用光柵圖像出現這種情況的風險很高。一種替代方法是提供高分辨率圖形，但這當然會嚴重影響網頁性能。

srcset 和 <picture></picture> 元素

幸運的是，現代HTML通過響應式圖像（即srcset和<picture></picture>元素）來解決這個問題。在撰寫本文時，除了IE11和Opera Mini之外，所有主流瀏覽器的最新版本都支持這兩個元素。

響應式圖像的目標是為使用的設備提供最佳質量的圖像。這涉及提供各種分辨率的圖像，但允許瀏覽器僅加載適合訪問設備功能的圖像。

如果您想了解更多關於這些技術如何工作的信息，Saurabh Kirtani撰寫的《如何使用srcset構建響應式圖像》深入探討了這一主題。

以下是srcset在實踐中的樣子：

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg" class="lazy" alt="Is Using SVG Images Good for Your Website's Performance? "></code>

下面是<picture></picture>元素的示例：

<code class="language-html"><picture>
  <source media="(orientation: landscape)" srcset="retina-horizontal-使用SVG圖像適合您的網站的性能嗎？.jpg 2x, horizontal-使用SVG圖像適合您的網站的性能嗎？.jpg">
  <source media="(orientation: portrait)" srcset="retina-vertical-使用SVG圖像適合您的網站的性能嗎？.jpg 2x, vertical-使用SVG圖像適合您的網站的性能嗎？.jpg">
  <img src="/static/imghwm/default1.png" data-src="使用SVG圖像適合您的網站的性能嗎？.jpg" class="lazy" alt="使用SVG圖像適合您的網站的性能嗎？">
</source></source></picture></code>

如您所見，儘管根據訪問設備只會提供一個圖像副本，但這兩種技術都需要您準備並上傳多個圖像副本到您的服務器。這不會影響您網站的性能，但會對您的時間和服務器帶寬產生負面影響。

SVG是分辨率無關的

縮放是矢量圖形的DNA，而SVG是一種基於XML的矢量圖像格式。 SVG由幾何繪圖指令（例如形狀、路徑、線條等）組成，這些指令與像素大小無關。從文件大小的角度來看，圖像以什麼大小呈現並不重要，因為這些指令保持不變。

分辨率無關的另一個含義是，您不需要為不同的設備準備同一圖像的不同副本；一個尺寸適合所有設備，並且在任何屏幕分辨率下都顯得清晰銳利。

也就是說，某些因素會對SVG文件大小產生負面影響，例如圖像的複雜程度。繪圖指令越複雜，文件大小就越大。

高效SVG文件的建議

一般來說，用於網頁的SVG非常簡單，例如徽標、地圖、圖標等。與它們的光柵對應物相比，此類簡單的SVG圖像可能具有較小的文件大小。

但是，您可以採取一些步驟來進一步優化文件大小，並確保您的訪問者在您的網站上獲得出色的體驗。

以下是一些技巧：

從一開始就在設計中融入性能

您可以自己編寫簡單的SVG圖形，也可以使用像Snap.svg這樣的JavaScript庫來繪製矢量圖形。通常，為了完成工作，您只需啟動一個矢量圖形編輯器，例如Adobe Illustrator。

如果您使用圖形編輯器，那麼在設計階段考慮簡化SVG代碼可以降低在以後優化時破壞作品的風險。

您可以朝這個方向邁出的第一步是在您選擇的圖形編輯器中正確設置畫布大小。 Sarah Drasner建議將其設置為100 x 100像素，具體取決於您的項目。這確保畫布不會太小，從而產生大量小數位，您幾乎無法在後期減少這些小數位而不會弄亂圖形。另一方面，這個尺寸也不算太大。事實上，較大的畫布意味著相應的路徑點數量較多。

接下來，減少路徑點的數量對於減少SVG文件的大小至關重要。這意味著盡可能使用形狀而不是路徑，但也將多個路徑組合成較少的路徑，除非您計劃單獨為它們製作動畫。 Adobe Illustrator提供“簡化”面板以進一步減少路徑點。這是一個簡短的視頻教程，用於說明其用法。

以智能方式導出SVG

充分利用圖形編輯器的導出功能。如果不這樣做，可能會導致一些SVG代碼中充斥著您不需要的專有標記和膨脹。

例如，如果您擁有最新版本的Adobe Illustrator（在撰寫本文時為CC 2017），請使用“導出為”選項導出SVG圖形，然後選擇.svg文件類型：

Illustrator的面板提供了一些設置，可幫助您減小文件大小並輸出乾淨、幾乎可用於網絡的標記。您甚至可以通過單擊面板內的“顯示代碼”按鈕來預覽代碼。

有關Illustrator中每個選項的詳細演練，Geoff Graham撰寫的《從Adobe Illustrator獲取SVG的不同方法》是一篇很棒的文章。

使用SVG優化工具壓縮更多字節

導出SVG圖形後，您仍然可以使用可用的出色SVG優化工具進一步縮小它。

SVGOMG（及其基於Web的GUI對應版本）以及Peter Collingridge的SVG編輯器是最流行的工具。

查看Guillaume Cedric Marty撰寫的《優化SVG圖像》，了解有關如何使用SVGOMG的更多信息。

啟用Gzipped SVG文件的交付

SVG優化待辦事項列表中的最後一步是在服務器上啟用gzip壓縮。 SVG只是XML標記，因此它可以輕鬆進行壓縮而不會出現任何問題。

在文件縮減方面的好處是顯著的。 SVG 1.1規範的附錄J顯示了未壓縮和壓縮SVG文件示例之間的比較表。結果壓倒性地有利於壓縮，文件大小減少了77-84%。

結論

SVG圖形是網頁的絕佳選擇。用於簡單的圖標、徽標等時，通常比其光柵對應物性能更好，尤其是在您採取本文中列出的少量預防措施時。

我上面提到的技巧絕非詳盡無遺。您可以進一步提高效率。有關詳細的優化技術，以下資源是必讀的：

• W3C SVG 1.1規範
• 網頁上的SVG
• Sarah Drasner撰寫的《高性能SVG》
• Sara Soueidan撰寫的《優化SVG在網頁上的交付的技巧》
• Andreas Larsen撰寫的《優化SVG》

您的SVG優化工作流程是什麼？點擊評論框分享吧！

關於SVG和網站性能的常見問題解答（FAQ）

使用SVG對網站性能有什麼好處？

可縮放矢量圖形（SVG）為網站性能提供了許多好處。首先，SVG與分辨率無關，這意味著無論屏幕大小或分辨率如何，它們都能保持其質量。這對於響應式網頁設計尤其有利。其次，與JPEG或PNG等其他圖像格式相比，SVG通常具有較小的文件大小，這可以顯著提高頁面加載速度。最後，SVG可以用CSS和JavaScript進行動畫處理和操作，從而提供更大的靈活性和交互性，而無需額外的HTTP請求。

SVG如何影響SEO？

SVG可以通過多種方式積極影響SEO。由於SVG文件較小，因此可以提高頁面加載速度，這是Google的排名因素。此外，與其他圖像格式不同，SVG可以被搜索引擎索引和抓取。這意味著您可以為SVG添加替代文本和其他元數據，從而進一步增強您的SEO工作。

SVG可以用於復雜的圖形嗎？

是的，SVG非常適合複雜的圖形，例如徽標、圖標和插圖。與光柵圖像不同，SVG在放大或縮小後不會失真，因此非常適合需要以各種尺寸顯示的複雜設計。此外，SVG可以用CSS和JavaScript進行樣式設置和動畫處理，從而實現更複雜和交互式的設計。

使用SVG有什麼缺點嗎？

雖然SVG提供了許多好處，但也有一些潛在的缺點需要考慮。一些舊的瀏覽器可能不支持SVG，這可能會影響您的網站對某些用戶的顯示方式。此外，雖然SVG非常適合簡單或中等複雜度的圖形，但對於高度詳細或照片類型的圖像，它們可能不是最佳選擇。

如何優化SVG以獲得更好的性能？

有多種方法可以優化SVG以獲得更好的性能。一種方法是縮小SVG代碼，這將刪除不必要的字符和空格，從而減小文件大小。您還可以使用gzip壓縮來進一步減小文件大小。此外，考慮使用CSS和JavaScript來製作SVG動畫或操作SVG，而不是嵌入多個SVG文件。

SVG可以提高移動網站的性能嗎？

是的，SVG可以顯著提高移動網站的性能。由於SVG與分辨率無關，因此它們可以在任何屏幕尺寸上保持其質量，這使得它們非常適合響應式網頁設計。此外，它們較小的文件大小可以提高頁面加載速度，這對於可能具有較慢互聯網連接的移動用戶尤其重要。

就性能而言，SVG與其他圖像格式相比如何？

SVG在性能方面通常優於其他圖像格式。它們的文件大小較小，可以提高頁面加載速度。與在放大時可能會變得像素化的光柵圖像不同，它們在任何尺寸下都能保持其質量。但是，對於高度詳細或照片類型的圖像，JPEG或PNG等格式可能更合適。

我可以使用SVG製作動畫嗎？

是的，可以使用CSS或JavaScript為SVG製作動畫。這允許更具交互性和吸引力的設計，而無需額外的HTTP請求。但是，請記住，複雜的動畫可能會增加文件大小並可能影響性能。

SVG是否易於訪問？

是的，可以通過添加替代文本和其他元數據來使SVG易於訪問。這允許屏幕閱讀器向視力障礙的用戶描述圖像，從而提高您網站的可訪問性。

如何學習創建和使用SVG？

網上有很多資源可以學習SVG。 MDN Web文檔、CSS-Tricks和各種編碼訓練營等網站提供有關創建和使用SVG的教程和指南。此外，還有許多工具（如Adobe Illustrator和Inkscape）可以幫助您創建SVG圖形。

以上是使用SVG圖像適合您的網站的性能嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！