レスポンシブ画像をプリロードすると、ブラウザが img
タグをレンダリングする前に srcset
から正しい画像を特定できるため、画像の読み込みが大幅に高速化します。
レスポンシブ画像の概要
対応ブラウザ
幅 300 ピクセルの画面でウェブをブラウジングしていて、ページが幅 1, 500 ピクセルの画像をリクエストしたとします。画面でその解像度をすべて使用できないため、そのページでは多くのモバイルデータが浪費されています。理想的には、ブラウザは画面サイズより少し広いバージョンの画像(325 ピクセルなど)を取得します。これにより、データを浪費することなく高解像度の画像を確保し、画像の読み込みを高速化できます。
レスポンシブ画像を使用すると、ブラウザはデバイスごとに異なる画像リソースを取得できます。画像 CDN を使用しない場合は、画像ごとに複数のディメンションを保存し、srcset
属性で指定します。w
値は、各バージョンの幅をブラウザに伝え、デバイスに適したバージョンを選択できるようにします。
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
プリロードの概要
プリロードを使用すると、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
で使用されるものと同じリソース選択ロジックを使用してリクエストが開始されます。
ユースケース
レスポンシブ画像をプリロードするユースケースには、次のようなものがあります。
動的に挿入されたレスポンシブ画像をプリロードする
スライドショーの一部としてヒーロー画像を動的に読み込み、どの画像が最初に表示されるかがわかっているとします。その場合は、スライドショー スクリプトが画像を読み込むのを待たずに、できるだけ早くその画像を表示する必要があります。
この問題は、動的に読み込まれる画像ギャラリーがあるウェブサイトで確認できます。
- 新しいタブでこちらのスライドショーのデモを開きます。
Control+Shift+J
キー(Mac の場合はCommand+Option+J
キー)を押して、デベロッパー ツールを開きます。- [ネットワーク] タブをクリックします。
- [スロットリング] プルダウン リストで、[高速 3G] を選択します。
- [キャッシュを無効にする] チェックボックスをオフにします。
- ページを再読み込みする。
ここで preload
を使用すると、画像の読み込みを事前に開始できるため、ブラウザが画像を表示する必要があるときにすぐに表示できます。
プリロードの効果を確認するには、最初の例の手順に沿って、同じ動的に読み込まれる画像ギャラリーを調べますが、最初の画像をプリロードします。
image-set を使用して背景画像をプリロードする
画面密度ごとに異なる背景画像がある場合は、image-set
構文を使用して CSS で指定できます。ブラウザは、画面の DPR に基づいて表示する広告を選択できます。
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
CSS の背景画像の問題は、ブラウザがページの <head>
内のすべての CSS をダウンロードして処理した後にのみ、背景画像を検出することです。
この問題は、レスポンシブな背景画像を使用したサンプル ウェブサイトで確認できます。
レスポンシブ画像のプリロードを使用すると、これらの画像をより速く読み込むことができます。
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
href
属性を省略すると、<link>
要素の imagesrcset
をサポートしていないが、CSS の image-set
をサポートしているブラウザが、正しいソースをダウンロードできるようになります。ただし、この場合、プリロードのメリットはありません。
前述の例が、プリロードされたレスポンシブ バックグラウンド画像でどのように動作するかは、レスポンシブ バックグラウンドのプリロード デモで確認できます。
レスポンシブ画像をプリロードする効果
レスポンシブ画像をプリロードすると、理論上は読み込みが速くなりますが、実際にはどうなるのでしょうか。
この質問に答えるために、デモ PWA ショップの 2 つのコピーを作成しました。画像をプリロードしないものと、一部の画像をプリロードするものです。このサイトでは JavaScript を使用して画像を遅延読み込みしているため、最初のビューポートに表示される画像をプリロードすると効果的です。
その結果、プリロードなしと画像プリロードで次の結果が得られました。
- [レンダリングを開始] は変更されていません。
- スピード インデックスが若干改善されました(273 ms。画像の到着が早くなったため、ピクセル領域の大部分を占有しなくなりました)。
- Last Painted Hero が 1.2 秒と大幅に改善されました。
プリロードと <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 の改善効果が大きくなります。