Auditor de imagens web

O que o auditor analisa

As imagens costumam ser mais da metade do peso de uma página web e, na maioria dos casos, o elemento que determina o LCP (Largest Contentful Paint), a métrica dos Core Web Vitals mais difícil de aprovar. Mesmo assim, revisar uma a uma todas as imagens de uma página com as ferramentas do navegador é cansativo.

Este auditor baixa o HTML da URL que você indicar, localiza todas as tags <img> (incluindo as que usam <picture>, srcset ou plugins de lazy loading com data-src), mede cada imagem e verifica oito problemas concretos:

1. Imagem LCP com loading="lazy": o erro que mais penaliza o LCP.
2. Imagem LCP sem prioridade: sem fetchpriority="high" nem <link rel="preload">.
3. Imagens pesadas: mais de 200 KB (e mais de 500 KB como problema grave).
4. Formatos antigos: JPEG ou PNG com mais de 100 KB sem alternativa WebP ou AVIF.
5. Falta de width e height: causa saltos de conteúdo (CLS).
6. Sem srcset: o celular baixa a mesma imagem que o desktop.
7. Imagens fora da tela sem lazy loading: disputam com a imagem principal.
8. Sem atributo alt: afeta a acessibilidade e o SEO de imagens.

Com tudo isso, ele calcula uma pontuação de 0 a 100 e uma estimativa de economia se as imagens JPEG e PNG fossem servidas em formatos modernos.

Como usar

1. Digite ou cole a URL completa da página, por exemplo https://seusite.com/produto/tenis. Ele analisa só essa página, não o site inteiro, então teste também seus modelos mais importantes: página inicial, página de produto, artigo do blog.
2. Clique em Analisar imagens. A análise leva de 3 a 10 segundos, dependendo do número de imagens e da velocidade do servidor.
3. Revise O que melhorar: os problemas aparecem ordenados por gravidade, com uma explicação e um link para o guia que explica como resolvê-los.
4. Desça até Imagens analisadas para ver o detalhe de cada arquivo: formato, peso, dimensões declaradas e avisos.
5. Use Copiar link do relatório para compartilhá-lo com sua equipe ou cliente: o link refaz a análise com a mesma URL.

Como interpretar os resultados

A pontuação

Parte de 100 e desconta pontos por cada problema, com um teto por tipo para que uma única categoria não derrube a nota. Uma página com 90 ou mais tem as imagens bem resolvidas; entre 50 e 89 há melhorias claras e rápidas; abaixo de 50 as imagens estão prejudicando seriamente o desempenho.

Não é a pontuação do Lighthouse nem a substitui: o Lighthouse mede o carregamento real em um navegador simulado e este auditor revisa a marcação e os arquivos. Eles são complementares, e os problemas que este auditor detecta estão entre os que mais sobem a nota do Lighthouse quando corrigidos.

A imagem "provável LCP"

O auditor marca como provável LCP a primeira imagem de conteúdo do documento, descartando logotipos, ícones e SVG. Na maioria das páginas iniciais, páginas de produto e artigos ele acerta, mas se a sua imagem principal for um fundo CSS ou for desenhada por JavaScript, ele não a verá. Para confirmar, abra o DevTools do Chrome, aba Performance, e procure o marcador LCP.

A economia estimada

É calculada aplicando a cada imagem JPEG ou PNG sinalizada as economias médias do WebP (≈30%) e do AVIF (≈50%) com qualidade visual equivalente. É uma referência: uma foto já muito comprimida vai economizar menos, e um PNG exportado sem otimização pode economizar mais de 80%. Para saber o número exato, passe as imagens pelo otimizador do ImageZap e compare.

Como resolver os problemas mais comuns

A imagem LCP carrega de forma adiada. É muito comum em temas de WordPress e em componentes que aplicam loading="lazy" a todas as imagens. Remova-o da imagem principal e adicione prioridade:

<img src="/hero.avif" width="1600" height="900" alt="…" fetchpriority="high">

Formatos antigos. Converta as imagens para AVIF com WebP e JPEG de fallback e sirva-as com <picture>. O otimizador gera os três formatos de uma vez e entrega o código; explicamos isso a fundo no guia de <picture> e formatos de fallback.

Sem width e height. Adicione as dimensões reais do arquivo. Isso não faz a imagem deixar de ser responsiva se o seu CSS tiver max-width: 100%; height: auto;, e permite que o navegador reserve o espaço antes de baixá-la.

Imagens pesadas sem srcset. Gere variantes de 640, 1280 e 1920 px e declare srcset e sizes. O gerador de srcset faz isso em um passo, e no guia de imagens responsivas há exemplos para os layouts mais comuns.

Limitações

• Só o HTML do servidor. O JavaScript não é executado. Em sites feitos só com React, Vue ou Angular sem renderização no servidor, as imagens não estão no HTML e o auditor vai avisar.
• Não analisa CSS. Imagens de fundo (background-image) não são incluídas.
• Até 40 imagens por página. As primeiras do documento são as que mais afetam o carregamento.
• Sites que bloqueiam robôs. Alguns firewalls (Cloudflare em modo estrito, por exemplo) recusam requisições automáticas. Nesse caso você verá um erro de conexão.

Privacidade e segurança

Para analisar a página, nosso servidor baixa o HTML público e consulta o tamanho de cada imagem, como um navegador faria. Não guardamos a URL nem o resultado: o relatório é calculado, enviado ao seu navegador e descartado (a rede de distribuição pode manter a resposta em cache por alguns minutos para não repetir a análise). Só é possível analisar endereços públicos: IPs privados, locais ou de intranet são bloqueados.

Perguntas frequentes

É grátis? Tem limite?

É grátis e sem cadastro. Para evitar abusos há um limite de poucas análises por minuto a partir da mesma conexão, mais que suficiente para um uso normal.

Por que o resultado é diferente do PageSpeed Insights?

O PageSpeed Insights carrega a página em um navegador e mede tempos reais (ou dados de usuários reais). Este auditor revisa a marcação e os arquivos de imagem. Muitas recomendações coincidem, mas as pontuações não são comparáveis.

Posso analisar um site em localhost ou na minha intranet?

Não. Por segurança, só são aceitos endereços públicos nas portas 80 e 443. Para ambientes locais, use o Lighthouse no DevTools do Chrome.

Por que aparece "tamanho desconhecido" em algumas imagens?

Porque o servidor dessa imagem não informa o tamanho nos cabeçalhos ou recusou a consulta. Acontece com alguns CDNs de imagens e servidores com proteção contra robôs.

Ele detecta imagens carregadas com JavaScript?

Não, apenas as presentes no HTML que o servidor retorna. Se o seu site usa renderização no servidor (Next.js, Nuxt, Astro, WordPress…), todas estarão lá.

Como otimizo as imagens que ele aponta?

Baixe-as, solte-as no otimizador e gere AVIF e WebP com o código <picture> incluído. Tudo é processado no seu navegador.