Google AMP: imágenes

Las imágenes utilizadas en la página de Google AMP son similares a cómo se utilizan en una página html estándar, pero la única diferencia es la forma en que se utiliza el nombre de la etiqueta con algunas propiedades adicionales. Este capítulo los analiza en detalle.

Observe las sintaxis que se muestran a continuación:

HTML estándar

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

En la página AMP

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

Tenga en cuenta que la etiqueta de img se cambia a amp-img.

¿Por qué utilizar amp-img en lugar de img?

La razón detrás de cambiar img a amp-img es tener más control sobre el diseño de la página y la solicitud de red realizada para cargar la imagen. Amp agrega carga diferida al recurso de imagen y prioriza la carga según otros recursos disponibles en la página.

Ejemplo

Observe el siguiente código para una mejor comprensión:

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

Salida

Cuando ejecutó el código que se muestra arriba, encontrará el resultado como se muestra a continuación:

También puede hacer que la imagen responda agregando la propiedad layout = "responsive" a la etiqueta amp-img como se muestra a continuación

Ejemplo

Observe el siguiente código para una mejor comprensión:

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

Salida

Cuando ejecutó el código que se muestra arriba, encontrará el resultado como se muestra a continuación:

↰ Previous page Next page ↱