Google-amp-images
提供:Dev Guides
Google AMP-画像
Google AMPページで使用される画像は、標準のhtmlページで使用される方法と似ていますが、タグ名がいくつかの追加プロパティとともに使用される方法が異なるだけです。 この章では、これらについて詳しく説明します。
以下に示す構文を確認してください-
標準HTML
AMPページで
imgの代わりにamp-imgを使用する理由
imgをamp-imgに変更する理由は、ページレイアウトと、イメージをロードするために行われるネットワーク要求をより詳細に制御するためです。 Ampは、画像リソースに遅延読み込みを追加し、ページで利用可能な他のリソースごとに読み込みを優先します。
例
より良い理解のために次のコードを観察します-
出力
上記のコードを実行すると、次のように結果が表示されます-
以下に示すように、_amp-img_タグにプロパティlayout =” responsive”を追加して、画像をレスポンシブにすることもできます。
例
より良い理解のために次のコードを観察します-
出力
上記のコードを実行すると、次のように結果が表示されます-