Substituindo background-image por <img> no HTML (Parte 2)

No post passado, falei sobre como substituir o uso do background-image pelo uso da tag <img> no HTML, destacando o maior benefício dessa troca: performance.

Agora, vamos elevar o nível e discutir uma técnica complementar: o uso do <link rel="preload"> para carregar as imagens do topo da página (geralmente da primeira seção).

O atributo preload permite que o navegador priorize o carregamento de recursos críticos antes mesmo de eles serem requisitados pelo HTML ou CSS. Falando em imagens, isso é útil para aquelas que ficam na primeira seção da página. Dessa forma, garantimos que elas sejam exibidas o mais rápido possível, reduzindo o Largest Contentful Paint (LCP) e melhorando a performance geral no pagespeed.

Caso real: já fui de uma nota 52 para 89 só puxando três imagens previamente via preload. Então, sim… faz muita diferença!

Ok, mas como funciona o preload?

Ao declarar uma imagem como preload, informamos ao navegador que aquele recurso é essencial e deve ser carregado com alta prioridade. Com isso, o navegador começa a baixar a imagem logo no início, antes mesmo de processar totalmente o CSS ou o DOM.

Em frameworks como Next.js ou Nuxt, que possuem componentes de imagem (<Image /> e <NuxtImg />), esse tipo de otimização é simplificado. No Next.js, por exemplo, basta configurar o atributo priority como true e no Nuxt, basta passar o atributo preload, como mostrado no código da imagem.

Utilizando diretamnte no HTML

<link
  rel="preload"
  href="https://example.com/hero-image.webp"
  as="image"
  type="image/jpeg"
/>

Nuxt

<NuxtImg src="https://example.com/hero-image.webp" alt="Hero image" preload />

Next.js

<NextImg
  src="https://example.com/hero-image.webp"
  alt="Hero image"
  priority={true}
/>

Essas opções informam ao framework que a imagem deve ser carregada com alta prioridade, incluindo a marcação do preload no HTML.

Importante: cuidado com o uso em excesso. Muitas imagens carregadas assim trazem problemas de performance. Uma dica é ficar de olho no pagespeed e seguir com base no report gerado por lá.

Essa técnica, combinada com o uso de atributos como lazy e decoding, cria uma base sólida para uma página rápida e otimizada.