<amp-img layout="responsive"> の width 属性値は反映されないことに注意

AMP(Accelerated Mobile Pages)ページで画像を表示するには<amp-img>タグを使用します。デフォルトでは指定したwidth/heightの固定表示ですが、layout属性にresponsiveを設定すると、画面幅に応じて自動的に伸縮表示できます。

とても便利ですが、layout="responsive"を指定した際のwidth/height属性値の扱われ方を正しく理解していないと、意図せず画像が引き伸ばされてしまうことがあります。

たとえば、以下のようなコードはどちらも画面（正確には親要素）いっぱいの横幅で表示されます。下のコードの画像は横幅2pxで表示されるわけではないことに注意しましょう。

<amp-img src="xxxxx.png"
         width="1200"
         height="600"
         layout="responsive">
</amp-img>

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

なぜ？？

<amp-img>タグのlayout属性を指定しない場合、画像は width/height のサイズ通りに表示されます。しかし、layout="responsive" を指定すると、width/height はアスペクト比（縦横比）の算出にしか使われず、表示サイズは親要素の横幅により決定されます。つまり、縦横比を保ちながら親要素の横幅いっぱいに表示されます。

一定以上の横幅に引き伸ばされたくない場合はCSSでmax-widthを指定する、といった対処が必要になります。

実例

実際のAMPページでサンプルを見るのがわかりやすいと思います。サンプルは　AMPでレスポンシブ・レイアウト指定した画像のwidthは反映されないことに注意 を参照ください。

地味にハマることがあるかもしれないので、参考になれば幸いです。