More than 5 years have passed since last update.

サイズのわからない画像のAMP対応

Last updated at 2016-04-12Posted at 2016-04-12

AMP⚡️(Accelerated Mobile Pages)に対応したサービス増えてきました。
AMPのページではできることが少ないので、対応は簡単です。（元の仕様を削るのが大変）

AMPで画像を表示するには<amp-img>タグを使う必要があります。

例えばこんな感じ

<amp-img src="sample.jpg" width="300" height="300"></amp-img>

しかし、
ソーシャルAPIから引っ張ってきた画像、そもそも画像サイズを保存していないなど、画像サイズがわからないとき
width、heightを省略してみると

<amp-img src="sample.jpg"></amp-img>

AMPはエラーに・・・
アスペクト比が固定の画像であれば適当でも良いですが、そうでない場合画像が歪みます。

解決策１

layout="fixed-height"を使い高さのみ固定にして、幅はレスポンシブに任せる
詳しい使い方はLayoutへ

<amp-img src="sample.jpg" layout="fixed-height" height="300"></amp-img>

とりあえず数値は入れておき、CSSで元の形に戻す

html

<amp-img src="sample.jpg" width="300" height="300"></amp-img>

css

amp-img img{
  width: auto;
  height: auto;
}

サーバーサイドで計算する。

とりあえずこれで歪まなくなります。
解決策１も解決策２も高さが固定されるので、画像によってはマージンが空いたりします。CSSやsizesなどとも組み合わせてうまくやりましょう。