AMP

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:

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

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>
Abrir este fragmento en Playground

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>
Abrir este fragmento en 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 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>
Abrir este fragmento en Playground

MÁS INFORMACIÓN: Obtenga 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 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>
Abrir este fragmento en Playground

NOTA: Incluya<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>
Abrir este fragmento en Playground

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>
Abrir este fragmento en Playground

NOTA: Incluya<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.