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