AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Incluir imágenes y videos

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:

Aunque no se admitan, se renderizarán, pero AMP no validará tus páginas y no podrás aprovechar todas las ventajas que aporta AMP.

Imágenes

Para incluir una imagen en tu página, utiliza el elemento amp-img, 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>
Open this snippet in playground

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:

<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>
Open this snippet in playground

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":

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>
Open this snippet in playground

Consulta más información sobre las técnicas de diseño avanzadas.

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.

<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>
Open this snippet in playground

Incluye<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 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:

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>
Open this snippet in playground

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:

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>
Open this snippet in playground

Incluye<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.