Google AMP - Bilder

Auf der Google AMP-Seite verwendete Bilder ähneln der Verwendung auf einer Standard-HTML-Seite. Der einzige Unterschied besteht jedoch in der Art und Weise, wie der Tag-Name mit einigen zusätzlichen Eigenschaften verwendet wird. In diesem Kapitel werden diese ausführlich erläutert.

Beachten Sie die unten gezeigten Syntaxen -

Standard HTML

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

In der AMP-Seite

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

Beachten Sie, dass das Tag von img wird geändert in amp-img.

Warum Amp-Img anstelle von Img verwenden?

Der Grund für die Änderung von img zu amp-img besteht darin, das Seitenlayout und die Netzwerkanforderung zum Laden des Bildes besser steuern zu können. Amp fügt der Bildressource ein verzögertes Laden hinzu und priorisiert das Laden gemäß den anderen auf der Seite verfügbaren Ressourcen.

Beispiel

Beachten Sie zum besseren Verständnis den folgenden Code:

<!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>

Ausgabe

Wenn Sie den oben gezeigten Code ausgeführt haben, finden Sie das Ergebnis wie unten gezeigt -

Sie können das Bild auch reaktionsfähig machen, indem Sie dem amp-img- Tag wie unten gezeigt das Eigenschaftslayout = "reaktionsschnell" hinzufügen

Beispiel

Beachten Sie zum besseren Verständnis den folgenden Code:

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

Ausgabe

Wenn Sie den oben gezeigten Code ausgeführt haben, finden Sie das Ergebnis wie unten gezeigt -