Google AMP - Images

Les images utilisées dans la page Google AMP sont similaires à la façon dont elles sont utilisées dans une page HTML standard, mais la seule différence est la façon dont le nom de la balise est utilisé avec certaines propriétés supplémentaires. Ce chapitre en traite en détail.

Observez les syntaxes ci-dessous -

HTML standard

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

Dans la page AMP

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

Notez que la balise de img est changé en amp-img.

Pourquoi utiliser amp-img au lieu d'img?

La raison de changer img en amp-img est d'avoir plus de contrôle sur la mise en page et la demande réseau faite pour charger l'image. Amp ajoute un chargement différé à la ressource image et donne la priorité au chargement selon les autres ressources disponibles sur la page.

Exemple

Observez le code suivant pour une meilleure compréhension -

<!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/articlemetadata.html">
      <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>

Production

Lorsque vous avez exécuté le code ci-dessus, vous trouverez le résultat comme indiqué ci-dessous -

Vous pouvez également rendre l'image responsive en ajoutant la propriété layout = "responsive" à la balise amp-img comme indiqué ci-dessous

Exemple

Observez le code suivant pour une meilleure compréhension -

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
   width = "246"
   height = "205"
   layout = "responsive">
</amp-img>

Production

Lorsque vous avez exécuté le code ci-dessus, vous trouverez le résultat comme indiqué ci-dessous -