緩慢的網站可能會損害您的搜索引擎排名並使訪問者拒之門外。 此外，擁有大型圖像文件是載入時間緩慢的主要原因之一。 幸運的是，有幾種方法可以優化圖像以提高 Web 性能。
在這篇文章中，我們將討論圖像對您網站性能的影響。 然後，我們將分享一些不同的方法來有效地優化您的圖片。
讓我們開始吧！
圖像對 Web 性能的影響有多大？
圖片會顯著影響您網站的整體性能。 為了提供最好的 用戶體驗 (UX)，您需要確保您的內容針對 Google 的 核心網路生命力.
Core Web Vitals 是 Google 用來評估您網站性能的指標。 當您運行頁面速度測試時，Google 會根據幾個因素生成報告，包括：
- 首次內容繪製 (FCP)：當瀏覽器在您的頁面上呈現第一個文檔對象模型 (DOM) 元素時。
- 最大含量塗料 (LCP)：您的網站在頁面上呈現最大元素（通常是圖像或視頻）所花費的時間。
- 首次輸入延遲 (FID)：從用戶第一次與您的頁面交互（例如單擊按鈕）到瀏覽器響應該操作的時間量。
- 累積版式偏移 (CLS)：您的網站在載入時有多少內容在頁面周圍移動。 例如，圖像和按鈕等元素可能會在屏幕上移動，從而阻止用戶與您的網站進行交互。
您可以使用在線工具（例如 PageSpeed 見解 或者 GTMetrix. 您所要做的就是輸入您的 URL，然後您將收到一份包含您的分數的報告：
該報告還為您提供有關如何提高績效的建議。 此建議可能包括需要優化以加快載入時間的圖像。
例如，報告可能會將您頁面上最大的內容元素標識為主圖。 如果是這種情況，您可以調整圖像文件的大小並壓縮以提高 LCP 分數。
圖像也會影響您的 CLS 分數。 高 CLS 分數表明您的網站包含沒有指定高度和寬度屬性的圖像。
因此，瀏覽器會花時間嘗試適當地調整圖像大小。 此過程會導致頁面載入時元素髮生變化，從而破壞用戶體驗。 您可以通過為您在網站上上傳的每張照片設置尺寸來輕鬆解決此問題。
優化圖像的 2 種方法
正如我們所見，圖像會影響您的 Core Web Vitals 分數。 讓我們看一下優化圖像以提高 Web 性能的兩種有效方法！
1.壓縮你的圖片
壓縮是一個過程 減小圖像的文件大小. 主要有兩種壓縮方法：
- 有損：此方法會從圖像中刪除大量數據，從而顯著減小文件大小。
- 無損：這種壓縮技術可以減小文件大小，而不會從圖像中刪除任何數據。
大圖像文件會給您的載入時間帶來很大壓力，從而導致網站運行緩慢。 它們還可能佔用您伺服器上的大量空間。
因此，我們建議您壓縮上傳到站點的所有圖像：
有損壓縮往往是 比無損更有效. 這是因為它在減小尺寸方面為您提供了更大的靈活性。 唯一的缺點是有損壓縮可能會影響圖像的質量。
2.調整圖像大小並使用正確的尺寸
為 Web 性能優化圖像的另一種有效方法是調整它們的大小。 通常，尺寸越大，文件越大。
因此，您可能需要考慮在將圖像上傳到您的網站之前對其進行裁剪。 您可以使用您選擇的圖像編輯軟體來做到這一點。
此外，當您將圖像上傳到您的網站時，WordPress 會自動為其生成不同的尺寸。 這些通常包括大、中、小版本以及縮略圖：
這樣，WordPress 使您能夠為您的讀者提供最合適的圖像大小。 它還有助於瀏覽器根據訪問者的設備顯示正確的圖像尺寸。 因此，這些設置使您的網站更具響應性。
在您的帖子中添加圖片時，您可能希望將尺寸設置為大而不是全尺寸。 同樣，如果您正在設計博客提要，您可以為特色圖片選擇縮略圖而不是較大的圖像尺寸。
如果您使用的尺寸比必要的大，您將對網站的速度施加不必要的壓力。 您還將在伺服器上佔用更多空間。
如何以正確的方式優化圖像
幸運的是，您可以使用多種工具來優化圖像以提高網路性能。 本節將介紹一些幫助您入門的最佳實踐。
1.使用圖像壓縮工具或插件
如前所述，壓縮有助於減小圖像的文件大小。 您可以使用許多工具來壓縮照片，包括圖像編輯軟體，例如 Adobe Photoshop 或微軟照片。
您還可以使用在線工具，例如 小PNG：
該工具使用有損壓縮來減小 WEBP 的大小， JPEG 和 PNG 文件. 您所要做的就是上傳您的圖片，TinyPNG 會為您壓縮它們。
在您的站點上安裝並激活插件後，您可以轉到設置 > Imagify 來設置您的壓縮首選項：
我們建議將壓縮級別設置為激進。 此設置將顯著減小文件大小，而圖像質量沒有任何明顯差異。
準備好後，單擊保存更改。 現在，Imagify 將自動壓縮您上傳到站點的所有圖像。
2. 在 WordPress 編輯器中調整圖像大小
我們還討論了調整圖像大小以加快載入速度的重要性。 您可以在將照片上傳到 WordPress 網站之前調整計算機上的照片大小。
但是，您也可以在 WordPress 中調整圖片的大小。 只需在您的帖子或頁面中選擇圖像，然後從右側的設置面板中調整寬度和高度：
或者，您可以在媒體庫中找到圖像並選擇編輯圖像。 此操作會將您帶到一個窗口，您可以在其中裁剪圖像並設置新尺寸：
如您所見，WordPress 編輯器還允許您選擇一種自動生成的圖像大小。 如果您在博客文章中使用圖形，我們建議您選擇大而不是全尺寸。 此設置將呈現更小的圖像尺寸，而不會影響質量。
3.更改您的最大上傳限制
WordPress 帶有最大上傳文件大小。 此金額可能因您的託管服務提供商分配的資源而異。
要檢查您當前的最大文件大小，請導航到 WordPress 儀錶板中的媒體 > 添加新文件。 在此頁面上，您會看到上傳限制：
通常，除非您上傳較大的文件，否則您不需要更改此值。 但是，您可能希望減小文件大小限制，以防止其他用戶上傳過大的圖像。 如果您運行多作者博客，此設置會很方便。
為此，您只需聯繫您的託管服務提供商並要求他們更改最大上傳文件大小。 或者，您可以通過以下方式更改 WordPress 上傳限制 編輯你的 php.ini 文件.
4.延遲調整腳本
為 Web 性能優化圖像的另一種方法是調整腳本在 HTML 代碼中的位置。 JavaScript 非常耗費資源，嵌入在 HTML 中的任何形式的交互都可能導致載入延遲。
在代碼底部鏈接到外部 JavaScript 頁面是標準做法。 這允許文檔對象模型 (DOM) 在任何交互元素被激活之前完全載入。
然而，有些 JavaScript 片段 在整個 DOM 中普遍使用。 一個例子是事件監聽器「onclick」，它告訴按鈕當用戶點擊它時該做什麼。
因此，如果您使用腳本優化圖像，其時間可能會影響頁面的載入時間。 您可以使用插件解決此問題，例如 飛行腳本：
此工具使您能夠延遲運行特定腳本，直到沒有用戶活動。 此設置有助於減少頁面載入所需的時間。
結論
優化您的圖像可以加速您的網站並改善用戶體驗。 此外，Google 的 Core Web Vitals 在評估您網站的質量和性能時會考慮圖像大小。
在這篇文章中，我們研究了幾種優化圖像以提高網路性能的有效方法。 這些方法包括使用插件壓縮圖像和在 WordPress 編輯器中調整照片大小。
您對如何優化圖像以提高網路性能有任何疑問嗎？ 在下面的評論部分讓我們知道！
圖片來源：pixel2013 / pixabay.com，特色圖片來自 elenabsl / shutterstock.com