如何優化網站圖片

步驟

1. 1

   1. 提供正確的尺寸

   測量圖片佔用的最大 CSS 寬度，並以約兩倍的尺寸匯出以用於高密度顯示器。一個 1200 CSS 像素的英雄圖片需要 2400px 的來源，而不是 6000px 的相機原始圖片。這一步通常比所有其他步驟加起來都有效。

2. 2

   2. 使用 WebP，並盡可能使用 AVIF

   WebP 在相同品質下比 JPEG 小 25–35%，並且到處都支援。AVIF 更進一步，但編碼速度較慢。如果您需要支援非常舊的客戶端，請保留 JPEG 備用。

3. 3

   3. 根據內容設定品質，而不是習慣

   照片使用 75–85。對於邊緣銳利的圖形，壓縮偽影更明顯，則使用更高的品質。在實際顯示尺寸下檢查結果。

4. 4

   4. 始終設定寬度和高度

   明確的尺寸讓瀏覽器在圖片載入前預留空間，這可以防止佈局偏移。這是一個無需成本的累積佈局偏移修復。

5. 5

   5. 在首屏下方延遲載入，絕不在首屏上方

   將 loading="lazy" 加入頁面下方圖片。請勿對 LCP 圖片進行延遲載入，這會延遲正在測量的內容。