Adición de imágenes y videos
Al igual que las páginas HTML normales, las páginas AMP le permiten insertar contenidos de imágenes, videos y audios. Descubra cómo incluir las versiones AMP equivalentes en sus 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:
- Es esencial conocer el diseño de la página antes de que se carguen los recursos para admitir las ventanas gráficas iniciales precargadas.
- Debemos controlar las solicitudes de red para realizar cargas diferidas y priorizar los recursos de un modo efectivo.
Imágenes
Para incluir una imagen en su página, utilice el elemento amp-img, tal como se muestra a continuación:
<amp-img
alt="A beautiful sunset"
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
>
</amp-img>
En este ejemplo muy básico, la imagen se mostrará con la altura y el ancho fijos especificados. Hay que especificar al menos unos valores determinados de ancho y alto.
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, debe proporcionar una alternativa a la imagen usando <img> y <noscript>, como se muestra a continuación:
<amp-img
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
>
<noscript>
<img
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
/>
</noscript>
</amp-img>
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 debe añadir layout="responsive":
<amp-img
alt="A view of the sea"
src="/static/inline-examples/images/sea.jpg"
width="900"
height="675"
layout="responsive"
>
</amp-img>
Comportamiento y marcadores de posición
El tiempo de ejecución de HTML en AMP permite administrar los recursos de imagen de una forma muy eficaz porque puede elegir si retrasar o priorizar la carga de recursos según 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 administrar la carga y la reproducción de imágenes animadas, como los archivos GIF.
<amp-anim
width="400"
height="300"
src="/static/inline-examples/images/wavepool.gif"
>
<amp-img
placeholder
width="400"
height="300"
src="/static/inline-examples/images/wavepool.png"
>
</amp-img>
</amp-anim>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> en el encabezado de la página para usar este componente. Video
Para incluir un video en su página, utilice el elemento amp-video .
Úselo 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.
Incluya un marcador de posición antes del inicio del video y una alternativa, si el navegador no admite videos en HTML5, por ejemplo:
This browser does not support the video element.
<amp-video controls
width="640"
height="360"
src="/static/inline-examples/videos/kitten-playing.mp4"
poster="/static/inline-examples/images/kitten-playing.png">
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
Audio
Para incluir un recurso de audio en su página, utilice el elemento amp-audio .
Úselo 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.
Include a fallback, if the browser doesn't support HTML5 audio, for example:
Your browser doesn’t support HTML5 audio.
<amp-audio width="400"
height="200"
src="/static/inline-examples/audio/cat-meow.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio.</p>
</div>
<source type="audio/mpeg"
src="/static/inline-examples/audio/cat-meow.mp3">
<source type="audio/ogg"
src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> en el encabezado de la página para usar este componente.