Crane & to.

レスポンシブ・レイアウト画像のwidthが反映されない

<amp-img>タグに layout="responsive" を指定すると意図しない表示になることがあります。AMP特有の layout="responsive" を正しく使うには width, height の理解が必須となります。順を追ってみていきましょう。

画像表示の基本

AMP(Accelerated Mobile Pages)ページで画像を表示するには、<amp-img>タグを使用します。HTML5でお馴染みの<img>タグはAMPページでは使用できないことに注意しましょう。

<img>タグと同様に src, width, height を指定するのがAMPページで画像表示するときの基本です。

<amp-img src="/cms/wp-content/uploads/2016/10/D15A0407-248x190.jpg"
         width="248"
         height="190">
</amp-img>

この基本形では width, height を必ず指定しなければなりません。指定しないとバリデーション・エラーになることに注意しましょう。

AMP独自のレスポンシブ・レイアウト

基本形だとwidth, heightの値(pxサイズ)の通りに表示されるため、widthが大きいと画像が画面からはみ出てしまいます(はみ出るサンプル)。

<amp-img>タグにはlayoutという文字通りレイアウトに関する属性があり、layout="responsive" を指定するだけと、アスペクト比(縦横比)を保ちながら画面幅に応じて自動的に伸縮表示されます。

<amp-img src="/cms/wp-content/uploads/2016/10/D15A0407.jpg"
         width="640"
         height="427"
         layout="responsive">
</amp-img>

responsiveレイアウトの注意点

Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.(中略)Available space depends on the parent element and can also be customized using max-width CSS.
出典: ampproject.org

layout="responsive" を指定した場合は width, height 属性が必須となりますが、上記公式ドキュメントのように伸縮にはアスペクト比(縦横比)が使われます。

width, height 属性値に指定したサイズ(px)でレンダリングされるわけでないことに注意しましょう。下のように予期せぬ表示結果に悩まされることになります。

サンプル1

実際の画像サイズは 1200 x 600 px の画像ですが、下のように width="1200" height="600" とした場合でも width="2" height="1" とした場合でも表示結果は全く同じものとなります。width, height はアスペクト比の算出に使われるだけなので、最大幅を指定したい場合には CSS で max-width を指定しましょう。

<amp-img src="/img/examples/amp/sample_1200x600.png"
         alt="amp-img responsive layout sample"
         width="1200"
         height="600"
         layout="responsive">
</amp-img>

 

<amp-img src="/img/examples/amp/sample_1200x600.png"
         width="2"
         height="1"
         layout="responsive">
</amp-img>

サンプル2

サイズの小さい画像に layout="responsive" を指定すると、親要素の表示領域まで引き伸ばされてしまうことに注意しましょう。

<amp-img src="/cms/wp-content/uploads/2016/10/D15A0407-120x120.jpg"
         width="120"
         height="120"
         layout="responsive">
</amp-img>

一定幅以上に引き伸ばされたくない場合には、CSSでmax-widthを指定しましょう。アイコンやサムネイルのように小さい画像とわかっている場合には layout 属性を指定しない基本形にするのが確実です。※layout属性値を省略した場合(layout属性のデフォルトは)、layout="fixed" となります。

まとめ と あとがき

<amp-img>タグに layout="responsive" を指定した場合、width, height はアスペクト比(縦横比)の算出に使われるだけで、そのサイズで表示されないことに注意しましょう。

このページでは1つの画像ソースの場合のみですが、<amp-img>は srcset属性によるレスポンシブイメージにも対応しています。<amp-img>の公式ドキュメントに目を通してみると理解が深まると思います。