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

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

レスポンシブ画像をプリロードすると、画像の読み込みが可能になります。 ブラウザが適切な画像を識別しやすくなるため、 srcset から呼び出すことにより、img タグがレンダリングされます。

レスポンシブ画像の概要

対応ブラウザ

  • Chrome: 73。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 78。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

300 ピクセル幅の画面でウェブをブラウジングしていて、 1,500 ピクセル幅の画像をリクエストします。このページは大量のモバイル リソースを無駄にしています これ以上の解像度では何もできないからです ブラウザは、小さなバージョンの画像を 画面サイズよりも横長（325 ピクセルなど）を選択します。これにより 高精細な画像を生成できます。また、画像の読み込みが速くなります。

レスポンシブ画像 ブラウザはデバイスごとに異なる画像リソースを取得できます。この操作を 画像 CDN を使用し、それぞれに複数のディメンションを保存する srcset 属性で指定します。w 値は、 ブラウザは各バージョンの幅を調整できるため、 あらゆるデバイス：

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

プリロードの概要

対応ブラウザ

  • Chrome: 50。 <ph type="x-smartling-placeholder">
  • Edge: ≤79。 <ph type="x-smartling-placeholder">
  • Firefox: 85。 <ph type="x-smartling-placeholder">
  • Safari: 11.1。 <ph type="x-smartling-placeholder">

ソース

プリロードを使用すると、 できるだけ早く読み込む必要がある 重要なリソースを 表示されます。これは、リソースに対してリソースが用意されていない場合に特に有用です。 たとえば、スタイルシートに含まれるフォント、背景画像、 リソースを定義します。

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

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">

このコマンドは、Terraform と同じリソース選択ロジックを使用してリクエストを開始します。 srcset と sizes は使用しています。

ユースケース

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

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

スライドショーの一部としてヒーロー画像を動的に読み込み、 最初に表示する画像を指定しますそのような場合は スライドショーのスクリプトが終わるのを待たずに 読み込みます。

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

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

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

<ph type="x-smartling-placeholder">
</ph> 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 をダウンロードして処理した後に限られます。

この問題は、 レスポンシブ背景画像。

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

レスポンシブな画像のプリロードでは、画像をより高速に読み込めます。

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

href 属性を省略すると、 <link> 要素では imagesrcset をサポートしますが、image-set はサポートします。 CSS が適切なソースをダウンロードします。ただし、プリロードの恩恵は受けられません。 できます。

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

<ph type="x-smartling-placeholder">
</ph> JPEG リソースが複数の CSS に並列でダウンロードされるウォーターフォールを表示している Chrome DevTools の [Network] パネル。
ここでは、画像と CSS のダウンロードが同時に開始されるため、画像の読み込みが速くなります。

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

理論的には、レスポンシブ画像をプリロードすると画像の読み込み速度が上がりますが、 どうすればよいでしょうか。

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

これにより、 プリロードなし イメージのプリロードの場合:

で確認できます。 <ph type="x-smartling-placeholder">
</ph> WebPageTest のフィルムストリップを比較することで、プリロードされた画像が約 1.5 秒速く表示されるようになりました。
画像をプリロードすると画像が表示されるまでの時間が大幅に短縮され、ユーザー エクスペリエンスが大幅に向上します。

プリロードと <picture>

Web Performance Working Group では、同等のプリロードを追加することが検討されています。 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)">
<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> 要素を使用します。いずれにしてもこれはベストプラクティスです 特に Fetch Priority を使用して 追加します。

Largest Contentful Paint（LCP）への影響

画像は Largest Contentful Paint（LCP）の候補であり、 ウェブサイトの LCP を改善できます。

プリロードする画像がレスポンシブかどうかに関係なく、 最初のマークアップ ペイロードで画像リソースを検出できない場合に最適です。 また、クライアントでマークアップをレンダリングするサイトの LCP も改善されます。 完全なマークアップをサーバーから送信するサイトに比べて高い精度です。