As imagens são o motivo número um pelo qual os sites falham nos Core Web Vitals. Elas geralmente são o maior elemento da página, bloqueiam a renderização e causam mudanças no layout quando aparecem de repente sem espaço reservado.
A boa notícia para os desenvolvedores: problemas de imagem são as questões mais fáceis de corrigir nos Core Web Vitals. Ao contrário do trabalho pesado de JavaScript que o INP exige, a otimização de imagens segue padrões claros e repetíveis. Acerte neles e você moverá duas das três métricas na direção certa de uma só vez.
Este é um checklist prático, não uma aula teórica. Cada item é algo que você pode aplicar hoje: as escolhas de formato, os atributos de carregamento, as regras de dimensão e a configuração de entrega que transformam suas notas de Core Web Vitals de vermelho para verde.
Ao final, você terá um processo de otimização de imagens repetível que pode ser aplicado a qualquer página em qualquer stack tecnológica.
Como as imagens afetam cada Core Web Vital
Core Web Vitals são três métricas que o Google usa como sinal de ranqueamento de experiência de página, medidas em usuários reais no percentil 75. De acordo com a documentação oficial de Core Web Vitals do Google no web.dev, as três métricas e seus limiares "bons" são os seguintes.
LCP (Largest Contentful Paint): menos de 2,5 segundos
Mede quanto tempo leva para renderizar o maior elemento visível na tela. Na maioria das páginas, esse elemento é uma imagem, geralmente a imagem principal (hero). Uma imagem hero pesada e de carregamento lento é a causa mais comum de uma nota baixa no LCP. As imagens estão no centro dessa métrica.
CLS (Cumulative Layout Shift): menos de 0,1
Mede o movimento inesperado do layout durante o carregamento da página. Imagens sem largura e altura explícitas são uma das principais causas. Quando uma imagem carrega e empurra o conteúdo para baixo porque o navegador não reservou espaço para ela, ocorre uma mudança de layout que prejudica sua pontuação no CLS.
INP (Interaction to Next Paint): menos de 200 milissegundos
Mede a responsividade às interações do usuário. O INP substituiu o First Input Delay em março de 2024. As imagens afetam o INP de forma menos direta, mas a decodificação de imagens pesadas e arquivos grandes competem pela thread principal e podem atrasar a prontidão da interface. Imagens mais leves também ajudam aqui.
Portanto, as imagens influenciam diretamente o LCP e o CLS, enquanto afetam indiretamente o INP. Otimize suas imagens e você melhorará as duas métricas em que a maioria dos sites com muitas imagens falha.
Os limiares dos Core Web Vitals para 2026
Mantenha estes números em mente. O Google mede o percentil 75 dos usuários reais, de modo que 75% das visitas devem atingir a faixa "boa" para ser aprovado.
Checklist parte 1: corrigir o LCP (sua imagem hero)
O LCP é onde as imagens são mais importantes. O maior elemento é quase sempre uma imagem, então estas correções visam diretamente esse ponto.
1. Sirva a imagem LCP em AVIF ou WebP
Formatos modernos reduzem drasticamente o tamanho do arquivo da imagem LCP. O AVIF chega a ser 50% menor que o JPEG, e o WebP cerca de 25 a 35% menor. Arquivos menores significam carregamento mais rápido e, consequentemente, um melhor LCP. Esta comparação de JPEG vs PNG vs WebP vs AVIF mostra qual escolher e como configurar fallbacks para compatibilidade total nos navegadores.
2. Adicione fetchpriority="high" à imagem LCP
Avise ao navegador que esta imagem é prioritária. Adicionar fetchpriority="high" à sua imagem hero faz com que o navegador a busque mais cedo, antes de recursos de menor prioridade. Esse único atributo pode economizar centenas de milissegundos no LCP.
3. Nunca aplique lazy-load na imagem LCP
O carregamento tardio (lazy loading) é ótimo para imagens abaixo da linha de dobra (below-the-fold), mas aplicar loading="lazy" na sua imagem hero é um erro clássico. Isso atrasa a imagem mais importante da página. A imagem LCP deve ser carregada imediatamente e com alta prioridade.
4. Faça o preload da imagem hero
Adicione uma tag <link rel="preload" as="image"> no head para a sua imagem hero, permitindo que o navegador a descubra cedo, antes mesmo de terminar de analisar o restante do HTML. Combine com fetchpriority high para um efeito máximo.
5. Redimensione a imagem para seu tamanho real de exibição
Servir uma imagem com 3000 pixels de largura em um contêiner de 800 pixels desperdiça tempo de carregamento com pixels que ninguém vê. Redimensione a imagem hero para o tamanho máximo em que ela será realmente exibida e depois forneça variantes responsivas para telas menores. Esta costuma ser a maior vitória para o LCP.
6. Mantenha o TTFB abaixo de 200ms
O Time to First Byte é o alicerce do LCP. Se o seu servidor demorar um segundo para responder, nenhuma otimização de imagem salvará seu site. Use uma CDN, faça cache de forma agressiva e considere a entrega no edge. A meta é manter o TTFB abaixo de 200ms, pois a imagem LCP só pode carregar na velocidade que o servidor permitir.
Precisa comprimir sua imagem hero e imagens de conteúdo para o tamanho e formato corretos? Use o compressor de imagens gratuito → para compressão rápida em AVIF e WebP, ou experimente o compressor personalizado → para controlar dimensões exatas, formato e qualidade para cada breakpoint. Ambos rodam no seu navegador, sem upload para nenhum servidor.
Checklist parte 2: corrigir o CLS (reservar espaço para imagens)
O CLS derivado de imagens tem quase sempre o mesmo motivo: o navegador não sabe qual será o tamanho da imagem, por isso não reserva espaço e empurra o conteúdo quando a imagem chega. Todas as correções se baseiam em reservar esse espaço previamente.
7. Sempre defina os atributos width e height
Cada elemento de imagem precisa de atributos explícitos de width e height. O navegador usa esses valores para calcular a proporção (aspect ratio) e reservar o espaço correto antes de carregar a imagem, eliminando o salto visual. Essa é a correção de CLS mais importante e a mais frequentemente esquecida.
8. Use a propriedade CSS aspect-ratio para imagens responsivas
Para imagens responsivas que escalam junto com o contêiner, defina a propriedade CSS aspect-ratio para que o navegador reserve o espaço proporcional em qualquer largura de tela. Combinada com os atributos width e height, essa técnica mantém o layout estável em todas as resoluções.
9. Reserve espaço para imagens que carregam tarde
Para imagens carregadas via JavaScript, em carrosséis ou abaixo da linha de dobra, certifique-se de que os contêineres tenham dimensões reservadas desde o início. Uma imagem que surge após uma interação deve se encaixar em um espaço já dimensionado, sem empurrar a página.
10. Evite inserir imagens acima do conteúdo existente
Se você injetar uma imagem (um anúncio, um banner, uma imagem hero tardia) acima de um conteúdo que o usuário já está lendo, tudo saltará para baixo. Reserve o espaço com antecedência ou insira a imagem abaixo da dobra, onde ela não interromperá a leitura.
Checklist parte 3: otimizar a entrega (todas as imagens)
Estas regras se aplicam a todas as imagens da página, e não apenas à principal, acumulando benefícios em páginas ricas em mídia.
11. Aplique lazy-load em imagens abaixo da dobra
Adicione loading="lazy" em cada imagem abaixo da linha de dobra. O navegador só carregará essas imagens quando o usuário rolar a página perto delas, liberando banda e tempo da thread principal para o conteúdo crítico acima da dobra. Apenas lembre-se de nunca usar isso na imagem LCP.
12. Sirva imagens responsivas com srcset
Use os atributos srcset e sizes para entregar imagens de tamanho apropriado para cada dispositivo. Um celular recebe uma imagem pequena, enquanto um desktop recebe uma grande. Isso pode reduzir pela metade o peso das imagens em dispositivos móveis, e como o Google avalia sites usando dados móveis, esse peso é fundamental.
13. Comprima cada imagem, não apenas a hero
Uma página pode ter uma imagem hero e vinte imagens de conteúdo. Essas vinte imagens somadas pesam muito. Comprima todas elas para 80-85% de qualidade. O guia completo para comprimir imagens para acelerar sites cobre todo o fluxo de trabalho, incluindo a automação em escala.
14. Use uma CDN ou serviço de otimização de imagens
CDNs de imagem (Cloudinary, ImageKit, Cloudflare Images) entregam imagens a partir de servidores próximos do usuário, convertem para AVIF ou WebP em tempo real e redimensionam automaticamente por dispositivo. Para um site com muito conteúdo, essa única mudança pode resolver a maior parte dos problemas de Core Web Vitals relacionados a imagens.
15. Cuide muito bem dos arquivos PNG
Arquivos PNG costumam ser as imagens mais pesadas da página. Se você tem capturas de tela ou gráficos em PNG, veja como comprimir imagens PNG em até 70%, ou converta-os para WebP, mantendo a transparência em uma fração do tamanho.
Como medir seus Core Web Vitals relacionados a imagens
Não há como otimizar aquilo que não se mede. Use estas ferramentas na seguinte ordem:
- PageSpeed Insights: cole sua URL para obter dados de laboratório e de usuários reais (campo), verificando o elemento LCP identificado
- Painel de Performance do Chrome DevTools: grave o carregamento de uma página para ver exatamente qual imagem é o elemento LCP e quanto tempo ela demora
- Lighthouse: execute-o em cada deploy importante para capturar regressões antes de irem para produção
- Relatório de Core Web Vitals no Google Search Console: acompanhe as taxas de aprovação de usuários reais em todo o seu site durante uma janela de 28 dias
- Extensão Chrome Web Vitals: veja o LCP, CLS e INP ao vivo enquanto navega e desenvolve
Comece com o PageSpeed Insights para encontrar seu elemento LCP. Se for uma imagem (e quase sempre é), o checklist do LCP acima é sua prioridade máxima.
Uma nota sobre imagens fora da página web
Os Core Web Vitals cobrem apenas suas próprias páginas, mas a mesma disciplina de compressão ajuda em qualquer lugar para onde suas imagens viajem. Se você também publica nas redes sociais, o guia rápido de tamanhos de imagens para redes sociais mostra as dimensões ideais por plataforma, evitando que elas recomprimam arquivos pesados de forma agressiva.
A ordem de prioridade: o que corrigir primeiro
Se você tiver tempo apenas para algumas correções, faça-as nesta ordem para obter o maior impacto nos Core Web Vitals:
- Primeiro: adicione width e height em cada imagem (corrige a maior parte do CLS instantaneamente)
- Segundo: converta e comprima a imagem hero LCP para AVIF ou WebP no tamanho real de exibição
- Terceiro: adicione fetchpriority high e preload na imagem hero, removendo qualquer lazy-load dela
- Quarto: aplique lazy-load em todas as imagens abaixo da dobra
- Quinto: adicione srcset para dimensionamento responsivo
- Sexto: transfira a entrega de imagens para uma CDN ou serviço especializado
As três primeiras medidas sozinhas já corrigem a maioria das falhas de Core Web Vitals impulsionadas por imagens na maior parte das páginas. Elas levam uma tarde de trabalho, e não uma sprint inteira.
5 erros de imagem que arruinam silenciosamente seus Core Web Vitals
1. Aplicar lazy-load na imagem hero
O gol contra mais comum. Carregar a imagem LCP de forma tardia atrasa exatamente o elemento que a métrica mede. Carregue a imagem hero imediatamente (eager) e aplique lazy-load em tudo que estiver abaixo da dobra.
2. Esquecer os atributos width e height
Sem dimensões, não há espaço reservado, o que significa mudança de layout. Essa simples omissão é a culpada por trás da maioria das falhas de CLS. Adicione os atributos em todas as imagens, sempre.
3. Servir imagens grandes demais
Uma imagem de 4000px em um espaço de 800px demora quatro vezes mais para carregar do que o necessário. Redimensione para o tamanho de exibição e sirva variantes responsivas. O usuário nunca vê os pixels desperdiçados, mas sente a espera.
4. Continuar usando JPEG e PNG em todos os lugares
Ficar preso a formatos antigos significa deixar de economizar de 25 a 50% de tamanho de arquivo. Converta para AVIF ou WebP com alternativas e seu LCP melhorará em todo o site.
5. Otimizar apenas a imagem hero
A imagem hero é a mais importante para o LCP, mas vinte imagens pesadas de conteúdo continuarão deixando a página lenta e competindo por banda. Comprima cada imagem da página, e não apenas a que fica no topo.
Resumo
As imagens são a razão mais comum para que páginas falhem nos Core Web Vitals, sendo ao mesmo tempo os problemas mais fáceis de resolver. Elas impactam diretamente o LCP, causam a maioria das falhas de CLS e adicionam um peso que afeta o INP. Corrija suas imagens e duas das três métricas melhorarão de uma só vez.
Siga o checklist em ordem: dimensões em cada imagem para o CLS, depois uma imagem hero em formato moderno comprimida e com alta prioridade para o LCP, e em seguida lazy-load e dimensionamento responsivo para o resto. Meça os resultados com PageSpeed Insights e Search Console, e trate regressões de performance como bugs.
A maioria das falhas de Core Web Vitals causadas por imagens se resume a um punhado de padrões. Aprenda-os uma vez e você conseguirá deixar qualquer página no verde em apenas uma tarde.