Lazy loading e fetchpriority em imagens
Dois atributos HTML que, bem usados, melhoram muito o carregamento e, mal usados, o pioram. Este guia explica quando aplicar cada um.
A ideia básica
Ao carregar uma página, o navegador precisa decidir em que ordem baixa dezenas de recursos. Para as imagens, dois atributos permitem orientar essa decisão:
loading="lazy": "não baixe esta imagem até ela estar perto de aparecer".fetchpriority="high": "esta imagem é importante, baixe-a o quanto antes".
Eles são complementares: lazy para o que está abaixo da dobra e prioridade alta para a imagem principal.
loading="lazy"
<img src="galeria-12.webp" loading="lazy" width="800" height="600" alt="…">
Com esse atributo, o navegador adia o download até a imagem se aproximar da área visível. Os limites são definidos pelo navegador conforme a conexão (no Chrome, entre 1250 e 2500 px de distância). É suportado em todos os navegadores modernos e não precisa de JavaScript.
Vantagens: economiza dados de quem não rola a página e libera banda para o que importa no início.
Onde usar: galerias, imagens de artigos abaixo da primeira tela, miniaturas de listagens longas, avatares de comentários, logotipos do rodapé.
O erro mais caro: lazy na imagem principal
Se a imagem que aparece ao carregar (o LCP) tiver loading="lazy", o navegador só vai pedi-la depois de calcular o layout da página, o que pode atrasar o LCP em várias centenas de milissegundos. É uma das falhas mais comuns detectadas pelo Lighthouse.
Muitos CMSs e plugins adicionam lazy a todas as imagens automaticamente. Confira se a primeira imagem visível não o tem. O WordPress, por exemplo, já omite o atributo na primeira imagem de conteúdo desde a versão 5.9, mas temas e construtores visuais podem ignorar essa lógica.
fetchpriority="high"
<img src="hero.avif" fetchpriority="high" width="1600" height="900" alt="…">
Por padrão, as imagens começam com prioridade baixa e sobem quando o navegador descobre que estão na área visível. O fetchpriority="high" pula essa espera. É suportado no Chrome, Edge, Safari e Firefox.
Use em uma ou duas imagens no máximo por página: a imagem LCP e, no máximo, outra crítica. Se tudo é prioridade, nada é.
Você também pode usar fetchpriority="low" para rebaixar imagens visíveis mas secundárias, como os slides ocultos de um carrossel.
decoding="async"
<img src="foto.webp" decoding="async" …>
Indica que a decodificação da imagem pode ser feita sem bloquear outras tarefas de renderização. O impacto é pequeno e os navegadores já fazem muito disso por padrão, mas é inofensivo na maioria das imagens. O ImageZap o inclui no código gerado.
Resumo por tipo de imagem
| Imagem | loading | fetchpriority |
|---|---|---|
| Hero / imagem LCP | (sem atributo) | high |
| Logo do cabeçalho | (sem atributo) | (padrão) |
| Imagens na primeira tela | (sem atributo) | (padrão) |
| Imagens abaixo da dobra | lazy | (padrão) |
| Slides ocultos de um carrossel | lazy | low |
Lazy loading com JavaScript
Antes do suporte nativo, usavam-se bibliotecas que trocavam data-src por src com um IntersectionObserver. Hoje elas raramente são necessárias e têm desvantagens: o HTML inicial não contém a URL real (pior para a descoberta) e dependem da execução do JavaScript. Se o seu site ainda usa uma, considere substituí-la pelo atributo nativo.
Perguntas frequentes
O lazy loading afeta o SEO?
O lazy nativo não: o Google renderiza a página e vê as imagens. Soluções com JavaScript que não colocam a URL no HTML podem dificultar a indexação.
Devo colocar lazy em iframes?
Sim, loading="lazy" também funciona em <iframe>, útil para vídeos do YouTube e mapas incorporados.
O fetchpriority substitui o preload?
Não. O preload serve para recursos que o navegador não descobriria cedo (fundos CSS, imagens inseridas por JS). Se a imagem já está no HTML, basta o fetchpriority.
Quantas imagens deveriam carregar sem lazy?
As que aparecem na primeira tela no celular e no desktop. Normalmente, de uma a quatro.