Como fazer a imagem carregar em tamanho reduzido em dispositivos móveis?

Para carregar imagens em tamanho reduzido em dispositivos móveis, utilize imagens adaptativas com HTML e CSS:

1. Use o elemento <img> com os atributos srcset e sizes, para que o navegador escolha o tamanho de imagem adequado dependendo do tamanho da tela:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Descrição da imagem">

2. Use CSS para limitar a largura máxima da imagem:

img {
  max-width: 100%;
  height: auto;
}

3. Também pode aplicar formatos modernos de imagens (WebP, AVIF) para reduzir o tamanho dos ficheiros.

Assim, o navegador no dispositivo móvel carregará o ficheiro de tamanho ótimo, o que melhora o desempenho e reduz o tráfego.