Como melhorar o LCP otimizando imagens
O Largest Contentful Paint (LCP) é uma das métricas mais importantes do Google para medir a velocidade percebida de uma página. Neste guia, você vai aprender a melhorar o LCP reduzindo o peso das imagens, adotando WebP/AVIF e usando o LitePic para fazer tudo localmente.
Por que o LCP depende tanto de imagens?
Em sites de e-commerce, blogs, landing pages e catálogos, o maior elemento visível na tela inicial quase sempre é uma imagem. Se essa imagem for pesada, o navegador leva mais tempo para baixá-la, decodificá-la e exibi-la. O resultado é um LCP alto, que prejudica a experiência do usuário e o ranqueamento no Google.
Como a otimização de imagem reduz o LCP
O LCP mede quando o maior conteúdo visível termina de renderizar. Para imagens, esse momento depende de três fatores: o tempo de download do arquivo, o tempo de decodificação e o tempo de layout. Comprimir e converter o formato reduz principalmente o tempo de download, que é geralmente o maior gargalo.
- 1Download mais rápido — arquivos menores atravessam a rede em menos tempo.
- 2Decodificação mais leve — formatos modernos como WebP decodificam de forma eficiente.
- 3Menos concorrência de banda — a imagem LCP baixa antes de recursos secundários.
- 4Melhor pontuação no Core Web Vitals — LCP baixo melhora SEO e experiência.
WebP e AVIF: os formatos que aceleram o LCP
JPG e PNG foram criados em uma época em que a web era mais leve. Formatos modernos como WebP e AVIF usam algoritmos de compressão mais eficientes, produzindo arquivos menores com a mesma qualidade visual.
- ~25-35% menor que JPG
- Suporte em 96%+ dos navegadores
- Ideal para hero, banners e produtos
- Fallback simples para JPG
- ~40-50% menor que JPG
- Qualidade visual superior em tamanhos pequenos
- Excelente para banners e fotos
- Use com fallback WebP/JPG
Valide o LCP da sua página e receba um checklist
Informe a URL de uma página pública. Analisamos o HTML inicial para identificar a provável imagem LCP, seu formato, peso e os sinais que costumam atrasar o Largest Contentful Paint — e geramos um checklist de ações a partir dos principais achados.
A análise lê apenas o HTML público e o cabeçalho da imagem — nada é armazenado. Páginas que renderizam tudo via JavaScript podem ter sinais limitados.
Checklist passo a passo para otimizar LCP com imagens
Siga este checklist na ordem para não perder nenhum ponto crítico. Cada etapa inclui verificações práticas de formato, dimensões, compressão e carregamento.
Identifique a imagem responsável pelo LCP
Antes de otimizar qualquer arquivo, descubra qual elemento o Google considera o LCP da página. Geralmente é o maior elemento visível acima da dobra.
- 1Abra o PageSpeed Insights, Lighthouse ou Chrome DevTools > Performance.
- 2Anote a URL exata da imagem LCP e as dimensões em que ela é exibida.
- 3Confirme se a imagem é carregada por <img>, background CSS ou picture.
Verifique o formato da imagem LCP
Formatos antigos como JPG e PNG foram criados para outra realidade de banda. Formatos modernos reduzem o peso sem perder qualidade perceptível.
- 1Se o arquivo for JPG, planeje a conversão para WebP (fallback JPG).
- 2Se o navegador do seu público suportar AVIF, use-o para ganhos extras.
- 3Evite PNG para fotografias; prefira WebP ou JPG com qualidade adequada.
- 4Mantenha fallback automático via <picture> ou servidor para navegadores antigos.
Confira e ajuste as dimensões da imagem
Servir uma imagem maior que o necessário é um dos erros mais comuns que aumentam o LCP. Ajuste a resolução ao tamanho real de exibição.
- 1Compare a largura/altura do arquivo com o espaço ocupado na tela.
- 2Não sirva resolução maior que 2× a densidade de pixels do dispositivo.
- 3Use srcset e sizes para entregar variantes menores em telas estreitas.
- 4Reduza primeiro a resolução; só depois aplique compressão.
Aplique compressão na faixa ideal
Compressão excessiva estraga a imagem; compressão insuficiente deixa bytes na mesa. A faixa certa depende do formato e do uso.
- 1JPG: qualidade 80–90 para fotos e banners (boa relação peso/qualidade).
- 2WebP: qualidade 80–88 costuma ser imperceptível na maioria dos monitores.
- 3AVIF: qualidade 70–80 mantém fidelidade com economia ainda maior.
- 4Sempre compare visualmente antes de publicar; ajuste se notar artefatos.
Otimize o carregamento da imagem LCP
Mesmo uma imagem leve pode atrasar o LCP se o navegador só descobrir o recurso depois de processar CSS ou JavaScript.
- 1Adicione <link rel="preload" as="image" href="..."> para a imagem acima da dobra.
- 2Use fetchpriority="high" na tag <img> da imagem LCP.
- 3Nunca use loading="lazy" na imagem LCP — isso adia o download.
- 4Evite background-image no CSS para o LCP; prefira <img> no HTML.
Meça, compare e monitore o resultado
A otimização só está completa quando os números confirmam a melhoria. Meça antes e depois no mesmo dispositivo/condição de rede.
- 1Reexecute o PageSpeed Insights e anote o LCP antes e depois.
- 2Teste em mobile (3G/4G lento) e desktop; o LCP móvel costuma ser mais crítico.
- 3Monitore os Core Web Vitals de campo no Search Console.
- 4Repita o processo para outras páginas usando o sitemap.xml do site.
Melhores ferramentas para medir e validar o LCP
Medir o LCP corretamente é metade do trabalho. As três ferramentas abaixo cobrem desde a validação rápida até análises profundas com diferentes condições de rede.
PageSpeed Insights
Medição oficial do Google com dados de campo e laboratório
- 1Acesse pagespeed.web.dev e cole a URL da página.
- 2Aguarde a análise de Mobile e Desktop.
- 3Na aba Performance, localize o card Largest Contentful Paint.
- 4Role até Diagnósticos para ver qual elemento é o LCP.
- 5Anote o tempo e a URL da imagem antes de otimizar.
Lighthouse
Auditoria de performance dentro do Chrome DevTools
- 1Abra a página no Chrome e pressione F12 > aba Lighthouse.
- 2Selecione a categoria Performance e o dispositivo Mobile.
- 3Clique em Analyze page load e aguarde o relatório.
- 4Na seção Metrics, confira o valor de Largest Contentful Paint.
- 5Expanda View Original Trace para identificar o recurso LCP na timeline.
WebPageTest
Teste detalhado com throttling de conexão e filmstrip
- 1Acesse webpagetest.org e insira a URL da página.
- 2Escolha um local próximo dos seus usuários e conexão 4G ou 3G Fast.
- 3Marque Capture Video para ver o filmstrip de renderização.
- 4Inicie o teste e aguarde a fila e a execução.
- 5No resultado, abra a aba Performance > Largest Contentful Paint.
Quanto o LCP pode melhorar? Exemplos reais
Hero de landing page
87% economiaDica: Use WebP com fallback JPG. Pré-carregue o hero para que o navegador priorize o download.
Banner de e-commerce
87% economiaDica: AVIF é excelente para banners com áreas planas. Ofereça WebP como fallback para Safari mais antigo.
Foto de produto (PDP)
85% economiaDica: Mantenha a imagem principal em 1200-1600px de largura. Qualidade 85 é suficiente para zoom na PDP.
Imagem de blog (conteúdo)
86% economiaDica: Imagens de conteúdo raramente precisam de resolução máxima. 1200px de largura cobre a maioria dos leitores.
Antes e depois: a linha do tempo do LCP
Navegue pelos comparativos abaixo. Cada barra representa o tempo até o Largest Contentful Paint antes e depois da otimização — a barra curta é o mesmo conteúdo visual, só mais leve.
Hero de landing page
−87%Além de converter para WebP, adicione preload na imagem do hero para o navegador iniciar o download antes de processar o CSS.
Banner de e-commerce
−87%Banners com áreas planas e degradês são o melhor caso de uso de AVIF. Mantenha WebP como fallback para navegadores antigos.
Foto de produto (PDP)
−85%Sirva a imagem principal em 1200-1600px e deixe o zoom carregar sob demanda, fora do caminho crítico do LCP.
Imagem de blog
−86%Imagens de conteúdo raramente precisam de resolução máxima: 1200px de largura cobre a maioria dos leitores em desktop e mobile.
Galeria de portfólio
−89%PNG fotográfico é o pior cenário de LCP. Converter para WebP mantém a nitidez e corta a maior parte do peso.
Continue a otimização pelo site inteiro
Melhorar o LCP de uma página é o começo. Para ganhar velocidade em todo o site, vale mapear e otimizar as imagens de todas as URLs e acompanhar as melhorias ao longo do tempo.
- Otimizar imagens de um site inteiro via sitemap.xml — mapeia todas as imagens de todas as páginas e gera um ZIP otimizado.
- Estimativa de economia de uma página — mede quantos bytes e quanto tempo de carregamento você pode ganhar.
- Comprimir imagem sem perder qualidade — as faixas de qualidade ideais para cada formato.
- Diminuir a resolução de imagem — como escolher as dimensões certas para a imagem do LCP.
- Histórico de versões do LitePic — todas as melhorias de performance e novas ferramentas lançadas.
Teste a economia do seu site antes de mudar o código
Antes de otimizar todas as imagens do seu site, use o estimador de economia do LitePic para ver quantos bytes — e quanto de tempo de carregamento — você pode economizar. Basta informar a URL da página ou o sitemap.xml completo.
Perguntas frequentes sobre LCP e imagens
O que é LCP (Largest Contentful Paint)?
LCP é uma métrica do Core Web Vitals que mede o tempo que a maior imagem ou bloco de texto visível leva para ser renderizado na viewport. Quanto menor o LCP, mais rápida a página parece carregar para o usuário.
Qual é um bom valor de LCP?
O Google considera bom um LCP de até 2,5 segundos, aceitável entre 2,5 e 4 segundos e ruim acima de 4 segundos. A medição que vale para ranqueamento é a de campo (dados reais de usuários), não apenas o teste de laboratório.
Por que imagens afetam tanto o LCP?
Em muitas páginas, o maior elemento visível é uma imagem: hero, banner ou foto de produto. Se esse arquivo for pesado, o navegador demora mais para baixá-lo e renderizá-lo, aumentando o LCP e prejudicando a experiência.
Como a compressão de imagem melhora o LCP?
Arquivos menores são transferidos mais rápido pela rede. Comprimir a imagem LCP reduz o tempo de download e, consequentemente, o momento em que ela aparece na tela. A combinação de dimensões corretas + formato moderno + compressão é a forma mais eficiente de melhorar o LCP.
WebP ou AVIF: qual reduz mais o LCP?
AVIF costuma entregar arquivos menores que WebP, mas ainda não é suportado em todos os navegadores. WebP tem compatibilidade muito ampla e já entrega ganhos expressivos. Uma estratégia segura é servir AVIF com fallback automático para WebP ou JPG.
Qual qualidade usar para otimizar imagens sem perder qualidade?
Para JPG, use qualidade 80-90. Para WebP, 80-88 costuma ser imperceptível. Para AVIF, 70-80 mantém boa fidelidade com economia ainda maior. Sempre compare visualmente antes de publicar.
O preload realmente ajuda no LCP?
Sim. Quando a imagem LCP está no HTML como <img> ou background CSS, o navegador pode demorar para descobrir o recurso. O preload antecipa essa descoberta, fazendo o download começar mais cedo e reduzindo o LCP em centenas de milissegundos.
Lazy loading na imagem LCP ajuda ou piora?
Piora. A imagem responsável pelo LCP nunca deve usar loading="lazy", porque o navegador adia o download. Use lazy loading apenas em imagens abaixo da dobra e mantenha o elemento LCP com carregamento imediato, de preferência com fetchpriority="high".
Devo usar srcset e sizes para melhorar o LCP?
Sim. Com srcset e sizes o navegador escolhe a menor variante suficiente para a tela do usuário. Em mobile, isso pode significar baixar 200 KB em vez de 1 MB, reduzindo o LCP sem qualquer perda visual.
Otimizar imagens resolve o LCP sozinho?
Na maioria dos sites, a imagem é o maior gargalo, então a otimização traz o ganho mais rápido. Mas o LCP também depende do tempo de resposta do servidor (TTFB), de CSS e fontes bloqueantes e de JavaScript pesado. Comece pelas imagens e depois ataque os demais fatores.
Como saber qual imagem é o LCP da minha página?
No Chrome DevTools, abra a aba Performance, grave um carregamento e procure pelo maior elemento renderizado. No PageSpeed Insights, a seção Diagnósticos mostra o elemento LCP. No Lighthouse, a métrica aparece no relatório de Performance.
Como otimizar as imagens de LCP de um site inteiro de uma vez?
Use a análise via sitemap.xml do LitePic: informe o endereço do site, deixe o mapeamento encontrar todas as imagens de todas as páginas e otimize em lote, baixando um pacote ZIP pronto para substituir os arquivos originais.
O LitePic envia minhas imagens para algum servidor?
Não. A compressão, conversão e redimensionamento acontecem 100% no seu navegador. Nenhum arquivo é enviado para servidores, o que garante privacidade e permite otimizar imagens confidenciais.
Como o LitePic ajuda a melhorar o LCP?
O LitePic comprime, redimensiona e converte imagens para WebP diretamente no navegador, sem upload. Você pode testar a economia de bytes no estimador de economia e aplicar as mesmas configurações em todas as imagens do site.
Pronto para melhorar o LCP do seu site?
Use o LitePic para comprimir e converter as imagens do seu site. Depois, meça o LCP novamente no PageSpeed Insights e veja a diferença na velocidade percebida.