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

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

公開日: 2019 年 9 月 30 日、最終更新日: 2026 年 7 月 10 日

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

レスポンシブ画像の概要

Browser Support

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

Source

幅 300 ピクセルの画面でウェブを閲覧しているときに、ページが幅 1, 500 ピクセルの画像をリクエストしたとします。画面では余分な解像度を処理できないため、このページではモバイルデータが大量に無駄になっています。 理想的には、ブラウザは画面サイズより少しだけ大きい（たとえば 325 ピクセル）バージョンの画像を取得します。 これにより、データを無駄にすることなく高解像度の画像を表示でき、画像の読み込みを高速化できます。

レスポンシブ画像 を使用すると、ブラウザはさまざまなデバイスに対してさまざまな画像リソースを取得できます。画像 CDN を使用しない場合は、各画像の複数のサイズを保存し、srcset 属性で指定します。w 値は各バージョンの幅をブラウザに伝えるため、ブラウザはどのデバイスにも適切なバージョンを選択できます。

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

プリロードの概要

Browser Support

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

Source

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

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

imagesrcset と imagesizes

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

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

 <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" fetchpriority="high">

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

ユースケース

レスポンシブ画像のプリロードのユースケースをいくつか紹介します。

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

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

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

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

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

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

プリロードによる違いを確認するには、最初の例の手順に沿って最初の画像をプリロードした状態で、同じ動的に読み込まれる 画像ギャラリーを検査します。

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

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

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

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

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

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

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

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

href 属性を省略すると、<link> 要素で imagesrcset をサポートしていないが、CSS で image-set をサポートしているブラウザで、正しいソースをダウンロードできます。ただし、この場合、プリロードのメリットはありません。

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

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

レスポンシブ画像のプリロードの実用的な効果

レスポンシブ画像をプリロードすると、理論的には高速化できますが、実際にはどうなるでしょうか。

これに答えるために、デモ PWA ショップのコピーを 2 つ作成しました。 1 つは画像をプリロードしないもの、 もう 1 つは一部の画像をプリロードするものです。 このサイトでは JavaScript を使用して画像を遅延読み込みするため、最初の viewport に表示される画像をプリロードするとメリットがあります。

プリロードなしの場合と画像プリロードの場合の結果は次のとおりです。

  • Start Render は変わりませんでした。
  • Speed Index がわずかに改善されました（273 ミリ秒。画像が早く到着するため、ピクセル領域の大部分を占有しません）。
  • Last Painted Hero が 1.2 秒と大幅に改善されました。
プリロードされた画像が約 1.5 秒速く表示されることを示す WebPageTest のフィルムストリップ比較。
プリロードすると画像が大幅に早く到着し、ユーザー エクスペリエンスが大幅に向上します。

プリロードと <picture>

ウェブ パフォーマンス ワーキング グループは、 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> 要素の画像ソース選択ロジックは、media 属性を順番に調べ、<source> 要素の最初の要素を見つけて、アタッチされたリソースを使用します。

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

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

プリロードと type

<picture> 要素は、最初の type の照合もサポートしています。これにより、さまざまな画像形式を提供できるため、ブラウザはサポートしている最初の画像形式を選択できます。

このユースケースはプリロードで部分的にのみサポートされています。ブラウザは、サポートされているタイプのプリロードのみをダウンロードする必要があります。そのため、プリロードに次のコードを含めることで、ブラウザがサポートされていない MIME タイプのプリロードを回避できます。

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

ただし、<picture> とは異なり、最初にサポートされているタイプで停止しません。そのため、複数のタイプに対して複数のプリロードが含まれている場合、すべての画像がプリロードされます。

これは避けてください。複数のタイプをプリロードします。

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

代わりに、最も優先度の高いタイプをプリロードします。

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

最新の形式（この場合は AVIF）をプリロードすると、プログレッシブ エンハンスメントとして機能します。このタイプをサポートするブラウザはメリットがありますが、他のブラウザはプリロードのメリットはありません。

HTML で画像がすぐに検出できるサイトでは、プリロードを回避し、代わりに プリロード スキャナが <picture> 要素と <source> 要素から画像を取得することをおすすめします。これはベスト プラクティスです。特に、Fetch Priority を使用して適切な画像の優先順位付けを行う場合は、ブラウザのサポートに基づいて正確な画像をプリロードできます。また、画像やページが変更されたときに、プリロードがメインのマークアップから古くなるリスクもなくなります。

Largest Contentful Paint（LCP）への影響

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

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