Al igual que las páginas HTML normales, las páginas AMP te permiten insertar imágenes ,videos y audios Contenido. Descubre cómo incluir las versiones AMP equivalentes en tus páginas y qué diferencias existen entre ellas.

¿Por qué no puedo utilizar <img> , <video> y <audio>?

AMP no admite los equivalentes predeterminados de HTML para mostrar contenido multimedia, como <img>. Proporcionamos componentes equivalentes por los siguientes motivos:

Imágenes

Para incluir una imagen en tu página, utiliza el elemento amp-img, como se muestra a continuación:

Show full code

En este ejemplo muy básico, la imagen se mostrará con la altura y anchura fijas especificadas. Hay que especificar, como mínimo, unos valores determinados de anchura y altura.

Mostrar imágenes cuando JavaScript está inhabilitado

Como <amp-img> depende de JavaScript, si el usuario elige inhabilitar las secuencias de comandos, no se mostrarán las imágenes. En este caso, debes proporcionar una alternativa a la imagen usando <img> y <noscript>, como se muestra a continuación:

Show full code

Diseños avanzados

Crear imágenes totalmente adaptables es mucho más fácil con AMP que con páginas en CSS/HTML estándar. En su forma más básica, solo tienes que añadir layout="responsive":

Show full code

Comportamiento y marcadores de posición

El tiempo de ejecución de HTML en AMP permite gestionar recursos de imagen de una forma muy eficaz porque puedes elegir si retrasar o priorizar la carga de recursos en función de la posición de la ventana gráfica, los recursos del sistema, el ancho de banda de la conexión y otros factores.

Imágenes animadas

El elemento amp-anim es muy parecido al elemento amp-img y ofrece una función diferente a la hora de gestionar la carga y la reproducción de archivos GIF y de otros tipos de imágenes animadas.

Show full code

Video

Para incluir un video en tu página, utiliza el elemento amp-video .

Úsalo solamente para insertar archivos de video HTML5 directos. Este elemento carga el recurso de video que determina el atributo src de manera diferida cuando lo determine la página AMP.

Incluye un marcador de posición antes del inicio del video y una alternativa, si el navegador no admite videos en HTML5, por ejemplo:

Show full code

Audio

Para incluir un recurso de audio en tu página, utiliza el elemento amp-audio .

Úsalo solo para insertar directamente archivos de audio HTML5. Igual que sucede con todos los recursos externos que se insertan en una página AMP, el elemento carga el recurso de audio especificado por el atributo src de manera diferida cuando lo determine la página AMP.

Incluye un marcador de posición antes del inicio del audio y una alternativa, si el navegador no admite audios en HTML5, por ejemplo:

Show full code