Entrega de imagens: AVIF e WebP com fallbacks, lazy loading e prioridade de busca

O que é

Três decisões no nível do <img> que independem do dimensionamento responsivo. Formato: o guia de formatos da MDN descreve AVIF e WebP como formatos que comprimem melhor que JPEG e PNG, observa que o suporte a eles é mais recente (WebP é amplo, mas não histórico; AVIF é mais restrito) e recomenda incluir um fallback em JPEG ou PNG por meio de <picture>. Em <picture>, cada <source type="image/avif"> é ignorado se o navegador não suportar esse tipo MIME, e o <img> final é ao mesmo tempo o fallback e o elemento que carrega alt, as dimensões e os atributos de carregamento. Carregamento: loading="lazy" adia a requisição até que a imagem esteja a uma distância da viewport definida pelo navegador; fetchpriority="high" ou "low" indica a posição da imagem em relação às demais; decoding="async" permite que a próxima pintura aconteça sem esperar o fim da decodificação.

Por que importa

As imagens costumam ser os bytes mais pesados de uma página e, com frequência, o elemento do largest contentful paint. Escolhas erradas aparecem diretamente nas Web Vitals: um hero com lazy loading atrasa o LCP, a falta de dimensões em imagens lazy causa mudança de layout, e servir JPEG a um navegador que aceita AVIF desperdiça banda a cada visualização.

Como aplicar

• Codifique cada imagem uma vez por formato, no build ou em um serviço de imagens, e mantenha o JPEG ou PNG como <img src>, para que crawlers, clientes antigos e a ação de copiar e colar obtenham um arquivo utilizável.
• Ordene os elementos <source> da melhor para a pior compressão; vence o primeiro tipo suportado.
• Em um servidor capaz de negociar, use o cabeçalho de requisição Accept e adicione Vary: Accept, para que os caches não entreguem AVIF a um navegador que não consegue renderizá-lo. Mantenha o <picture> para hospedagem estática.
• Nunca aplique lazy loading à imagem do LCP nem a qualquer imagem da primeira viewport; dê a essa imagem fetchpriority="high". Aplique lazy loading a imagens e iframes abaixo da dobra.
• Defina width e height (ou aspect-ratio) em toda imagem lazy. A MDN alerta que imagens ainda não carregadas têm tamanho 0 e podem nunca ser carregadas se não intersectarem uma área visível.
• Mantenha o alt no <img>; elementos <source> não acrescentam nome acessível.

Armadilhas

Espalhar loading="lazy" por todas as imagens, inclusive as da primeira viewport, gera uma cascata de requisições tardias. A distância do lazy loading é definida pelo navegador e muda entre versões; não ajuste o layout com base nela. fetchpriority é uma sugestão, não uma ordem. Um <picture> cujo <img> não tem srcset continua servindo um único tamanho para todas as telas; combine com o artigo sobre imagens responsivas.