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:

Imagens

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

Show full code

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:

Show full code

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

Show full code

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.

Show full code

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:

Show full code

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

Show full code