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.

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

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:

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

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.

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.