圖片長寬比不正確

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

Lighthouse 圖片顯示比例稽核失敗

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

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

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

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

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

使用映像檔 CDN

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

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

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

請檢查 HTML 中圖片的 widthheight 屬性

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

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

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

資源