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:

1. Quais imagens estão causando problemas (não é necessariamente todas)
2. Qual é o problema específico (tamanho, formato, dimensões, lazy loading)
3. Qual é o impacto (quanto cada imagem contribui para o LCP ou peso total)
4. 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

1. Crie uma conta gratuita em gtmetrix.com
2. Insira a URL da página
3. Clique "Test your site"
4. Após a análise, vá para a aba "Structure" → filtre por "Images"
5. Veja o relatório de oportunidades de imagem
6. 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:

1. Abra DevTools (F12)
2. Clique na aba Network
3. Clique no ícone de filtro Img (ou type:image na caixa de pesquisa)
4. Recarregue a página (Ctrl+R)
5. 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:

1. Filtre por Img na aba Network
2. Olhe a coluna Type — deve mostrar "webp" ou "avif" se o servidor está convertendo
3. 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

1. Abra a página no Chrome (pode ser localhost para desenvolvimento local)
2. Abra DevTools (F12)
3. Clique na aba Lighthouse
4. Selecione categorias: pelo menos "Performance"
5. Selecione modo: "Mobile" (mais representativo)
6. Clique "Analyze page load"
7. 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:

1. Abra DevTools → aba Performance
2. Clique no ícone de gravação (círculo)
3. Recarregue a página (Ctrl+R)
4. Clique em Stop após a página carregar
5. Na linha do tempo, procure o marcador verde "LCP"
6. 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)

1. Imagem de LCP pesada: qualquer imagem identificada como o elemento de LCP com mais de 200 KB. Impacto direto no rankeamento e experiência.

2. Imagens grandes acima do fold: qualquer imagem visível na primeira tela com mais de 150-200 KB.

3. Formato errado em imagens grandes: JPG ou PNG com mais de 100 KB que poderiam ser WebP ou AVIF.

Média prioridade

4. Imagens sem lazy loading: imagens abaixo do fold sem loading="lazy" — adicionar é simples.

5. Imagens sem width/height: causam CLS — adicionar as dimensões é simples.

6. Imagens superdimensionadas: servindo 1.200px quando exibe em 400px.

Baixa prioridade

7. 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.

8. 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.