Google AMP-画像

Google AMPページで使用される画像は、標準のhtmlページで使用される方法と似ていますが、タグ名がいくつかの追加プロパティとともに使用される方法が異なるだけです。この章では、これらについて詳しく説明します。

以下に示す構文を確認してください-

標準HTML

<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>

AMPページで

<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>

*img* のタグが *amp-img* に変更されていることに注意してください。

imgの代わりにamp-imgを使用する理由

imgをamp-imgに変更する理由は、ページレイアウトと、イメージをロードするために行われるネットワーク要求をより詳細に制御するためです。 Ampは、画像リソースに遅延読み込みを追加し、ページで利用可能な他のリソースごとに読み込みを優先します。

例

より良い理解のために次のコードを観察します-

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = "http://example.ampproject.org/articlemetadatal">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initialscale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            - amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
         amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none
            }
         </style>
      </noscript>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

AMP Img

以下に示すように、_amp-img_タグにプロパティlayout =” responsive”を追加して、画像をレスポンシブにすることもできます。

例