Incluir imagens e vídeo

Como qualquer página HTML, as AMP permitem incorporar imagens, vídeo e áudio content. Learn what's different about the AMP equivalents and learn how to include them in your pages.

Por que não <img>, <video> e <audio>?

As AMP não são compatíveis com os correspondentes padrão em HTML para exibir mídia, como <img>. Fornecemos componentes equivalentes pelos seguintes motivos:

• Precisamos entender o layout da página antes de carregar os recursos, algo crucial para oferecer suporte ao pré-carregamento da janela de visualização primária.
• Precisamos controlar as solicitações de rede para carregamento lento e priorizar os recursos de maneira efetiva.

Imagens

Inclua uma imagem na página usando o elemento amp-img como em:

<amp-img alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195">
</amp-img>

Neste exemplo mais básico, a imagem será exibida com a altura e largura fixas que foram especificadas. Ao menos uma altura e uma largura explícita precisam ser definidas.

Exibir imagens quando o JavaScript está desativado

Como <amp-img> se baseia no JavaScript, se o usuário escolher desativar os scripts, as imagens não serão exibidas. Nesse caso, forneça um fallback para a imagem usando <img> e <noscript> como em:

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

Layouts avançados

As AMP facilitam muito mais a criação de imagens responsivas do que o CSS/HTML padrão. Em sua forma mais básica, basta apenas adicionar 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>

Leia mais Saiba mais sobre técnicas de layout avançadas.

Comportamento e marcadores de posição

O tempo de execução das AMP em HTML pode gerenciar recursos de imagens de maneira eficiente, escolhendo atrasar ou priorizar o carregamento de recursos com base na posição da janela de visualização, nos recursos do sistema, na conexão de largura de banda ou em outros fatores.

Imagens animadas

O elemento amp-anim é muito similar ao elemento amp-img e fornece funcionalidades adicionais para gerenciar o carregamento e a reprodução de imagens animadas, como GIFs.

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

Vídeo

Inclua um vídeo na página usando o elemento amp-video.

Somente use esse elemento para incorporar diretamente arquivos de vídeo HTML5. O elemento carrega o recurso de vídeo especificado pelo atributo src com lazy loading, em um momento determinado pelas AMP.

Inclua um marcador de posição antes do começo do vídeo e um fallback, caso o navegador não seja compatível com vídeo HTML5, por exemplo:

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

Áudio

Inclua um recurso de áudio na página usando o elemento amp-audio.

Use esse elemento somente para incorporar diretamente arquivos de áudio HTML5. Como todos os recursos externos incorporados em AMP, o elemento carrega o recurso de áudio especificado pelo atributo src com lazy loading, em um momento determinado pelas AMP.

Inclua um marcador de posição antes do começo do áudio e um fallback, caso o navegador não seja compatível com áudio HTML5, por exemplo:

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

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch