Como trabalhar com imagens no AMP

Quando trabalhamos com imagens no AMP, temos restrição na utilização de algumas tags HTML e a tag img se encontra nessa lista. A principal razão é que imagens são responsáveis pela maior parcela no tamanho total de uma aplicação.

Por isso o framework tem um cuidado especial no carregamento de imagens para isso utilizamos o componente amp-img, responsável por série de melhorias na nossa aplicação, por exemplo, lazy-loading e compressão.

Como AMP funciona?

Os componentes AMP utilizam web components um conjunto de 4 APIs web nativa que permitem a criação de blocos reutilizáveis. A plataforma possui uma série de componentes que agilizam o processo de criação da nossa aplicação. Os componentes priorizam acessibilidade e performance, caso queira conferir a lista completa só acessar a página de catálogo de componentes, mas para esse tutorial vamos especificamente utilizaremos <amp-img>.

Trabalhando com imagens no AMP

Existe uma proposta para AMP utilizar a tag img tradicional, após anos da criação de AMP a tag img possui novas funcionalidades que podem ajudar a otimizar a desempenho de carregamento para imagem. Mas enquanto isso não acontece ainda é necessário a utilização do componente amp-img.

O componente irá cuidar do carregamento das imagens e da estabilidade do layout por isso algumas propriedades são requeridas para o uso desse componente. Com a introdução do core web vitals novas funcionalidades foram incluídas no componente para ajudar do carregamento de imagens no AMP relacionadas ao LCP esse item falaremos a seguir.

amp-img

Parece um componente simples, mas tem uma série de melhorias de performance com lazy-load, resize e compressão de imagens. Para a redimensionamento de imagem acontecer precisamos sempre especificar a altura e a largura das imagens. O componente espera os seguintes parâmetros:

• alt – texto alternativo assim como tag img precisa para produzir um conteúdo mais acessível.
• width e height – necessário para definir as dimensões da nossa imagem
• src – assim uma tag img define o endereço da nossa imagem
• layout – estilo de layout que a imagem terá, AMP possui os seguintes formatos: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Assim que sabemos como utilizar amp-img no nosso componente ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" 
    alt="About Caipirinha"
    width="700" 
    height="526" 
    layout="responsive">
</amp-img>Code language: HTML, XML (xml)

Fallback

WebP formato 25% a 30% menor que os formatos tradicionais, mas surgiu recentemente e é atualmente suportado por 91% dos browsers(jun 2022), como podemos observar na imagem abaixo:

Caso queiramos utilizar Webp sem penalizar os usuários dos browsers antigos podemos adicionar um fallback no nosso amp-img sinalizado pela propriedade fallback. e a utilização ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" alt="Sobre Caipirinha"
          width="700" height="526" layout="responsive">
            <amp-img alt="Sobre Caipirinha"
            fallback
            width="700"
            height="526"
            layout="responsive"
            src="./assets/images/caipirinha.jpeg"></amp-img>
        </amp-img>Code language: HTML, XML (xml)

Como podemos ver acima isso mesmo o componente de fallback fica dentro do nosso componente principal assim o AMP ficará responsável de verificar se o browser do usuário possui suporte ou não para o formato webp e carregar apenas uma imagem.

Otimizando o carregamento de imagens no AMP relacionadas ao LCP

AMP é essencial para melhorar a velocidade de carregamento das páginas. Mas, você sabia que também pode ser usado para otimizar imagens no AMP? O Otimizador de AMP pode reduzir significativamente o tempo necessário para renderizar imagens na primeira janela de visualização.

Isso é crítico ao otimizar os tempos de LCP para atender aos Core Web Vitals. Com ele, você pode economizar tempo e garantir uma melhor user experience para seus visitantes.

Para garantir a prioridade de carregamento de imagens relacionadas ao LCP o framework AMP criou uma propriedade para ser incluído no componente de imagens no AMP, as imagens hero podem ser declaradas explicitamente anotando um amp-img com o atributo data-hero:

<amp-img data-hero src="/hero.jpg" layout="responsive" width="640" height="480" alt="..."></amp-img>Code language: HTML, XML (xml)

Atenção, os Otimizadores de AMP são compatíveis com no máximo duas imagens principais numa página para evitar o bloqueio de largura de banda para outros recursos críticos. Se esse limite não funcionar para você, informe-nos.

Os Otimizadores de AMP também detectarão automaticamente imagens principais para elementos amp-img, amp-iframe, amp-video ou amp-video-iframe e injetarão o link rel=preload para o src da imagem.

A análise automática funciona analisando a marcação HTML e os layouts de imagem para detectar imagens no AMP de grandes dimensões na primeira janela de visualização.

Esse post faz parte do conteúdo auxiliar do curso de AMP. Mais posts sobre AMP você confere aqui. Exercícios e exemplos você irá encontrar no meu github. Próximo post iremos falar mais sobre componentes AMP, caso tenha alguma dúvida deixe um comentário.