Imagyc›Artigos

Como descobrir quais imagens estão deixando seu site lento

Publicado em 11 de outubro de 2026 · 9 min de leitura

O banner aparece depois do texto. As fotos dos produtos demoram a preencher a vitrine. No computador, tudo parece normal; no celular, a página fica esperando. Antes de comprimir todos os arquivos, vale descobrir o que está acontecendo com as imagens que o navegador realmente recebe.

Para diagnosticar imagens lentas, identifique o arquivo usado na página, confira quanto ele transfere, quando começa a carregar e quanto demora para aparecer. Depois, teste uma alteração e compare o resultado nas mesmas condições.

Você pode começar sem programar. O PageSpeed Insights ajuda a localizar os problemas; o Chrome permite investigar cada arquivo. O objetivo é sair do “acho que são as fotos” e chegar a uma decisão que possa ser conferida.

Se quiser entender primeiro o impacto nas visitas e no consumo de dados, leia por que otimizar imagens. Aqui, vamos trabalhar com o diagnóstico.

1. Escolha uma página e registre o problema

Comece pela URL em que a dificuldade acontece: um produto, uma página de vendas ou um artigo. Testar somente a página inicial pode deixar o problema real de fora.

Anote o que você vê e onde: “a foto principal demora no celular”, “a galeria trava ao abrir” ou “o texto muda de posição quando o banner aparece”. Isso ajuda a escolher o teste e verificar depois se a mudança resolveu o sintoma.

Registre também o endereço, o dia, o dispositivo e se o teste foi feito com arquivos já guardados no navegador. Guarde uma captura da página e dos resultados iniciais, sem dados pessoais ou de clientes.

Para começar, escolha uma única página e um problema bem definido. A mesma correção pode servir a outras páginas, mas essa conclusão vem depois da primeira verificação.

2. Use o PageSpeed para localizar os pontos de atenção

Abra o PageSpeed Insights, informe a URL publicada e execute a análise. Confira separadamente celular e computador. O relatório reúne um teste de laboratório e, quando disponíveis, dados de usuários reais.¹

Na parte de diagnóstico, procure informações sobre entrega de imagens, LCP e mudanças de layout. Os rótulos podem variar conforme a versão e o idioma da ferramenta. Abra os detalhes, em vez de olhar apenas a nota geral.

O insight Improve image delivery, ou equivalente em português, aponta oportunidades de redução de dados. A economia indicada é uma estimativa, não o peso garantido do arquivo que você vai gerar nem uma previsão de ganho em segundos.²

Faça uma lista curta dos arquivos destacados. Para cada um, registre URL, economia estimada e função na página. Uma foto principal e uma imagem no fim de um artigo podem exigir prioridades diferentes, mesmo que tenham o mesmo peso.

Confira se os dados são da página ou do domínio

Os dados reais abrangem os últimos 28 dias e precisam de amostras suficientes.³ O PageSpeed pode mostrar informações da origem, em vez da URL, ou não mostrar dados reais.¹ Verifique a identificação; ausência de dados não demonstra bom desempenho.

Um teste de laboratório permite investigar uma mudança imediata. O histórico de usuários reais ajuda a avaliar o comportamento do público ao longo do tempo. Guarde os dois resultados com seus respectivos contextos.

3. Descubra quais arquivos o Chrome está baixando

Abra a página no Chrome e siga este roteiro:

1. Clique com o botão direito e escolha Inspecionar.
2. Abra a aba Network, ou Rede.
3. Recarregue a página com o painel aberto.
4. Use o filtro de imagens, normalmente Img.
5. Ordene por Size, ou Tamanho, para localizar as maiores transferências.⁴

Passe o mouse sobre o nome para conferir o endereço completo. Clique no arquivo e veja a prévia. Assim você associa a linha do relatório ao banner, à miniatura ou à foto que aparece na página.

O arquivo entregue pode ser diferente daquele enviado ao editor. O site pode gerar tamanhos, converter formatos ou utilizar uma CDN. Investigue a URL da requisição real antes de decidir qual original alterar.

Faça uma comparação com e sem cache

No painel Network, Disable cache desativa o cache do navegador enquanto o DevTools está aberto. Recarregue e registre esse teste. Depois, desmarque a opção e observe uma visita com cache. Mantenha os resultados separados.⁵

Se houver Service Worker ou uma camada de cache do aplicativo, o arquivo ainda pode ser servido por ela. Verifique a origem indicada na requisição. O teste sem cache do navegador não comprova, sozinho, que todas as camadas foram eliminadas.⁶

Peso, tempo e transferência são medidas diferentes

Size ajuda a conferir bytes transferidos e tamanho do recurso; Time representa a duração da requisição. Em Timing, a duração é dividida em etapas, como espera pela resposta e recebimento do conteúdo. Um tempo alto não identifica sozinho uma imagem mal comprimida.⁵

Também não some os tempos de todas as fotos para prever o tempo da página: as requisições podem se sobrepor. Registre quais imagens atrasam o conteúdo que você está investigando, não apenas quais apresentam o maior número na coluna.

4. Compare dimensões do arquivo e espaço de exibição

Uma foto de catálogo pode ter 3.000 pixels de largura e aparecer em um cartão de 300 pixels CSS. Essa diferença merece investigação, especialmente se o cartão usa o mesmo arquivo destinado ao zoom.

Confira a largura exibida pelo elemento no painel Elements, ou Elementos. Depois, obtenha as dimensões em pixels do arquivo realmente entregue, pela prévia ou pelas propriedades da imagem salva. Não use como referência apenas o original da biblioteca.

Considere a densidade da tela: uma imagem exibida com 400 pixels CSS de largura pode aproveitar uma versão de 800 pixels em uma tela 2x. O site pode oferecer candidatos com srcset e sizes, para o navegador escolher conforme o contexto.⁷

Se o endereço requisitado continua apontando para uma versão enorme numa tela estreita, examine a configuração responsiva. O navegador pode precisar de uma versão maior para densidade ou ampliação; confirme o uso antes de cortar resolução.

Para aprofundar essa escolha, consulte resolução de imagens para desktop e celular. O diagnóstico fica mais confiável quando relaciona pixels, espaço de exibição e função da imagem.

5. Verifique se a imagem atrasa o conteúdo principal

No Chrome, abra Performance, grave um recarregamento da página e examine o evento de LCP e os insights associados. Quando o elemento medido é uma imagem, relacione-o à URL que você encontrou em Network.⁸

LCP acompanha a aparição do maior conteúdo elegível na área visível. Dependendo da página e da tela, esse elemento pode ser texto ou outro conteúdo. Um LCP ruim não comprova que todas as fotos estão pesadas.⁹

O detalhamento permite separar as etapas:

Essas etapas são definidas na documentação de LCP. Uma imagem pode sofrer com início tardio, carregamento demorado ou atraso de exibição após o carregamento.¹⁰

Se a imagem começa a carregar tarde

Confira se ela usa loading="lazy", depende de JavaScript para entrar na página ou não é descoberta cedo. A imagem de LCP deve estar acessível ao navegador desde o início; prioridade alta pode ser apropriada para esse recurso.¹¹

Se a requisição demora

Confira bytes e Timing. Há muitos dados recebidos ou a maior espera acontece antes da resposta? A primeira situação justifica comparar dimensões e compressão; a segunda pede investigação da entrega. Pode haver mais de um problema.

Se o arquivo já chegou, mas a imagem não aparece

Examine o atraso de renderização. Código, estilos ou condições de exibição podem manter o conteúdo esperando. Reduzir o arquivo pode economizar dados sem resolver esse atraso.⁹

6. Transforme as observações em uma prioridade

A tabela abaixo é um exemplo editorial de investigação. Os valores são hipotéticos, não medições do Imagyc nem limites do Google.

Reservar espaço para imagens ajuda a evitar mudanças de layout, mas uma página também pode mudar por outros motivos. Confirme qual elemento provocou o deslocamento.¹²

Uma ordem prática é investigar primeiro a imagem ligada ao conteúdo principal, depois as transferências grandes já presentes na primeira tela e, em seguida, as galerias. Ajuste essa ordem ao problema que você registrou no começo.

7. Corrija uma hipótese e confira o arquivo publicado

Quando a evidência aponta excesso de dados, faça uma cópia do arquivo e teste a compressão ou conversão no Imagyc. Compare dimensões, peso e detalhes importantes, como letras, textura e acabamento de produto.

O guia de formatos JPEG, PNG, WebP, AVIF e JXL ajuda a escolher candidatos. Uma versão menor só é útil se o destino aceita o formato e a imagem continua cumprindo sua função.

Após publicar, volte a Network e confirme a nova URL e os bytes recebidos. Se o site ainda entrega a versão antiga, examine cache e referências da página antes de concluir que a otimização falhou.

Uma mudança de nome também exige atualizar os locais que usam o arquivo. Veja como nomear imagens para SEO para organizar a exportação sem deixar referências quebradas.

8. Compare antes e depois com critérios consistentes

Como protocolo prático, faça três execuções antes e três depois, mantendo URL, perfil de dispositivo, rede simulada e condição de cache. Registre os resultados e compare a mediana e a variação; três testes não representam toda a audiência, mas ajudam a evitar uma conclusão baseada numa única execução.

Não compare diretamente um recarregamento rápido no seu computador com o teste mobile simulado do PageSpeed. Escolha uma ferramenta e preserve suas condições em cada comparação.

O modo de dispositivo do Chrome ajuda a aproximar tela, rede e processamento, mas não reproduz completamente um telefone. Faça uma conferência em aparelho real.¹³

A nota do Lighthouse depende de métricas e pode variar. Economizar bytes não assegura uma subida proporcional na nota. Compare também a medida ligada ao problema e a aparência da página.¹⁴

Perguntas frequentes

Toda imagem acima de 100 KB está errada?

Não. Uma miniatura e uma foto ampliável têm funções diferentes. O peso precisa ser avaliado junto com dimensões, qualidade e momento de carregamento. Um limite isolado não faz esse diagnóstico.

Por que comprimi a imagem e o LCP quase não mudou?

Verifique primeiro se a página entrega o novo arquivo. Depois, examine as etapas do LCP: o gargalo pode estar antes do download ou na exibição. Use a economia de dados como um resultado separado da melhora de tempo.

Posso usar apenas a nota do PageSpeed?

Use os detalhes para decidir o que corrigir. A nota geral ajuda a acompanhar o conjunto, mas não identifica sozinha qual foto causa o sintoma observado.

WebP e AVIF também precisam ser investigados?

Sim. A extensão não mostra se a dimensão é adequada, se o arquivo foi bem exportado ou se a requisição começa no momento certo.

Como sei que terminei?

Volte à observação inicial. A imagem importante aparece melhor? O site entrega a versão desejada? Os dados diminuíram quando esse era o objetivo? A qualidade permanece adequada? Guarde o registro e repita a verificação quando trocar banners, layouts ou ferramentas.

Comece por uma página importante e um arquivo identificável. O diagnóstico fica útil quando cada alteração responde a uma observação concreta e pode ser conferida no site publicado.