來自 Google 的 6 個圖片優化技巧

在 Google 的新影片中，開發者倡導者 Alan Kent 分享了優化電子商務網站圖片的六個技巧。

雖然該影片專門針對電子商務網站，但這些建議適用於任何提供大量圖片的網站。

底下讓我帶您快速了解那些是 Google 提到的讓圖片載入更快、更高效的技巧。

1. 消除圖片累積版型移位（CLS）

CLS 指的是頁面上的內容在載入時從一個地方視覺上移動或轉移到另一個地方的情況。

雖然這個問題並非完全由圖片引起，但如果使用不當，它們可能會導致問題。

在大多數情況下，CLS 很容易通過在載入過程中尋找頁面上的移動來發現。

2. 調整圖片至正確的大小

為您的圖片選擇正確的寬度和高度，因為較大的文件需要更長的下載時間。

由於訪問您網站的螢幕尺寸和分辨率的關係，將圖片調整至正確的尺寸可能會很複雜。

如果瀏覽器自己裁剪圖片，下載的時間最終會比需要的長，這只會拖累事情。

檢測圖片尺寸是否正確的一種簡單方法是使用 PageSpeed Insights，在報告中「機會」(Opportunities) 區域下會給予提示。

一旦您找出了大於必要的圖片，您可以使用響應式圖片等方法來解決問題。

3. 使用最佳的圖片文件格式

考慮圖片的檔案格式，例如是使用 PNG、JPEG 還是 webP 檔案 。

檔案 格式會影響 檔案 大小，因此選擇正確的格式需要仔細考慮。

每種格式都有優缺點。 例如，JPEG 和 webP 往往具有較小的檔案大小，儘管是以犧牲圖像質量為代價。

但是，購物者可能不會察覺到圖片品質的下降，速度帶來的優勢可能很大。

要檢測您的網站是否可以從使用不同的圖片格式中受益，請查看 PageSpeed Insights 報告中的以下一代格式提供圖片部分。 此報告列出了可以轉換為更有效文件格式的圖片。

4. 適當地壓縮圖片

PageSpeed Insights 報告的“高效編碼圖片”部分可用於找出適合壓縮優化的圖片。該報告還顯示了潛在的能節省的檔案大小。

為您的圖片使用正確的品質參數以有效地對其進行編碼，同時保持所需的圖片品質。

要找到您滿意的品質參數，請在您選擇的圖片轉換工具上使用不同數值，並前後多方比較多張圖片。

Google 推薦用網站 Squoosh.app 以比較壓縮和不壓縮圖片的差異。

5. 在瀏覽器中快取圖片

告訴瀏覽器它可以安全地快取圖片多長時間。

當您送出一張圖片時，您可以送出帶有快取政策的 HTTP 標頭，例如建議瀏覽器快取圖片多長時間。

同樣，您可以使用 PageSpeed Insights 報告來檢測 HTTP 快取標頭是否已在您的網站上正確地設定。

從報告的快取政策區塊裡，能夠找出可能受益於快取改進的圖片。

要解決您網站上的問題，請查看您是能夠更服務器上的設定，以調整您網站上圖片的快取壽命。

如果您不經常更改圖片，則可以設定較長的快取壽命。

6. 正確為您的圖片安排下載順序

作為進階的提示，Google 建議正確地排序網頁資源的下載順序。

建議的下載順序如下：

• 頁面頂部的英雄圖片 (Hero image)
• 首要畫面上的其他圖片
• 首要畫面正下方的圖片

網頁上的其餘圖片則可以延遲加載。

要檢測您的網站是否有效地載入圖片，您可以參考 PageSpeed Insights 報告。在報告的延遲螢幕外圖片部分，您將看到可以在其他圖片之後載入的圖片列表。