Imagem responsiva
Uma implementação de imagem que entrega tamanhos ou formatos diferentes conforme o dispositivo, o tamanho da tela e a velocidade de conexão do visitante.
Imagens responsivas impedem que usuários móveis baixem imagens em tamanho de desktop, o que desperdiça largura de banda e deixa a página mais lenta. O HTML oferece o atributo srcset para troca de resolução e o elemento picture para direção de arte, permitindo servir cortes ou formatos diferentes para dispositivos diferentes. Frameworks modernos como Next.js automatizam a geração de imagens responsivas, criando vários tamanhos a partir de uma única fonte e servindo a versão ideal conforme o viewport. Formatos WebP e AVIF com fallback JPEG reduzem ainda mais a largura de banda. Imagens responsivas são essenciais para Core Web Vitals: uma imagem grande demais atrasa o Largest Contentful Paint, a principal métrica de carregamento que afeta a experiência do usuário e o ranqueamento em mecanismos de busca.