Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


AMP-img: Cómo añadir imágenes en la versión AMP de tu web

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:

Sintaxis de la etiqueta AMP-img

Veamos la sintaxis extraída de su web oficial:

Os explico la sintaxis básica para añadir una imagen en AMP:

  • En el atributo src de la imagen se debe determinar la ruta y nombre de la imagen.
  • La altura y ancho de la imagen son de obligado rellenado en los atributos width y height.
  • En el atributo layout indicamos ‘responsive’ para que la imagen se adapte al ancho de la web (Responsive). No es obligatorio, si no se pone la imagen tendrá el tamaño indicado.
  • En el atributo alt podemos poner el texto alternativo, como por ejemplo, el título de la página o similar. Es la misma funcionalidad que el de el tag HTML <img>.

Otras opciones y atributos de la etiqueta AMP-img

Vamos a ver otras posibles configuraciones o atributos importantes disponibles:

  • Atributo srcset
  • Atributo fallback

Atributo srcset

Este atributo sirve para especificar diferentes imágenes para diferentes anchos de pantalla en píxeles, código de ejemplo:

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.

Atributo fallback

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:

En este otro código vemos el mensaje de texto:

Ejemplos de la etiqueta 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:

Os explico el código superior en el que metemos una simple imagen:

  • Usamos los atributos obligatorios src para determinar la ruta de la imagen, width y height para la altura y ancho.
  • Con el atributo layout=»responsive» determinamos que la imagen se adapta al ancho.
  • Con alt definimos un texto alternativo para la imagen.

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:

  • Usamos los atributos obligatorios src para determinar la ruta de la imagen, width y height para la altura y ancho de la imagen.
  • Con el atributo layout=»responsive» determinamos que la imagen se adapta al ancho.
  • En el atributo srcset determinamos la diferentes imágenes a mostrar cuando hay 550 pixels de ancho y otra con 700px.
  • Con alt definimos un texto alternativo para la imagen.

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:

  • Usamos los atributos obligatorios src para determinar la ruta de la imagen (Para que falle la imagen no existe), width y height para la altura y ancho de la imagen.
  • Metemos una nueva imagen de sustitución con el atributto fallback para que se muestre cuando no exista la imagen anterior.
  • Con alt definimos un texto alternativo para la imagen.

Os explico el código superior en el que metemos una imagen y si no existe metemos sacamos un mensaje con el atributto fallback:

  • Usamos los atributos obligatorios src para determinar la ruta de la imagen (Para que falle la imagen no existe), width y height para la altura y ancho de la imagen.
  • Con alt definimos un texto alternativo para la imagen.
  • Metemos un div con el atributto fallback para que se muestre un texto si la imagen no existe.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies