レンダリングされた画像のアスペクト比がソースファイルのアスペクト比（自然なアスペクト比）と著しく異なる場合、レンダリングされた画像が歪んでしまい、ユーザー エクスペリエンスが低下する可能性があります。
Lighthouse の画像アスペクト比の監査が不合格になる仕組み
Lighthouse では、自然な比率でレンダリングされた際に、想定されるサイズと数ピクセル以上の差がある画像に警告が表示されます。
画像のアスペクト比が正しくない一般的な原因は 2 つあります。
- 元の画像と異なる幅と高さの値が明示的に設定されています。
- 画像は、可変サイズのコンテナに対する割合で幅と高さに設定されます。
画像が適切なアスペクト比で表示されることを確認する
画像 CDN を使用する
画像 CDN を使用すると、さまざまなサイズの画像を作成するプロセスを簡単に自動化できます。概要については、画像 CDN を使用して画像を最適化するをご覧ください。実践的な Codelab については、Thumbor image CDN をインストールする方法をご覧ください。
画像のアスペクト比に影響する CSS を確認する
アスペクト比が正しくない原因となっている CSS が見つけられない場合は、Chrome DevTools を使って特定の画像に影響する CSS 宣言を確認できます。詳しくは、Google の要素に実際に適用されている CSS のみを表示するをご覧ください。
HTML で画像の width 属性と height 属性を確認する
可能であれば、HTML で各画像の width 属性と height 属性を指定して、ブラウザが画像用のスペースを確保できるようにすることをおすすめします。この方法により、画像が読み込まれたときに、画像の下のコンテンツがずれないようにすることができます。
ただし、レスポンシブ画像を使用している場合、ビューポートの寸法を知るまでは幅と高さを知る方法がないため、HTML で画像のサイズを指定するのが難しいことがあります。レスポンシブ画像のアスペクト比を維持するために、CSS アスペクト比 ライブラリまたはアスペクト比ボックスの使用を検討してください。
最後に、各ユーザーのデバイスに適したサイズの画像を提供する方法については、正しいサイズの画像を提供するの投稿をご覧ください。