Como Testar se Suas Imagens Estão Otimizadas

Otimizar imagens sem medir o resultado é como fazer dieta sem se pesar. Você pode estar fazendo progresso — ou não — e nunca saberá ao certo. Felizmente, existem ferramentas gratuitas e poderosas para auditar imagens de um site, identificar problemas específicos, e medir o impacto após a otimização.

Neste artigo, você vai aprender a usar o Google PageSpeed Insights, o GTmetrix e o Chrome DevTools para auditar suas imagens com precisão. Vamos ver o que cada ferramenta reporta, como interpretar os resultados, como corrigir usando o MKT com Marcos — Compressor de Imagens, e como montar um checklist final de imagem otimizada.

Por que medir antes de otimizar?

Antes de comprar qualquer produto ou serviço, você pesquisa reviews. Antes de mudar a dieta, faz exames. A otimização de imagens não deveria ser diferente — você precisa saber:

Quais imagens estão causando problemas (não é necessariamente todas)
Qual é o problema específico (tamanho, formato, dimensões, lazy loading)
Qual é o impacto (quanto cada imagem contribui para o LCP ou peso total)
Como verificar que a correção funcionou

As ferramentas a seguir respondem todas essas perguntas.

Ferramenta 1: Google PageSpeed Insights

O PageSpeed Insights (PSI) é a ferramenta oficial do Google para medir performance de páginas web. É gratuita, não requer conta, e os dados que ela usa são os mesmos que o Google considera no rankeamento.

Como acessar

Acesse pagespeed.web.dev e digite a URL da página que quer analisar.

O que o PageSpeed reporta sobre imagens

Opportunities (Oportunidades) — seção mais importante para imagens:

“Serve images in next-gen formats”
– O que significa: você está usando JPG ou PNG onde WebP ou AVIF seria menor
– O que mostra: lista de URLs das imagens problemáticas, tamanho atual, tamanho potencial
– Como resolver: converter para WebP ou AVIF com o MKT com Marcos — Compressor de Imagens
– Impacto típico: redução de 25-60% no peso das imagens apontadas

“Properly size images”
– O que significa: você está servindo imagens maiores que o necessário
– O que mostra: dimensões atuais vs dimensões de exibição, economia potencial em KB
– Como resolver: redimensionar para as dimensões de exibição (o programa faz isso)
– Exemplo comum: imagem de 2.400×1.600px exibida em 800×534px — 9x mais pixels que necessário

“Efficiently encode images”
– O que significa: as imagens estão em formato correto mas mal comprimidas (qualidade muito alta)
– O que mostra: tamanho atual vs tamanho otimizado, economia potencial
– Como resolver: recomprimir com qualidade mais baixa (75-85 para fotos)

“Defer offscreen images”
– O que significa: imagens fora da viewport estão sendo baixadas imediatamente
– Como resolver: adicionar loading="lazy" nas tags <img> abaixo do fold

“Image elements do not have explicit width and height”
– O que significa: tags <img> sem atributos width/height — causa CLS
– Como resolver: adicionar as dimensões no HTML

Como ler os números

O PSI mostra o impacto de cada oportunidade em segundos (impacto estimado no LCP). Foque nas oportunidades com maior impacto primeiro — geralmente “Properly size images” e “Serve images in next-gen formats” são as maiores.

A pontuação geral (0-100) é útil como resumo, mas o que importa para o SEO é o valor de LCP em segundos, não a pontuação em si.

Dica importante

Analise tanto a versão Mobile quanto Desktop — o PageSpeed alterna entre as duas com botões no topo. As condições simuladas são diferentes, e problemas de imagem frequentemente são mais graves em mobile.

Ferramenta 2: GTmetrix

O GTmetrix é uma ferramenta de análise de performance com mais detalhes que o PageSpeed Insights, especialmente útil para entender o carregamento completo da página com waterfall.

Como acessar

Acesse gtmetrix.com. A conta gratuita permite análises básicas; a conta paga adiciona mais locais de teste e histórico.

O que o GTmetrix oferece além do PageSpeed

Waterfall chart (gráfico cascata)

O waterfall mostra visualmente todos os recursos baixados pela página em ordem cronológica:
– Eixo X: tempo (em milissegundos)
– Eixo Y: lista de recursos (HTML, CSS, JS, imagens)
– Cores: diferentes fases (DNS, conexão, download, processamento)

Para imagens, o waterfall revela:
– Quais imagens são baixadas primeiro vs. depois
– Quais imagens são o gargalo (barras longas no eixo X)
– Se imagens estão em paralelo ou serial
– Quais imagens poderiam ter loading="lazy" (as que aparecem muito depois do início)

Aba “Images”

O GTmetrix tem uma aba dedicada a imagens que mostra:
– Lista de todas as imagens na página
– Tamanho atual de cada uma
– Tamanho potencial após otimização
– Porcentagem de economia possível
– Se é uma imagem de LCP candidata

Análise histórica

Você pode salvar relatórios e comparar antes vs. depois da otimização — útil para demonstrar o impacto das mudanças.

Como usar o GTmetrix para auditoria de imagens

Crie uma conta gratuita em gtmetrix.com
Insira a URL da página
Clique “Test your site”
Após a análise, vá para a aba “Structure” → filtre por “Images”
Veja o relatório de oportunidades de imagem
Vá para “Waterfall” → clique em qualquer imagem para ver detalhes do tempo de download

Ferramenta 3: Chrome DevTools

O Chrome DevTools está disponível em qualquer computador com Chrome — sem precisar de URL pública, sem precisar de conta. É ideal para testar em desenvolvimento local.

Como abrir

Pressione F12 (ou Ctrl+Shift+I no Windows, Cmd+Option+I no Mac) em qualquer página no Chrome.

Aba Network: auditoria básica de imagens

A aba Network é sua primeira parada para auditar imagens:

Abra DevTools (F12)
Clique na aba Network
Clique no ícone de filtro Img (ou type:image na caixa de pesquisa)
Recarregue a página (Ctrl+R)
Observe:

Colunas relevantes:
– Name: nome do arquivo e URL
– Status: código HTTP (200 = OK, 304 = cache, 404 = não encontrado)
– Type: formato da imagem (jpeg, webp, png, etc.)
– Size: tamanho em KB transferido (pode ser diferente do tamanho real se comprimido pelo servidor)
– Time: tempo de download em ms

Linha de totais: no rodapé da lista, veja o total de imagens baixadas e o peso total.

Sinalização de problemas:
– Imagens com Size > 200 KB: candidatas a otimização
– Imagens com Type = jpeg ou png (não webp): candidatas para conversão
– Imagens com Time > 500ms: provavelmente grandes demais para conexões lentas

Aba Network: verificar se WebP está sendo servido

Muitos CDNs e servidores convertem automaticamente imagens para WebP quando o browser suporta. Para verificar se sua configuração está funcionando:

Filtre por Img na aba Network
Olhe a coluna Type — deve mostrar “webp” ou “avif” se o servidor está convertendo
Clique em uma imagem na lista → aba Headers → veja “Content-Type: image/webp”

Se o Content-Type ainda é “image/jpeg” mas você esperava WebP, seu servidor não está configurado para conversão automática — por isso converter manualmente com o MKT com Marcos e fazer o upload dos arquivos WebP é a solução mais confiável.

Aba Lighthouse: auditoria completa sem URL pública

Abra a página no Chrome (pode ser localhost para desenvolvimento local)
Abra DevTools (F12)
Clique na aba Lighthouse
Selecione categorias: pelo menos “Performance”
Selecione modo: “Mobile” (mais representativo)
Clique “Analyze page load”
Aguarde 30-60 segundos

O Lighthouse gera um relatório completo com:
– Pontuação de performance (0-100)
– Valor de LCP, CLS, INP
– Oportunidades com imagens (mesmo que o PageSpeed Insights, mas local)
– Diagnósticos adicionais

Aba Performance: ver o LCP acontecer

Para uma análise mais profunda do LCP:

Abra DevTools → aba Performance
Clique no ícone de gravação (círculo)
Recarregue a página (Ctrl+R)
Clique em Stop após a página carregar
Na linha do tempo, procure o marcador verde “LCP”
Clique nele para ver qual elemento foi o LCP e em que momento ocorreu

Isso confirma exatamente qual imagem está causando o LCP e quanto tempo levou.

Como interpretar os resultados e priorizar ações

Após rodar as três ferramentas, você terá uma lista de problemas. Priorize assim:

Alta prioridade (resolver primeiro)

Imagem de LCP pesada: qualquer imagem identificada como o elemento de LCP com mais de 200 KB. Impacto direto no rankeamento e experiência.
Imagens grandes acima do fold: qualquer imagem visível na primeira tela com mais de 150-200 KB.
Formato errado em imagens grandes: JPG ou PNG com mais de 100 KB que poderiam ser WebP ou AVIF.

Média prioridade

Imagens sem lazy loading: imagens abaixo do fold sem loading="lazy" — adicionar é simples.
Imagens sem width/height: causam CLS — adicionar as dimensões é simples.
Imagens superdimensionadas: servindo 1.200px quando exibe em 400px.

Baixa prioridade

Imagens pequenas em formato não-moderno: se uma imagem já é 20 KB em JPG, converter para WebP economiza só 5-8 KB — impacto mínimo.
Imagens em cache por longo tempo: não é problema de imagem, mas de política de cache.

Como corrigir com o MKT com Marcos

Após identificar as imagens problemáticas, o MKT com Marcos — Compressor de Imagens resolve as causas técnicas:

Problema: imagem muito pesada (tamanho de arquivo alto)
– Solução no programa: comprimir com qualidade 75-85, converter para WebP ou AVIF

Problema: imagem superdimensionada (pixels desnecessários)
– Solução no programa: usar o recurso de redimensionamento — defina a largura máxima de exibição

Problema: formato não-moderno (JPG, PNG)
– Solução no programa: converter para WebP ou AVIF em lote

Processo recomendado:
1. Identifique as imagens problemáticas com as ferramentas acima
2. Localize os arquivos originais no seu computador
3. Abra o MKT com Marcos — Compressor de Imagens
4. Configure: formato WebP, qualidade 82, redimensionamento para largura máxima de exibição
5. Processe em lote
6. Faça upload das imagens otimizadas para o site
7. Re-teste no PageSpeed Insights e GTmetrix

Checklist final de imagem otimizada

Uma imagem está verdadeiramente otimizada quando passa em todos esses critérios:

Arquivo

[ ] Formato: WebP ou AVIF (ou JPG com mozjpeg se compatibilidade universal necessária)
[ ] Tamanho: < 100 KB para imagens de conteúdo, < 200 KB para heroes
[ ] Dimensões: não mais que 2x a largura máxima de exibição
[ ] Metadados EXIF: removidos (para web)

HTML

[ ] Tag <img> com atributos width e height definidos
[ ] loading="lazy" para imagens abaixo do fold
[ ] loading="eager" ou sem loading para imagens na primeira viewport
[ ] fetchpriority="high" na imagem de LCP
[ ] alt descritivo preenchido
[ ] <picture> com fallbacks se usando AVIF (para navegadores sem suporte)

Performance verificada

[ ] PageSpeed Insights não reporta mais “Serve images in next-gen formats” para as imagens corrigidas
[ ] PageSpeed Insights não reporta “Properly size images” para as imagens corrigidas
[ ] LCP < 2,5 segundos
[ ] CLS < 0,1

Perguntas Frequentes

Com que frequência devo auditar as imagens do meu site?
Para sites de conteúdo atualizado regularmente: mensalmente. Para e-commerce com muitos produtos novos: semanalmente ou sempre que publicar um novo lote de produtos. Para sites estáticos: uma vez a cada grande atualização de design.

O PageSpeed Insights e o GTmetrix dão resultados diferentes. Qual acreditar?
Ambos são válidos mas medem em condições ligeiramente diferentes (localização do servidor de teste, versão do Chrome). Para SEO, priorize o PageSpeed — usa os mesmos dados que o Google. Use o GTmetrix para análise de waterfall e comparação histórica.

Otimizei as imagens mas o LCP não melhorou. O que pode ser?
O LCP pode ter outras causas: TTFB alto (servidor lento), JavaScript bloqueando o render, ou outra imagem/elemento maior que você não otimizou. Verifique no DevTools qual elemento é identificado como LCP.

Como saber se o servidor está servindo WebP automaticamente?
Na aba Network do DevTools, clique em uma imagem → Headers → veja “Content-Type”. Se for “image/webp”, o servidor está convertendo. Se ainda for “image/jpeg” mesmo com arquivo WebP no servidor, verifique a configuração de MIME types ou Content Negotiation.

Preciso de conta no GTmetrix?
A conta gratuita é suficiente para análises básicas. Você pode fazer análises sem conta mas os relatórios não são salvos. A conta gratuita salva histórico — útil para comparar antes e depois.

O que significa o número CLS de 0,35 — é muito?
Sim, 0,35 está na faixa “Ruim” (> 0,25). Significa que elementos da página estão se movendo significativamente durante o carregamento. Para imagens, adicionar width e height no HTML geralmente resolve.

Conclusão: medir, corrigir, medir de novo

A otimização de imagens é um processo iterativo: você mede, encontra os problemas específicos, corrige com o MKT com Marcos — Compressor de Imagens, e mede de novo para confirmar que o problema foi resolvido. Sem medir, você está operando no escuro.

Com PageSpeed Insights, GTmetrix e Chrome DevTools — todas ferramentas gratuitas — você tem visibilidade completa do estado das suas imagens e do impacto de cada melhoria.

Comece agora: abra o pagespeed.web.dev, insira a URL do seu site, e veja quais imagens estão pesando mais. Depois use o MKT com Marcos — Compressor de Imagens para corrigir os problemas encontrados.

Baixe o programa em mktcommarcos.com.br/aplicacoes/compressor-de-imagens e comece sua auditoria hoje.