Edited at

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

More than 3 years have 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などとも組み合わせてうまくやりましょう。