レスポンシブ画像のマークアップは、可能な限り最も効率的な画像の使用を目標とする場合と、ブラウザが選択する画像ソースを明示的に制御する必要がある場合の 2 つのシナリオに分けられます。これらはそれぞれ記述的な構文と、規範的な構文と考えることができます。
このモジュールでは、両方のアプローチについて学びます。まず、srcset と sizes について解説し、ブラウザがユーザー、デバイス、閲覧状況について把握している情報に基づいて最適な選択を行えるようにする方法について説明します。次に、<picture> 要素を使用します。この要素では、ビューポートのサイズや画像形式のブラウザ サポートなどの要素に基づいてソースの選択を明示的に制御できます。
記述構文
説明的な構文は、画像ソースとその使用方法に関する情報をブラウザに提供しますが、最終的に決定するのはブラウザに委ねられます。これは、ごく一般的なシナリオです。大部分の画像で、ブラウザの動作を細かく制御する必要はありません。ブラウザはウェブ デベロッパーよりもはるかに多くの情報を自由に利用でき、その情報に基づいて複雑な意思決定を行うことができます。ユーザーのブラウジング コンテキストを正確に予測することはできません。ユーザーのハードウェア、設定、接続速度が多すぎて把握できないからです。最善であれば、知識に基づいて推測することはできても、各ユーザーがウェブをどのように利用しているかを確実に把握することはできません。デベロッパーの観点からは、レスポンシブ画像の中心的なユースケースは、ブラウザが手元にある情報に基づいて、可能な限り効率的な画像リクエストを行えるようにする、という目標指向です。
ブラウザでこれらの選択を行えるよう、srcset を使用すると、1 つの <img> に値を入力する可能性のあるソースのリストをブラウザに提供できます。sizes を使用すると、<img> のレンダリング方法に関する情報をブラウザに提供できます。これらの使用方法については、次のモジュールで学習します。
規範的な構文
規定の構文を使用することで、定義した特定の条件に基づいて、実行する処理、つまり選択するソースをブラウザに伝えることができます。このユースケースは、「この画像をレンダリングするために最も効率的なアセットを読み込む」ほど一般的ではありませんが、ソースのコンテンツまたはその形式など、アセットを転送する前には持っていない情報を考慮するためにブラウザに使用方法を提示できます。
srcset と sizes は、ユーザーのブラウザに情報を渡し、画像ソースについて判断できるようにするための構文を提供しますが、場合によっては、どのソースファイルをいつ表示するかを明示的に制御する必要があります。たとえば、レイアウト ブレークポイント間で異なるデザイン処理に基づいて、同じ画像コンテンツのバージョンを異なるアスペクト比で表示したり、特定のエンコードをサポートしているブラウザのみが特定のソースを受け取るようにしたりできます。
このような場合、どのソースをいつ表示するかを明示的に制御する必要があります。これは、設計上、srcset と sizes では保証できない保証です。このコントロールを取得するには、<picture> 要素を使用する必要があります。