Otimização de imagens para Core Web Vitals e LCP

Imagens costumam ser o maior contribuinte para o peso de uma página. Como a velocidade afeta diretamente a experiência e o ranking de busca, otimizá-las é uma das ações de maior impacto. O Google mede isso com os Core Web Vitals — e as imagens estão no centro de dois deles.

Como as imagens afetam os Core Web Vitals

O LCP (Largest Contentful Paint) mede quanto tempo o maior elemento visível leva para renderizar. Na maioria das páginas esse elemento é uma imagem de destaque, então uma imagem pesada e lenta empurra o LCP para cima. A meta é menos de 2,5 segundos.

O CLS (Cumulative Layout Shift) mede movimentos inesperados do conteúdo durante o carregamento. Se a imagem não declara dimensões, o navegador não reserva espaço e tudo pula quando ela chega. Os dois problemas se resolvem com poucas técnicas.

1. Use um formato moderno

Trocar JPEG ou PNG por WebP ou AVIF costuma cortar 25–50% do tamanho na mesma qualidade visual. Arquivos menores baixam mais rápido, o que reduz diretamente o LCP. Converter uma pasta inteira de uma vez — como no Scrunch — é o jeito mais rápido de aplicar isso ao site todo.

2. Sirva imagens no tamanho de exibição

Erro comum: subir uma foto de 4000 pixels e exibi-la num contêiner de 800. O navegador baixa o arquivo inteiro mesmo assim. Redimensione para aproximadamente o tamanho exibido (até 2x para telas retina) e a economia é dramática.

3. Use imagens responsivas

O atributo srcset deixa o navegador escolher a imagem certa para cada tela. Um celular não deveria baixar a imagem de destaque do desktop. Oferecer algumas larguras garante arquivos pequenos para telas pequenas — essencial para os Core Web Vitals no mobile.

4. Lazy loading para o que está fora da tela

Mas nunca na imagem principal

Adicionar loading="lazy" às imagens abaixo da dobra faz o navegador adiá-las até serem necessárias, economizando banda. Já a imagem LCP do topo deve carregar imediatamente — de preferência com fetchpriority="high" — para aparecer o quanto antes.

5. Reserve espaço para evitar saltos de layout

Sempre defina os atributos width e height (ou um aspect-ratio no CSS). O navegador reserva o espaço correto antes de a imagem carregar, eliminando o pulo que prejudica o CLS.

Checklist rápido

• Converta as imagens para WebP ou AVIF
• Redimensione para o tamanho real de exibição (~2x para retina)
• Ofereça larguras responsivas com srcset
• Lazy loading abaixo da dobra
• Priorize a imagem LCP/destaque
• Defina width e height para evitar saltos

Formato e tamanho são a base — comece por aí. O Scrunch cuida da etapa de conversão e compressão, com várias imagens de uma vez no navegador.