O que é o lazy loading de imagens?

Quando uma página web contém muitas imagens, carregar todas no momento em que a página abre aumenta desnecessariamente o tempo de carregamento inicial. O lazy loading — ou carregamento diferido — é uma técnica que permite carregar cada imagem apenas quando o utilizador está prestes a vê-la. Fácil de implementar, melhora significativamente o desempenho do site e a experiência do utilizador.

Definição de lazy loading

O lazy loading (literalmente «carregamento preguiçoso») consiste em atrasar o carregamento dos recursos não imediatamente visíveis no ecrã. Aplicado às imagens, significa que apenas as imagens situadas na área visível no momento do carregamento da página (o viewport) são descarregadas imediatamente. As restantes imagens carregam progressivamente à medida que o utilizador faz scroll.

Sem lazy loading, o browser descarrega todas as imagens da página assim que é aberta — incluindo as que estão no fundo e que o utilizador pode nunca ver.

Como funciona o lazy loading?

Existem duas abordagens principais para implementar o lazy loading de imagens:

1. O atributo HTML nativo loading="lazy"

Desde 2019, os browsers modernos suportam nativamente o lazy loading através de um simples atributo HTML:

<img src="photo.jpg" alt="Descrição" loading="lazy">

O browser decide automaticamente quando carregar a imagem com base na posição de scroll do utilizador. É o método recomendado hoje: não é necessária nenhuma biblioteca JavaScript.

2. A Intersection Observer API (JavaScript)

Antes da standardização do atributo nativo, os programadores usavam a Intersection Observer API para detetar quando uma imagem entra no viewport e desencadear o seu carregamento nesse momento. Esta abordagem continua útil para comportamentos mais avançados ou animações na entrada das imagens.

Quais são as vantagens do lazy loading?

Desempenho e tempo de carregamento

Ao reduzir o número de imagens carregadas no arranque, o lazy loading diminui o peso inicial da página e acelera a sua renderização. As métricas de desempenho como o Largest Contentful Paint (LCP) e o Time to Interactive (TTI) melhoram como resultado.

Poupança de largura de banda

As imagens no fundo da página só são descarregadas se o utilizador as alcançar realmente. Numa página longa com muitos elementos visuais, isto pode representar uma poupança significativa — especialmente para visitantes em dispositivos móveis ou com ligação lenta.

SEO e Core Web Vitals

O Google tem em conta os Core Web Vitals no seu ranking. Um LCP melhor, diretamente influenciado pelo carregamento de imagens, pode ter um impacto positivo no posicionamento nos resultados de pesquisa.

Lazy loading: o que não fazer

O lazy loading não é adequado para todas as imagens. Dois erros frequentes devem ser evitados:

• Nunca aplicar loading="lazy" a imagens hero ou acima da dobra — estas imagens são visíveis no carregamento, atrasar a sua exibição degradaria o LCP e a experiência do utilizador.
• Não omitir os atributos width e height — sem dimensões definidas, o browser não pode reservar espaço para a imagem antes de a carregar, causando deslocamentos de layout (layout shifts) prejudiciais para o Cumulative Layout Shift (CLS).

Bom saber: para imagens imediatamente visíveis no carregamento (banner, hero image, logótipo), use o atributo loading="eager" ou simplesmente omita o atributo — esse é o comportamento padrão do browser.

Compatibilidade com browsers

Lazy loading e alojamento de imagens

Quando utiliza um serviço de alojamento de imagens para armazenar e distribuir os seus elementos visuais, lembre-se sempre de incluir o atributo loading="lazy" nas imagens não imediatamente visíveis. Combinar um alojamento de alto desempenho (CDN, compressão automática) com o lazy loading maximiza a velocidade de exibição das suas páginas.

Bom saber: um serviço de alojamento de imagens de qualidade fornece URLs diretos estáveis para cada imagem, o que facilita a integração do lazy loading: basta adicionar loading="lazy" à sua tag <img> sem modificar o URL de origem.