如果轉譯的圖片長寬比與來源檔案 (「自然」顯示比例) 有顯著差異,算繪後的圖片可能會扭曲,因而產生不愉快的使用者體驗。
Lighthouse 圖片顯示比例稽核失敗
Lighthouse 會在以自然比例算繪時,標記任何像素轉譯尺寸超過少數像素差異度的任何圖片:
![Lighthouse 稽核顯示的圖片顯示比例不正確](https://developer.chrome.com/static/docs/lighthouse/best-practices/image-aspect-ratio/image/lighthouse-audit-shows-im-8901fde1fa46e.png?authuser=7&hl=zh-tw)
導致圖片顯示比例不正確有兩個常見原因:
- 設定圖片的寬度和高度值與來源圖片的尺寸不同。
- 圖片已設為以可變大小的容器百分比表示的寬度和高度。
確保圖片以正確的顯示比例顯示
使用映像檔 CDN
圖片 CDN 可讓您更輕鬆地自動建立不同尺寸版本的映像檔。如需概要說明,請參閱「使用圖片 CDN 將圖片最佳化」一文;如需實際操作程式碼研究室,請參閱如何安裝 Thumbor 圖片 CDN。
查看會影響圖片顯示比例的 CSS
如果您找不到導致顯示比例錯誤的 CSS,Chrome 開發人員工具可顯示影響特定圖片的 CSS 宣告。詳情請參閱 Google 的「僅查看實際套用至元素的 CSS」頁面。
請檢查 HTML 中圖片的 width
和 height
屬性
如果可能的話,建議您在 HTML 中指定每張圖片的 width
和 height
屬性,以便瀏覽器為圖片分配空間。這種方法有助於確保載入圖片後,圖片下方內容不會位移。
但是,要是您使用回應式圖片,在瞭解可視區域尺寸之前,就無法得知寬度和高度,因此在 HTML 中指定圖片尺寸可能並不容易。建議您使用 CSS 顯示比例程式庫或顯示比例方塊,為回應式圖片保留長寬比。
最後,請參閱「提供尺寸正確的圖片」一文,瞭解如何根據使用者的裝置提供適當大小的圖片。