srcset、sizes、heights を使ったレスポンシブ画像
srcset
srcset 属性を使用すると、さまざまなメディア式に基づいて要素のアセットを制御できます。特に、すべての amp-img タグで使用して、さまざまな画面サイズに基づいて画像アセットを指定できます。AMP は、<amp-img> に srcset 属性が指定されていても sizes が存在しない場合、基礎となるすべての <amp-img> の <img> タグに対し、sizes の HTML5 定義を満たすsizes 属性を自動生成します。
次の例では、srcset が画面の幅に基づいて使用される画像を指定しています。w 記述子は、リスト内の各画像の幅をブラウザに伝えます。
<amp-img
alt="Hummingbird"
src="/static/inline-examples/images/hummingbird-wide.jpg"
width="640"
height="457"
layout="responsive"
srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
/static/inline-examples/images/hummingbird-narrow.jpg 320w"
>
</amp-img>
w 記述子を使用できます。 srcset を使ってレスポンシブ画像を作成する方法については、レスポンシブ画像の使用をご覧ください。
sizes
srcset と一緒にオプションの AMP sizes 属性も使用できます。AMP sizes 属性では、メディア式に基づいた要素のサイズの計算方法を指定します。任意の AMP 要素に sizes を定義すると、一致するメディアクエリに従って、その要素に幅のインラインスタイルが設定されます。ユーザーエージェントは、計算された要素のサイズに基づいて、srcset 属性で指定されたソースのうち最も関連するソースを選択します。
次の例をご覧ください。
<amp-img
alt="Hummingbird"
src="/static/inline-examples/images/hummingbird-wide.jpg"
width="640"
height="457"
srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
/static/inline-examples/images/hummingbird-narrow.jpg 320w"
sizes="(min-width: 650px) 50vw, 100vw"
>
</amp-img>
この sizes 属性では、ビューポートが 650 ピクセル以上の場合は、要素の幅をビューポートのサイズの 50% にすると定義しています。たとえば、ビューポートが 800 ピクセルの場合、要素の幅は 400 ピクセルに設定されます。ブラウザでは、デバイスピクセル比を 1 と想定し、400 ピクセルと比較して srcset のリソースを選択します。この例では hummingbird-narrow.jpg（320 ピクセル）が選択されます。
responsive に設定されます。 AMP sizes 属性については、こちらをお読みください。
heights
responsive レイアウトを使用できる AMP カスタム要素はすべて、heights 属性にも対応しています。この属性の値は、img サイズ属性 と同様、メディア式に基づくサイズ式ですが、大きく異なる点が 2 つあります。
- 適用されるのは、要素の幅ではなく高さです。
86%などのパーセント値を使用できます。パーセント値を使用する場合、その値は要素の幅に対する比率を示します。
heights 属性とともに width と height も指定されている場合、layout はデフォルトで responsive に設定されます。
次の例をご覧ください。
<amp-img
alt="AMP"
src="/static/inline-examples/images/amp.jpg"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"
>
</amp-img>
この例では、要素の高さはデフォルトで幅の 80% ですが、ビューポートが 500px より広い場合、200px が上限となります。