srcsetとsizesで適切な画面に適切な画像を配信し、アートディレクションにはpictureをとっておき、遅延読み込みをマスターします。
このレッスンを Kodokon で開く画像はたいていページの重さの半分を占めます。パフォーマンスの最初のてこです。核となる仕組みは w 記述子を伴う srcset で、利用可能なファイルの実際の幅を宣言します。これを、意図する表示幅を告げる sizes と組み合わせます。重要な点: ブラウザはCSSレイアウトを計算する前に、プリロードスキャナを通じて画像を選びます。sizes がないと、ブラウザは 100vw と想定し、しばしば必要以上のものをダウンロードします。最終的な選択は画面密度も加味します。400 px の領域に対して2xの画面なら、およそ 800 px のファイルを取得します。
<img src="harbor-800.jpg"
srcset="harbor-400.jpg 400w,
harbor-800.jpg 800w,
harbor-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Old harbor at sunset"
width="800" height="533">srcset/sizes では、ブラウザが主導権を握ったままです。密度やデータ節約の設定に応じて、より軽いバリアントを配信するかもしれません。<picture> はその論理を逆転させます。<source media> や <source type> を使って、あなたがソースを押しつけるのです。使いどころは2つに限りましょう: アートディレクション(サイズだけでなく、モバイルでは別の切り抜き)と形式の交渉(JPEGのフォールバックを伴うAVIFやWebP)です。単純なリサイズには、picture は無用な複雑さです。
<picture>
<source media="(max-width: 600px)"
srcset="hero-square.jpg">
<source type="image/avif"
srcset="hero-wide.avif">
<img src="hero-wide.jpg" alt="Museum facade"
width="1200" height="600">
</picture>ページ上の他のすべてには、loading="lazy" が、画像がビューポートに近づくまでダウンロードを先延ばしにします。ネイティブに、JavaScriptなしで。これを decoding="async" と組み合わせてデコードがレンダリングをブロックしないようにし、そして何より width と height と組み合わせます。ブラウザはこれらからアスペクト比を導き、場所を確保するので、レイアウトのずれ(CLS)がなくなります。重要な画像には、遅延とは逆のことをします: fetchpriority="high"。
<img src="gallery-01.jpg"
alt="Exhibition hall"
loading="lazy" decoding="async"
width="800" height="600">