レスポンシブ画像

レスポンシブ画像を使用すると、モバイル ユーザーが帯域幅を無駄にしたりページの読み込み速度を遅くしたりするデスクトップ サイズの画像をダウンロードするのを防ぎます。 HTML は、解像度を切り替えるための srcset 属性と、アート ディレクションのための pict 要素を提供し、さまざまなクロップやフォーマットをさまざまなデバイスに提供します。 Next.js のような最新のフレームワークは、レスポンシブな画像生成を自動化し、単一のソースから複数のサイズを作成し、ビューポートに基づいて最適なバージョンを提供します。 WebP および AVIF fAVIFts を JPEG fallbacJPEG__ と併用すると、帯域幅が減少します。レスポンシブ画像は Core Web Vitals のパフォーマンスにとって重要です。画像が大きすぎると、ユーザー エクスペリエンスと検索エンジンのランキングの両方に影響を与える主要な読み込みパフォーマンス指標である Largest Contentful Paint が遅れます。