Quando pensamos em proporcionar uma boa experiência de usuário, muitas vezes subestimamos o impacto do carregamento de imagens. É comum pensar: "Ah, é só uma imagem..." — mas a verdade é que imagens mal otimizadas podem prejudicar seriamente a percepção de desempenho de uma aplicação.
A boa notícia é que sim, dá para melhorar! Com algumas técnicas simples, podemos otimizar o carregamento de imagens, oferecer feedback visual durante o processo e garantir uma experiência mais fluida, mesmo em conexões lentas ou com imagens pesadas.
loading)O atributo loading controla quando o navegador deve iniciar o download da imagem. Existem duas opções principais:
lazy → Carregamento preguiçoso
Diz ao navegador para adiar o carregamento até que a imagem esteja prestes a entrar na tela (ideal para imagens abaixo da dobra).
eager → Carregamento ansioso
Indica que a imagem deve ser carregada imediatamente, pois é considerada essencial (ex: imagens visíveis no carregamento inicial da página).
<img loading="lazy" />
<img loading="eager" />
Ambas as abordagens são válidas — tudo depende da prioridade visual e funcional da imagem na interface.
decoding)O atributo decoding define como o navegador deve processar a imagem internamente antes de exibi-la.
Valores possíveis:
async → Decodifica a imagem assíncronamente, sem travar o render.sync → Decodifica a imagem sincronamente, o que pode bloquear a renderização da página.auto → Deixa a decisão para o navegador (o comportamento padrão geralmente é async).<img decoding="async" />
<img decoding="sync" />
<img decoding="auto" />
Esse atributo é útil quando queremos garantir que a imagem seja exibida sem travar o motor de renderização do browser.
Dica: Usar loading="eager" com decoding="async" é uma ótima combinação para imagens importantes que devem ser mostradas logo, mas sem travar o carregamento da interface.