Como Otimizar Imagens para Site e Melhorar o PageSpeed

Velocidade de carregamento é um fator de ranqueamento confirmado pelo Google desde 2018 para desktop e desde 2021 para mobile. Mais do que isso, ela afeta diretamente a taxa de conversão: cada segundo a mais de carregamento aumenta o abandono da página em até 32%, segundo dados do próprio Google. E em e-commerce, estudos da Portent mostram que páginas que carregam em 1 segundo convertem até 3 vezes mais do que páginas que demoram 5 segundos.

Imagens são tipicamente responsáveis por 50–80% do peso total de uma página web. Otimizá-las corretamente é, portanto, a intervenção de maior impacto na performance de qualquer site.

O que o PageSpeed Insights avalia nas imagens

O Google PageSpeed Insights (PSI) analisa sua página e sinaliza problemas relacionados a imagens em várias categorias. As mais comuns são:

• "Veicule imagens em formatos de última geração": aparece quando o site usa JPG ou PNG onde WebP (ou AVIF) reduziria o tamanho significativamente.
• "Dimensione as imagens corretamente": aparece quando a imagem enviada ao servidor é maior do que o espaço onde ela é exibida. Exemplo: enviar uma foto de 2000px para exibir em 400px.
• "Adie imagens fora da tela": aparece quando imagens abaixo do fold são carregadas junto com o restante da página, em vez de só quando o usuário rola até elas (lazy loading).
• "Codifique imagens de modo eficiente": aparece quando a compressão aplicada às imagens ainda tem margem para redução sem perda de qualidade perceptível.
• "Imagem LCP": identifica qual imagem é o Largest Contentful Paint da página — o elemento principal que determina uma das métricas Core Web Vitals.

Os 6 princípios de otimização de imagens para web

1. Use o formato certo para cada tipo de imagem

A escolha do formato é a decisão de maior impacto antes mesmo de qualquer compressão:

O WebP produz arquivos 25–35% menores que JPG e 20–30% menores que PNG com qualidade visual equivalente. Em 2026, a compatibilidade é superior a 97% dos navegadores em uso — não há mais razão técnica para evitá-lo em sites novos.

2. Comprima sem abrir mão da qualidade visível

Compressão é o processo de reduzir o tamanho do arquivo mantendo as dimensões da imagem. Para fotos JPG, reduzir a qualidade de 100% para 80% produz arquivos 5–10 vezes menores com diferença imperceptível na tela. Esse é o intervalo ideal para a web.

Referências práticas de peso por tipo de imagem:

• Hero / banner principal: abaixo de 200 KB
• Foto de produto (e-commerce): 50–150 KB
• Imagem de artigo de blog: 50–120 KB
• Thumbnail / miniatura: 10–30 KB
• Logo (PNG/WebP): abaixo de 30 KB
• Ícones SVG: abaixo de 5 KB

3. Envie imagens nas dimensões reais de exibição

Esse é o erro mais comum e também um dos mais impactantes: enviar imagens muito maiores do que o espaço onde elas são exibidas. O navegador baixa a imagem completa e depois descarta os pixels excedentes ao renderizar.

Exemplos do custo desse erro:

• Uma foto de produto de 3000×3000px exibida num quadro de 600×600px: o navegador baixa 9 milhões de pixels e usa apenas 360 mil — 96% de desperdício.
• Um banner de 4000px de largura num site que tem layout máximo de 1440px: 63% dos pixels baixados são descartados imediatamente.

A regra é simples: a imagem enviada ao servidor deve ter no máximo o dobro das dimensões de exibição (o dobro para cobrir telas Retina/HiDPI). Para um espaço de 600px de largura, envie no máximo 1200px.

Use o Redimensionador de Imagem do ImageTools para ajustar as dimensões antes do upload, inserindo os valores exatos em pixels ou percentual.

4. Implemente lazy loading

Lazy loading é a técnica de carregar imagens somente quando elas estão prestes a entrar na área visível da tela, em vez de baixar todas as imagens da página de uma vez no carregamento inicial. O impacto é significativo: em páginas com muitas imagens (como listagens de produtos ou artigos longos), o lazy loading pode reduzir o peso inicial da página em 60–80%.

A implementação mais simples é nativa no HTML moderno — basta adicionar o atributo loading="lazy" às tags de imagem:

<!-- Imagem que deve carregar imediatamente (acima do fold) -->
<img src="banner-principal.webp" alt="Banner" loading="eager">

<!-- Imagens que podem esperar (abaixo do fold) -->
<img src="produto-1.webp" alt="Produto 1" loading="lazy">
<img src="produto-2.webp" alt="Produto 2" loading="lazy">

Importante: nunca aplique loading="lazy" à imagem principal acima do fold (hero, banner, primeira foto de produto). Isso atrasa o LCP — a métrica mais importante dos Core Web Vitals — e prejudica diretamente a nota no PageSpeed.

5. Defina width e height nas tags de imagem

Quando o navegador começa a carregar uma página, ele constrói o layout antes de saber o tamanho das imagens. Se width e height não estão definidos, o navegador não reserva o espaço correto — e quando a imagem carrega, o layout "pula", deslocando o texto e os botões. Isso é o que o PageSpeed mede como Cumulative Layout Shift (CLS), outro Core Web Vital.

<!-- Sem dimensões: causa layout shift -->
<img src="produto.webp" alt="Produto">

<!-- Com dimensões: reserva o espaço correto desde o início -->
<img src="produto.webp" alt="Produto" width="600" height="600">

Os valores de width e height no HTML não precisam corresponder ao tamanho de exibição visual — eles apenas definem a proporção. O CSS cuida do tamanho de exibição.

6. Use imagens responsivas com srcset

A tag srcset permite fornecer versões diferentes de uma imagem para dispositivos diferentes — enviando uma imagem menor para celulares e maior para desktops. O navegador escolhe automaticamente a versão mais adequada para a tela do usuário.

<img
  src="produto-800.webp"
  srcset="produto-400.webp 400w,
          produto-800.webp 800w,
          produto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Produto"
  width="800"
  height="800"
  loading="lazy"
>

Para e-commerces com muitas fotos de produto, srcset pode reduzir o volume de dados transferidos para usuários mobile em 40–60%.

Checklist completo de otimização de imagens

Use esta lista antes de publicar qualquer página ou atualizar imagens existentes:

• ☐ Imagens em WebP (ou SVG para vetoriais)
• ☐ Compressão aplicada — fotos abaixo de 150 KB sempre que possível
• ☐ Dimensões corretas — não maior que o dobro do espaço de exibição
• ☐ loading="lazy" em todas as imagens abaixo do fold
• ☐ loading="eager" (ou sem atributo) na imagem principal acima do fold
• ☐ width e height definidos em todas as tags <img>
• ☐ Atributo alt descritivo em todas as imagens (acessibilidade + SEO)
• ☐ srcset para imagens que aparecem em tamanhos muito diferentes entre mobile e desktop
• ☐ Imagem LCP sem loading="lazy" e com fetchpriority="high" se possível

Otimização por plataforma

WordPress

O WordPress converte automaticamente para WebP a partir da versão 6.1 se o servidor suportar. Para garantir: instale um plugin de otimização como Imagify, ShortPixel ou Smush — eles comprimem, convertem para WebP e adicionam lazy loading automaticamente nas imagens já existentes na biblioteca de mídia.

Shopify

O Shopify converte imagens para WebP automaticamente e serve a versão correta por dispositivo desde 2021. O que o lojista precisa controlar manualmente é o tamanho das imagens enviadas — o recomendado é 2048×2048px para fotos de produto, que o Shopify redimensiona para cada contexto de exibição.

Wix, Squarespace e outros construtores

A maioria dos construtores modernos já aplica compressão e lazy loading automaticamente. O que ainda depende do usuário é enviar imagens com dimensões razoáveis — enviar fotos de câmera de 8 MB sobrecarrega o servidor e pode resultar em variantes maiores do que o necessário.

Sites HTML/CSS puros ou frameworks (Next.js, Nuxt, etc.)

Nesses casos, toda a otimização é responsabilidade do desenvolvedor. O componente <Image> do Next.js, por exemplo, automatiza lazy loading, srcset e conversão para WebP. Para frameworks sem essa abstração, a otimização manual seguindo o checklist acima é necessária.

Como medir o impacto das otimizações

Após aplicar as otimizações, meça o resultado com estas ferramentas:

• Google PageSpeed Insights (pagespeed.web.dev) — análise completa com diagnóstico por elemento, separado para mobile e desktop.
• Google Search Console → Relatório de Experiência da Página — mostra o estado dos Core Web Vitals com dados reais de usuários do seu site.
• WebPageTest.org — análise técnica detalhada com waterfall de carregamento, útil para identificar qual imagem específica está atrasando o LCP.
• Chrome DevTools → Network — filtre por "Img" para ver todas as imagens carregadas, seus tamanhos e tempos de download.

Perguntas frequentes