Otimização de Imagens para Web: Guia Prático de Compressão e Formatos

Imagens representam, em média, 60-70% do peso total de uma página web. Otimizá-las corretamente é uma das ações com maior impacto em performance - especialmente no LCP e no tempo de carregamento mobile.

Por que imagens são o problema número 1 de performance

Uma imagem original de câmera ou exportada do Photoshop sem configuração específica para web pode ter 3-8MB. Servir essa imagem para um usuário mobile em 4G pode levar 10-20 segundos só para a imagem carregar.

Com otimização correta, a mesma imagem pode ser servida em 80-200KB - mesma qualidade visual, 97% menos dados transferidos.

Escolhendo o formato correto

Recomendação prática: use WebP como padrão com JPEG como fallback. Use AVIF para imagens críticas (hero, galeria de produtos) onde a compressão extra vale o esforço. Serviços de imagem e CDNs também podem converter o formato na entrega, como explica o guia de CDN e cache.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Descrição" width="1200" height="600">
</picture>

Níveis de compressão

A compressão de imagens tem trade-off entre tamanho e qualidade. Para web, a maioria dos usuários não percebe diferença entre qualidade 75% e 100% em JPEG/WebP.

Configurações recomendadas:

• JPEG: qualidade 70-80%
• WebP: qualidade 75-85%
• AVIF: qualidade 50-70% (comprime muito mais com mesma percepção)
• PNG: use oxipng ou pngquant para compressão sem perda

Ferramentas de otimização

Ferramentas online (sem instalação):

• Squoosh (squoosh.app): converte e comprime com preview visual da qualidade. Ideal para uma imagem por vez.
• TinyPNG/TinyJPEG (tinypng.com): batch de até 20 imagens gratuito. Simples e eficaz.
• SVGOMG (jakearchibald.github.io/svgomg): otimização de SVG.

CLI para automatização:

• Sharp: biblioteca Node.js - excelente para integração em build
• ImageMagick: ferramenta universal de linha de comando
• cwebp: conversor oficial de WebP do Google

Plugins para CMS:

• WordPress: ShortPixel, Imagify, Smush - otimizam automaticamente ao fazer upload
• Shopify: tem otimização automática, mas aceita WebP

Dimensionamento correto - o passo mais esquecido

Servir uma imagem de 2000px de largura em um container de 400px é desperdiçar 25x mais dados do que necessário. Definir largura e altura também evita saltos de layout; veja como reduzir o CLS.

Use srcset para servir tamanhos diferentes:

<img 
  src="produto-800.webp"
  srcset="produto-400.webp 400w, produto-800.webp 800w, produto-1200.webp 1200w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Nome do produto"
  width="800"
  height="600"
>

Lazy loading

Imagens fora da viewport inicial não precisam ser carregadas imediatamente. O atributo loading="lazy" faz o browser adiar o carregamento. O funcionamento completo está em lazy loading:

<!-- Imagens above-the-fold (NÃO use lazy) -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Imagens below-the-fold (use lazy) -->
<img src="produto.webp" alt="Produto" loading="lazy" width="400" height="300">

Atenção: nunca use loading="lazy" na imagem LCP (geralmente o hero). Isso atrasa o LCP. Veja as técnicas de prioridade em como melhorar o LCP.

Imagens de fundo CSS

Imagens de fundo CSS (background-image) são descobertas pelo browser mais tarde no processo de carregamento, o que atrasa o LCP se usadas no hero.

Se a imagem principal da página está em CSS como background, considere migrar para uma tag <img> com role="presentation" se for puramente decorativa, ou refatorar o layout para usar <img> real.

Erros comuns ao otimizar imagens

• Comprimir duas vezes: cada recompressão com perda degrada a qualidade. Guarde o original e gere a versão web a partir dele.
• Ampliar imagem pequena: esticar 600 px para 1600 px deixa a foto borrada e não melhora a experiência. Use resolução adequada na captura.
• Lazy loading no hero: a imagem principal precisa carregar primeiro. Use fetchpriority="high" e nunca loading="lazy" nela.
• Esquecer width e height: sem dimensões explícitas, o navegador não reserva espaço e o layout salta.
• Salvar captura de tela em PNG: print de dashboard, tabela ou documento costuma ficar enorme. JPEG ou WebP resolve com fração do peso.
• Enviar imagem maior que o container: foto de 2000 px em coluna de 600 px desperdiça banda em qualquer conexão.
• Ignorar imagens de fundo: background em CSS grande e sem versão mobile atrasa o carregamento e passa despercebido na auditoria.

Como medir o ganho

O PageSpeed Insights mostra, na seção de oportunidades, quanto cada imagem pesa e qual seria a economia ao formatar, redimensionar ou comprimir. Antes de otimizar, anote o peso total de imagens da página e o LCP mobile. Depois, compare os mesmos números.

No Chrome DevTools, a aba Network permite filtrar por tipo Img e ordenar por tamanho. É a forma mais rápida de achar o arquivo de 4 MB que passou no upload. Para acompanhar tendência, rode o Lighthouse em uma URL representativa a cada mês e registre o resultado.

O ganho nem sempre aparece no LCP da home. Uma página interna com galeria pesada pode ser o gargalo real do site. Meça as páginas que recebem tráfego, não apenas a página inicial. Para o panorama de todas as métricas, veja o guia completo de performance web.

Checklist antes de publicar imagem no site

• Formato moderno (WebP ou AVIF) com fallback JPEG
• Compressão entre 70% e 85% para WebP
• Dimensões corretas para o maior uso previsto
• srcset com pelo menos dois tamanhos
• width e height definidos
• alt descritivo quando a imagem tem conteúdo
• loading="lazy" apenas abaixo da dobra
• Hero com fetchpriority="high" e sem lazy
• Nome de arquivo descritivo, sem acentos ou espaços
• Imagem de fundo revisada ou substituída por <img>

Fontes e referências

• web.dev: LCP: como o maior elemento visível é medido.
• web.dev: CLS: causas de saltos de layout e como evitá-los.
• MDN: HTTP: cabeçalhos, cache e negociação de conteúdo.

FAQ

Preciso converter manualmente todas as imagens para WebP?

Não necessariamente. Serviços como Cloudflare Images, Cloudinary e AWS CloudFront convertem automaticamente para WebP na entrega, sem você precisar mudar as imagens no servidor. Plugins de WordPress também fazem isso automaticamente no momento do upload.

PNG ou WebP para imagens com transparência?

WebP suporta transparência (canal alfa) com arquivos menores que PNG. Prefira WebP com transparência quando o suporte ao browser for adequado (97%). Mantenha PNG como fallback para browsers legados usando a tag <picture>.

Vale a pena converter imagens antigas do meu site?

Sim, se o site tem tráfego. Mesmo sem redesign, converter imagens para WebP e redimensionar para tamanhos corretos pode reduzir o peso médio de página em 50-60% - com impacto direto em bounce rate mobile.

Como saber quais imagens estão pesadas demais no meu site?

No PageSpeed Insights, a seção “Properly size images” e “Serve images in next-gen formats” lista todas as imagens problemáticas com o potencial de economia de cada uma.