圖片長寬比不正確

如果轉譯的圖片長寬比與來源檔案 (「自然」顯示比例) 有顯著差異,算繪後的圖片可能會扭曲,因而產生不愉快的使用者體驗。

Lighthouse 圖片顯示比例稽核失敗

Lighthouse 會在以自然比例算繪時,標記任何像素轉譯尺寸超過少數像素差異度的任何圖片:

Lighthouse 稽核顯示的圖片顯示比例不正確

導致圖片顯示比例不正確有兩個常見原因:

  • 設定圖片的寬度和高度值與來源圖片的尺寸不同。
  • 圖片已設為以可變大小的容器百分比表示的寬度和高度。

確保圖片以正確的顯示比例顯示

使用映像檔 CDN

圖片 CDN 可讓您更輕鬆地自動建立不同尺寸版本的映像檔。如需概要說明,請參閱「使用圖片 CDN 將圖片最佳化」一文;如需實際操作程式碼研究室,請參閱如何安裝 Thumbor 圖片 CDN

查看會影響圖片顯示比例的 CSS

如果您找不到導致顯示比例錯誤的 CSS,Chrome 開發人員工具可顯示影響特定圖片的 CSS 宣告。詳情請參閱 Google 的「僅查看實際套用至元素的 CSS」頁面。

請檢查 HTML 中圖片的 widthheight 屬性

如果可能的話,建議您在 HTML 中指定每張圖片的 widthheight 屬性,以便瀏覽器為圖片分配空間。這種方法有助於確保載入圖片後,圖片下方內容不會位移。

但是,要是您使用回應式圖片,在瞭解可視區域尺寸之前,就無法得知寬度和高度,因此在 HTML 中指定圖片尺寸可能並不容易。建議您使用 CSS 顯示比例程式庫或顯示比例方塊,為回應式圖片保留長寬比。

最後,請參閱「提供尺寸正確的圖片」一文,瞭解如何根據使用者的裝置提供適當大小的圖片。

資源