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

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 キー）を押して、デベロッパー ツールを開きます。
  3. [ネットワーク] タブをクリックします。
  4. [スロットリング] プルダウン リストで、[高速 3G] を選択します。
  5. [キャッシュを無効にする] チェックボックスをオフにします。
  6. ページを再読み込みする。
一部の JavaScript の実行後にのみ JPEG リソースのダウンロードが開始されるウォーターフォールを示す Chrome DevTools の [Network] パネル。
プリロードしない場合、画像の読み込みはブラウザがスクリプトの実行を完了した後に開始されます。最初の画像の場合は、この遅延は不要です。

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

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

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

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

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

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

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

この問題は、レスポンシブな背景画像を使用したサンプル ウェブサイトで確認できます。

一部の CSS の後にのみ JPEG リソースのダウンロードが開始されるウォーターフォールを示す Chrome DevTools の [Network] パネル。
この例では、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 の改善効果が大きくなります。