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

  • 17
    Like
  • 1
    Comment
More than 1 year has passed since last update.

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

解決策1

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

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

解決策2

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

html
<amp-img src="sample.jpg" width="300" height="300"></amp-img>
css
amp-img img{
  width: auto;
  height: auto;
}

解決策3

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

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