Como otimizar o carregamento de imagens numa página web?

1. Compressão: Utilize ferramentas para otimizar o tamanho das imagens sem perda de qualidade (por exemplo, TinyPNG, Compressor.io).
2. Formatos: Escolha formatos modernos como WebP ou AVIF, que oferecem melhor compressão em comparação com JPEG e PNG. Para navegadores antigos, use <picture> ou o atributo srcset para fallback.
3. Lazy Loading: Adie o carregamento de imagens fora da vista até que sejam necessárias. Use loading="lazy" nativo ou bibliotecas JavaScript.
4. Imagens responsivas: Forneça diferentes versões de imagens para diferentes tamanhos de tela e resoluções, usando o elemento <picture> ou atributos srcset/sizes.
5. CDN (Content Delivery Network): Hospede as imagens em um CDN para uma entrega mais rápida do conteúdo aos usuários a partir da localização mais próxima.
6. Caching: Configure cabeçalhos de cache adequados no servidor para que o navegador possa guardar as imagens e carregá-las a partir do cache local em visitas posteriores.
7. Placeholder/Blurhash: Mostre um "placeholder" de baixa qualidade ou um Blurhash gerado enquanto a imagem de tamanho completo é carregada.

Exemplo de uso de loading="lazy":

<img src="image.jpg" alt="Descrição da imagem" loading="lazy">

Exemplo de uso de <picture> para diferentes formatos:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descrição da imagem">
</picture>