隨著網站上的圖片和影片數量持續增長，載入時間更慢，導致負面的多使用者體驗，任何公司都越來越關注。 “財政時報” 的一篇文章引用了網際網路資料測量公司 HTTP Archive，指出平均網站現在是 2.1 MB 大小，而幾年前是 1.5MB 。 這種增長的主要原因之一是新增內容，例如影片和吸引人的圖片，旨在為網站帶來更多流量。
該文章說明，影像佔內容型別的平均頁面的幾乎 63％的位元組（總共 2,087 KB 的 1,312 KB）。 影片以 10％（208 KB）遙遙領先。影像在網站上的影響可以戲劇性，增加網站訪問者等待網頁載入的時間。每過一秒都會降低您網站的總體轉化率和最終收入，因此希望儘可能最佳化您的圖片和廣告投放是非常有意義的。
如果您遇到網站效能問題，可能是因為圖片出現一個或多個關鍵錯誤。 在這個分為兩部分的系列文章中，我們將探討如何最佳化您的影像和網路，以確保最佳的多使用者體驗，最小化成本，以及頻寬和儲存需求。下面來看看簡潔的 WordPress 網站設計：如何最佳化影像來提高 UX 。
下面介紹了管理圖片時最常見的錯誤，以及如何避免這些錯誤：
1. 不使用更高效，現代的影像格式
即使 Google 已經將其 WebP 影像格式支援到 Chrome 瀏覽器，而且微軟在大多數 Internet Explorer 和 Edge 瀏覽器中對 JPEG-XR 也是如此，但是開發人員還是沒有接受它們。 也許您不知道這些格式，或者太難以提供不同的影像格式到各種瀏覽器和裝置。 因此，您可能會使用相同的 JPG 和 PNG 格式，而不能利用現代格式如何最佳化其網站。
如何修復：將影像轉換為 WebP 和 JPEG-XR 現代格式，同時還調整壓縮質量以在格式之間取得平衡。 此外，透過檢測訪問每個影像並將不同版本的影像提供給相應瀏覽器的特定瀏覽器，您可以確保多使用者在視覺質量和檔案大小最佳化方面獲得最佳影像。如果您有更多關於 WordPress 外貿獨立站網站建設、 WordPress 站群網站最佳化、 logo 設計、品牌設計、印刷、 WordPress APP/WordPress 微信開發等產品服務的需求，歡迎諮詢跨飛獨立站 WooCommerce 官網，新上線企業 VI 設計套餐和 WordPress 站群網站營銷推廣系統（強）！
2. 使用 GIF 格式嵌入短影片
您可以依靠 GIF 圖片格式在新聞網站，媒體網站和社交分享網站上顯示短影片剪輯。雖然 GIF 格式很容易用於使用簡單的 HTML 影像標記嵌入影片剪輯，但是對於捕獲的電影，它是不高效的，因為檔案是巨大的和慢的載入，尤其是在移動裝置上，導致高頻寬成本和高 CPU 利用率。
如何解決：有幾種方法可以使用現代檔案格式（例如 Chrome 瀏覽器多使用者的動畫 WebP）傳遞和嵌入相同的剪輯和動畫。另一種方法是應用 GIF 檔案的有失真壓縮，這導致輕微的視覺質量下降，但顯著減小檔案大小。
GIF 檔案還可以轉換為 MP4 或 WebM 影片格式，嵌入剪輯和 HTML5 影片標記，而不是影像標記。在大多數現代瀏覽器，這項工作進行順利，網站看起來完全相同，但載入速度更快。透過執行這些步驟之一，您將能夠顯著減小檔案大小，節省頁面載入時間，提高多使用者體驗和降低頻寬成本。
3. 向所有多使用者提供 2X（Retina 顯示）影像
現代移動裝置和膝上型電腦具有高裝置畫素比（DPR）。 由於您希望自己的網站在這些裝置上呈現出色效果，因此您可能會嵌入雙重解析度的圖片。 雖然這是一個好的做法，但許多開發人員傾向於向所有多使用者提供相同大小的影像。 因此，具有常規顯示器（例如，非視網膜顯示器）的多使用者必須下載高解析度影像，而其顯示器僅受益於解析度的一半。 這導致等待頁面載入的時間浪費，並且不必要地增加頻寬成本。
如何修復：為每個 DPR 值建立不同的解析度（例如，常規影像和雙重解析度影像），並自動檢測當前多使用者瀏覽器中的網頁的 DPR 值。 這將使您能夠向具有常規顯示器和 2x 解析度影像的多使用者提供常規影像給具有視網膜顯示裝置的多使用者。
4. 浪費瀏覽器端調整大小
開發人員使用的常見快捷方式之一是使用瀏覽器側影像調整大小，而不是調整 WooCommerce 伺服器端的影像大小。 在現代瀏覽器上，最終結果看起來完全相同，但是頻寬方面的故事是完全不同的。 網站訪問者浪費寶貴的時間下載不必要的大影像，浪費頻寬提供給他們。 對於較老的瀏覽器，問題更加明顯，因為它們的調整大小演演算法通常是 sub-par 。
如何解決：確保您提供的圖片完全符合其所需的網站尺寸。 即使相同的圖片應該被製成不同大小的縮圖以適應不同的頁面，它是非常值得建立不同的縮圖，而不是提供一個大圖片，並依靠瀏覽器來調整大小。
5. 忘記去除影像後設資料
許多現代網站允許訪客上傳照片。無論是多使用者的個人資料圖片還是來自最近旅行的共享照片，這些最初是使用現代相機拍攝的，這很可能將大量後設資料引入到照片中。在大多數情況下，關閉這個後設資料是一個很好的主意，但開發人員很少花時間這樣做，這導致影像需要更多的頻寬傳輸和較慢的多使用者瀏覽體驗。
如何解決：確保將後設資料從您的圖片和多使用者上傳的照片中刪除。如果此資訊是必要的，您可以將其儲存在某個地方，而不是作為影像的一部分。即使您的網站不需要圖片後設資料，也會有一段資訊，即圖片的原始拍攝方向，這對於在您的網站上正確顯示照片至關重要。剝離 Exif 資訊時，請確保在丟失此資訊之前根據其 Exif 資料將影像旋轉到正確的方向。
完成！
本文雖然不全面，但概述了最常見的影像相關問題，可以輕鬆，經濟高效地解決，消除過多的頻寬使用，併為您的網站訪問者提供更好的體驗。在本系列的最後一部分，我們將討論在提供影像時確保網路最佳化的提示。