Sencillo post para ver la etiqueta AMP-img que sirve para añadir imágenes en la versión AMP de tu página web.
Otros post interesantes:
Veamos la sintaxis extraída de su web oficial:
<amp-img src="/ruta-imagen/nombre-imagen.jpg" width="ancho" height="alto" layout="responsive" alt="texto alternativo"> </amp-img>
Os explico la sintaxis básica para añadir una imagen en AMP:
Vamos a ver otras posibles configuraciones o atributos importantes disponibles:
Este atributo sirve para especificar diferentes imágenes para diferentes anchos de pantalla en píxeles, código de ejemplo:
<amp-img src="/ruta-imagen/nombre-imagen.jpg" srcset="/ruta-imagen/nombre-imagen-ANCHO2.jpg ANCHO2w, /ruta-imagen/nombre-imagen-ANCHO3.jpg ANCHO3w" width="ancho" height="alto" layout="responsive" alt="texto alternativo"> </amp-img>
Tal y como veis hay que definir las imágenes que queramos separadas por una coma, estas imágenes seguidas del ancho definirán cuando se usarán dependiendo el ancho de pantalla.
El atributo fallback sirve para sustituir una imagen cuando esta no carga o da error (imagen por defecto o similar) y también cuando en vez de mostrar dicha imagen queremos sacar un mensaje de texto.
Os muestro el código de ejemplo de sustitución:
<amp-img src="ruta-imagen/nombre-imagen.jpg" width="ancho" height="alto" alt="texto alternativo"> <amp-img fallback src="ruta-imagen/nombre-imagen-sustitucion.jpg" alt="texto alternativo" width="ancho" height="alto"> </amp-img> </amp-img>
En este otro código vemos el mensaje de texto:
<amp-img src="ruta-imagen/nombre-imagen.jpg" width="ancho" height="alto" alt="texto alternativo"> <div fallback>Imagen no disponible</div> </amp-img>
Antes del ejemplo os recuerdo:
Vayamos con este sencillo ejemplo de imágenes en AMP para poner en práctica lo anteriormente visto:
<h1>Mi primera imagen AMP responsive</h1> <amp-img src="amp-img-responsive.jpg" width="400" height="272" layout="responsive" alt="Mi primera imagen AMP responsive"> </amp-img>
Os explico el código superior en el que metemos una simple imagen:
<h1>Imagen AMP con atributo srcset</h1> <amp-img src="amp-img-responsive.jpg" width="400" height="272" layout="responsive" srcset="amp-img-responsive-2.jpg 550w, amp-img-responsive-3.jpg 700w" alt="Imagen AMP con atributo srcset"> </amp-img>
Os explico el código anterior en el que metemos una imagen y otras 2 dependiendo el ancho de la web con el atributo srcset:
<h1>Imagen AMP con imagen fallback</h1> <amp-img src="imagen-que-no-existe.jpg" width="400" height="272" alt="No existo"> <amp-img fallback src="amp-img-sustitucion.jpg" alt="Imagen de sustitución" width="400" height="272"> </amp-img> </amp-img>
Os explico el código superior en el que metemos una imagen y si no existe metemos la de sustitución con el atributto fallback:
<h1>Imagen AMP con imagen fallback</h1> <amp-img src="imagen-que-no-existe.jpg" width="400" height="272" alt="No existo"> <div fallback>Imagen no disponible</div> </amp-img>
Os explico el código superior en el que metemos una imagen y si no existe metemos sacamos un mensaje con el atributto fallback: