Imagem responsiva
Uma implementação de imagem que oferece diferentes tamanhos ou formatos com base no dispositivo do visualizador, no tamanho da tela e na velocidade da conexão.
Imagens responsivas evitam que usuários móveis baixem imagens do tamanho de um desktop que desperdiçam largura de banda e retardam o carregamento de páginas. HTML fornece o atributo srcset para mudança de resolução e o elemento picture para direção de arte — servindo diferentes cortes ou formatos para diferentes dispositivos. Estruturas modernas como Next.js automatizam a geração responsiva de imagens, criando vários tamanhos a partir de uma única fonte e servindo a versão ideal com base na janela de visualização. WebP e AVIF fAVIFts com JPEG fallbacJPEGr reduzem ainda mais a largura de banda. Imagens responsivas são essenciais para o desempenho do Core Web Vitals – uma imagem superdimensionada atrasa o Largest Contentful Paint, a principal métrica de desempenho de carregamento que afeta a experiência do usuário e as classificações do mecanismo de pesquisa.