Carregamento preguiçoso e imagens responsivas: Guia prático para iniciantes

O problema: Imagens volumosas

As imagens geralmente são os maiores arquivos de uma página web. Quando um usuário visita seu site, seu navegador tenta baixar todas as imagens, incluindo as que estão abaixo da dobra inicial. Isso desperdiça largura de banda e reduz drasticamente a velocidade de carregamento inicial, resultando em má experiência do usuário e baixas pontuações nos Core Web Vitals.

A solução tem duas vertentes:

1. Carregamento preguiçoso (Lazy-Loading): Adiar o carregamento de imagens fora da tela até que o usuário role a página e se aproxime delas.
2. Imagens responsivas (Responsive Images): Oferecer diferentes tamanhos de imagem para diferentes tamanhos de tela, evitando que usuários móveis baixem imagens enormes projetadas para desktop.

Felizmente, o HTML moderno oferece recursos poderosos e fáceis de usar para ambos.

Parte 1: Implementando carregamento preguiçoso facilmente

Antigamente, o carregamento preguiçoso exigia bibliotecas JavaScript complexas. Hoje, é apenas um atributo simples.

O atributo loading="lazy" instrui o navegador a não carregar a imagem até que ela esteja prestes a entrar na área visível.

Como implementar:

Basta adicionar loading="lazy" às suas tags <img>.

<img src="minha-imagem.jpg" alt="Texto alternativo descritivo" loading="lazy" width="800" height="600">

Pontos importantes:

• Sempre inclua os atributos width e height. Isso permite que o navegador reserve o espaço correto antes do carregamento da imagem, evitando mudanças de layout (CLS - Cumulative Layout Shift).
• Não use carregamento preguiçoso em todas as imagens. Imagens “acima da dobra” (visíveis inicialmente) devem carregar normalmente. Aplicar loading="lazy" nelas pode retardar a percepção de carregamento. Use este atributo apenas para imagens abaixo da dobra inicial.

O suporte para loading="lazy" agora é universal em todos os navegadores principais, tornando-o um método seguro e eficaz para melhorar o desempenho.

Parte 2: Oferecendo tamanhos adequados com srcset

Por que um usuário móvel deveria baixar uma imagem de 2000px projetada para desktop? O atributo srcset permite oferecer múltiplas versões de uma imagem. O navegador escolherá inteligentemente a mais adequada com base no tamanho e resolução da tela do usuário.

Como implementar:

1. Crie múltiplos tamanhos de imagem: Gere várias versões. Um conjunto comum:

   • imagem-pequena.jpg (ex: 480px de largura)
   • imagem-media.jpg (ex: 800px de largura)
   • imagem-grande.jpg (ex: 1200px de largura) Você pode usar nossa ferramenta de redimensionamento para criar esses tamanhos.

2. Use o atributo srcset: Liste cada imagem com seu descritor de largura (w).

<img 
  srcset="imagem-pequena.jpg 480w, 
          imagem-media.jpg 800w, 
          imagem-grande.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="imagem-media.jpg" 
  alt="Texto alternativo descritivo"
  loading="lazy"
  width="800" height="600">

Vamos decompor:

• srcset: Fornece a lista de imagens disponíveis e suas larguras reais
• sizes: Diz ao navegador qual largura a imagem ocupará em diferentes tamanhos de viewport. Neste exemplo: “Se a largura da tela for ≤600px, a imagem terá 480px. Caso contrário, terá 800px”. O navegador usa isso para escolher a melhor imagem em srcset.
• src: Imagem de fallback para navegadores antigos sem suporte a srcset.

Parte 3: Direção artística com <picture>

Às vezes, você não quer apenas uma versão menor, mas uma imagem completamente diferente. Exemplo: uma paisagem horizontal em desktop torna-se um retrato vertical em mobile. Isso é “direção artística”.

O elemento <picture> é perfeito para isso. Permite fornecer múltiplos elementos <source>, com o navegador escolhendo o primeiro que corresponder.

Como implementar:

<picture>
  <!-- Mostra esta imagem se largura da tela ≤600px -->
  <source media="(max-width: 600px)" srcset="imagem-retrato.jpg">
  
  <!-- Caso contrário, mostra esta -->
  <source media="(min-width: 601px)" srcset="imagem-paisagem.jpg">
  
  <!-- Imagem de fallback para navegadores antigos -->
  <img src="imagem-paisagem.jpg" alt="Texto alternativo descritivo" loading="lazy" width="1200" height="600">
</picture>

Você também pode usar <picture> para oferecer formatos modernos como AVIF ou WebP com fallback para JPEG:

<picture>
  <source type="image/avif" srcset="imagem.avif">
  <source type="image/webp" srcset="imagem.webp">
  <img src="imagem.jpg" alt="Texto alternativo descritivo">
</picture>

Crie esses formatos com nosso conversor de imagens.

Conclusão

Combinando esses três recursos HTML modernos, você construirá sites que carregam a uma velocidade surpreendente em qualquer dispositivo.

• Use loading="lazy" em todas as imagens abaixo da dobra inicial
• Use srcset para oferecer diferentes tamanhos da mesma imagem
• Use <picture> quando precisar de imagens diferentes para diferentes telas ou formatos

Implementar essas técnicas é uma das mudanças de maior impacto que você pode fazer para melhorar o desempenho web e os Core Web Vitals.