srcset

srcset 属性を使用すると、さまざまなメディア式に基づいて要素のアセットを制御できます。特に、すべての amp-img タグで使用して、さまざまな画面サイズに基づいて画像アセットを指定できます。

次の例では、srcset が画面の幅に基づいて使用される画像を指定しています。w 記述子は、リスト内の各画像の幅をブラウザに伝えます。

Show full code

srcset を使ってレスポンシブな画像を作成する方法について詳しくは、レスポンシブな画像の使用に関する記事 をご覧ください。

sizes

srcset と一緒に sizes 属性も使用できます。sizes 属性では、メディア式に基づいた要素のサイズの計算方法を指定します。ユーザー エージェントは、計算された要素のサイズに基づいて、srcset 属性で指定されたソースのうち最も関連するソースを選択します。

次の例をご覧ください。

Show full code

この sizes 属性では、ビューポートが 650 ピクセル以上の場合は、要素の幅をビューポートのサイズの 50% にすると定義しています。たとえば、ビューポートが 800 ピクセルの場合、要素の幅は 400 ピクセルに設定されます。ブラウザでは、デバイス ピクセル比を 1 と想定し、400 ピクセルと比較して srcset のリソースを選択します。この例では narrow.jpg(320 ピクセル)が選択されます。

sizes および srcset 属性とメディアクエリの比較について詳しくは、srcset と sizes に関するブログ投稿をご覧ください。

heights

responsive レイアウトを使用できる AMP カスタム要素はすべて、heights 属性にも対応しています。この属性の値は、img サイズ属性 と同様、メディア式に基づくサイズ式ですが、大きく異なる点が 2 つあります。

  1. 適用されるのは、要素の幅ではなく高さです。
  2. 86% などのパーセント値を使用できます。パーセント値を使用する場合、その値は要素の幅に対する比率を示します。

heights 属性とともに widthheight も指定されている場合、layout はデフォルトで responsive に設定されます。

次の例をご覧ください。

Show full code

この例では、要素の高さはデフォルトで幅の 80% ですが、ビューポートが 500px より広い場合、200px が上限となります。