レスポンシブ画像をプリロードする

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

レスポンシブ画像をプリロードすると、ブラウザが img タグをレンダリングする前に srcset から正しい画像を特定できるため、画像の読み込みが大幅に高速化します。

レスポンシブ画像の概要

対応ブラウザ

  • Chrome: 73。
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2。

幅 300 ピクセルの画面でウェブをブラウジングしていて、ページが幅 1,500 ピクセルの画像をリクエストしたとします。画面でその解像度をすべて使用できないため、そのページでは多くのモバイルデータが浪費されています。ブラウザは、画面サイズよりも少しだけ幅の広いバージョンの画像（325 ピクセルなど）を取得するのが理想的です。これにより、データを無駄にすることなく高解像度の画像が生成され、画像の読み込みが速くなります。

レスポンシブ画像を使用すると、ブラウザはデバイスごとに異なる画像リソースを取得できます。画像 CDN を使用しない場合は、画像ごとに複数のディメンションを保存し、srcset 属性で指定します。w 値は、各バージョンの幅をブラウザに伝え、デバイスに適したバージョンを選択できるようにします。

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

プリロードの概要

対応ブラウザ

  • Chrome: 50。
  • Edge: ≤79。
  • Firefox: 85.
  • Safari: 11.1。

ソース

プリロードを使用すると、HTML で検出される前に、できるだけ早く読み込む必要のある重要なリソースをブラウザに通知できます。これは、スタイルシートに含まれるフォント、背景画像、スクリプトから読み込まれたリソースなど、簡単に検出できないリソースに特に便利です。

<link rel="preload" as="image" href="important.png">

imagesrcset、imagesizes

<link> 要素は、imagesrcset 属性と imagesizes 属性を使用して、レスポンシブ画像をプリロードします。<link rel="preload"> とともに使用し、<img> 要素で srcset と sizes の構文を使用します。

たとえば、次のように指定されたレスポンシブ画像をプリロードする場合:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

これを行うには、HTML の <head> に次の行を追加します。

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

これにより、srcset と sizes で使用されるものと同じリソース選択ロジックを使用してリクエストが開始されます。

ユースケース

レスポンシブ画像をプリロードするユースケースには、次のようなものがあります。

動的に挿入されたレスポンシブ画像をプリロードする

スライドショーの一部としてヒーロー画像を動的に読み込み、どの画像が最初に表示されるかがわかっているとします。その場合、スライドショー スクリプトによる読み込みを待たずに、その画像をできるだけ早く表示することをおすすめします。

この問題は、動的に読み込まれる画像ギャラリーを使用するウェブサイトで確認できます。

  1. 新しいタブでこちらのスライドショーのデモを開きます。
  2. Control+Shift+J（Mac の場合は Command+Option+J）を押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. [スロットリング] プルダウン リストで、[高速 3G] を選択します。
  5. [キャッシュを無効にする] チェックボックスをオフにします。
  6. ページを再読み込みする。
Chrome DevTools の [Network] パネルに、JPEG リソースのダウンロードが開始されるウォーターフォールが、JavaScript の後でのみ開始される様子が表示されている。
プリロードしない場合、ブラウザがスクリプトの実行を終了した後に画像の読み込みが開始されます。最初の画像の場合は、この遅延は不要です。

ここで preload を使用すると、画像の読み込みを事前に開始できるため、ブラウザが画像を表示する必要があるときにすぐに表示できます。

一部の JavaScript と並行してダウンロードされる JPEG リソースを含むウォーターフォールを示す Chrome DevTools の [Network] パネル。
最初の画像をプリロードすると、スクリプトと同時に読み込みを開始できます。

プリロードがもたらす違いを確認するには、最初の例の手順に沿って、同じ動的に読み込まれる画像ギャラリーを調べますが、最初の画像をプリロードします。

image-set を使用して背景画像をプリロードする

画面密度ごとに異なる背景画像がある場合は、CSS で image-set 構文を使用して指定できます。ブラウザは、画面の DPR に基づいて表示する広告を選択できます。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS の背景画像の問題は、ブラウザがページの <head> 内のすべての CSS をダウンロードして処理した後にのみ、背景画像を検出することです。

この問題は、レスポンシブな背景画像を使用するサンプル ウェブサイトで調べることができます。

Chrome DevTools の [Network] パネルに、JPEG リソースのダウンロードが一部の CSS の後に開始されることを示すウォーターフォールが表示されている。
この例では、CSS が完全にダウンロードされるまで画像のダウンロードが開始されないため、画像の表示に不要な遅延が発生します。

レスポンシブ画像のプリロードを使用すると、これらの画像をより速く読み込むことができます。

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

href 属性を省略すると、<link> 要素の imagesrcset をサポートしていなくても、CSS の image-set をサポートしているブラウザは、正しいソースをダウンロードできるようになります。ただし、この場合はプリロードの恩恵を受けられません。

前の例がプリロードされたレスポンシブ背景画像でどのように動作するかは、レスポンシブ背景プリロードデモで確認できます。

一部の CSS と並行してダウンロードされる JPEG リソースを含むウォーターフォールを示す Chrome DevTools の [Network] パネル。
ここでは、画像と CSS のダウンロードが同時に開始されるため、画像の読み込みが速くなります。

レスポンシブ画像をプリロードする効果

レスポンシブ画像をプリロードすると、理論上は読み込みが速くなりますが、実際にはどうなるのでしょうか。

デモ PWA ショップの 2 つのコピーを作成しました。一つは画像をプリロードしないで、もう一つは画像をプリロードするです。このサイトでは JavaScript を使用して画像を遅延読み込みしているため、最初のビューポートに表示される画像をプリロードすると効果的です。

その結果、プリロードなしと画像プリロードで次の結果が得られました。

プリロードされた画像の表示が約 1.5 秒早くなったことを示す、WebPageTest のフィルムストリップの比較
事前読み込みすると画像の読み込みが大幅に速くなり、ユーザー エクスペリエンスが大幅に向上します。

プリロードと <picture>

Web パフォーマンス ワーキング グループでは、srcset と sizes にプリロードと同等の要素を追加することを検討しています。ただし、「アート ディレクション」のユースケースを処理する <picture> 要素は追加しません。

<picture> のプリロードに関して、解決すべき技術的な問題はまだ数多くありますが、その間にも回避策があります。

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> 要素のイメージソース選択ロジックは、<source> 要素の media 属性を順番に調べ、一致する最初の属性を見つけて、アタッチされたリソースを使用します。

レスポンシブ プリロードには「順序」や「最初の一致」の概念がないため、ブレークポイントを次のような値に変換する必要があります。

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

プリロードと type

<picture> 要素は、最初の type での照合もサポートしています。これにより、さまざまな画像形式を指定して、ブラウザがサポートする最初の画像形式を選択できます。このユースケースはプリロードではサポートされていません。

タイプ マッチングを使用するサイトでは、プリロードを避け、代わりに プリロード スキャナが <picture> 要素と <source> 要素から画像を取得するようにすることをおすすめします。これは、適切な画像の優先順位付けにフェッチ優先度を使用する場合は特に、ベスト プラクティスです。

Largest Contentful Paint（LCP）への影響

画像は Largest Contentful Paint（LCP）の候補となる可能性があるため、画像をプリロードするとウェブサイトの LCP を改善できます。

プリロードする画像がレスポンシブかどうかにかかわらず、プリロードは、初期マークアップ ペイロードで画像リソースが検出できない場合に最適に機能します。また、サーバーから完全なマークアップを送信するサイトよりも、クライアントサイドでマークアップをレンダリングするサイトの方が、LCP の改善効果が大きくなります。