読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

amp-img | AMPで画像を表示する - AMPのHTMLタグについて

f:id:mochizuki_p:20170107174707p:plain

AMPでは直接imgタグを使用することはできません。

これはダメ

<img src="https://hoge.com/image.png"/>

代わりにamp-imgタグを利用します。

OK

<amp-img src="https://hoge.com/image.png" width="320" height="320">
</amp-img>

注意すべき点は2つ

  • は閉じるためのタグは不要で単独で利用するが、<amp-img>は</amp-img>で閉じる必要がある。
  • amp-imgでは必ず画像の幅と高さを指定する必要がある。

amp-imgは/で閉じる必要がある

もちろん、HTMLでのimgタグは以下のように1つのタグで十分でしたよね?

<img src="https://hoge.com/fuga.png"/>

amp-imgではdivやpと同じように閉じるタグが必要です。

<amp-img src="https://hoge.com/fuga.png" width="320" height="320"></amp-img>

ほかに注意すべき点は、

  • 幅と高さの単位はピクセル(px)
  • 幅・高さの両方を指定する必要があるという点です。

これは、画像のロードと表示にともなうレイアウトの変更によるレンダリング時間の削減を目指したものです。

通常のHTMLファイルをサーバーから取得した時点では画像のサイズはわかりませんので、一回HTMLファイルをパースしてそこから画像ファイルを別にロードします。そして画像ファイルを読み込んだ時点で初めて画像のサイズは判明するわけですが、その時点ではほかの文章などの配置は完了していて、その中から再びページのレイアウトを計算する必要があるわけです。

この追加の計算コストを削減するのがamp-imgの目的なんですね。

レイアウト

ampでのメディアファイルの配置の指定はlayoutを利用するとよいでしょう。

推奨はresponsiveです。

詳しくは別記します。

www.utali.io