Como Otimizar Imagens para Seu Site: Guia Completo e Atualizado

Imagens representam cerca de 40% do peso total da página web média. Otimize bem e você corta o tamanho da página pela metade, atinge um Largest Contentful Paint abaixo de 2.5 segundos e sobe no ranking de busca. Aqui está o processo completo, passo a passo.

Por Que Otimizar Imagens Importa Mais do Que Nunca

Segundo dados do HTTP Archive, a página web mediana pesa cerca de 2.5 MB no celular, e imagens respondem por aproximadamente 1 MB disso. Os Core Web Vitals do Google — especificamente o Largest Contentful Paint (LCP) — medem diretamente a velocidade de carregamento do maior elemento visível. Na maioria das páginas, esse elemento é uma imagem.

O benchmark: LCP de 2.5 segundos ou menos é "bom". Acima de 4 segundos é "ruim". Páginas com LCP baseado em imagem têm tempo de carregamento no percentil 75 quase o dobro de páginas com LCP baseado em texto. A diferença entre uma hero otimizada e uma inchada é frequentemente a diferença entre um Core Web Vitals verde e vermelho.

Passo 1: Escolha o Formato Certo

A escolha do formato tem o maior impacto no tamanho do arquivo. Veja como os principais formatos se comparam:

Pra maioria dos sites, WebP é o padrão mais seguro. Se sua stack suportar, sirva AVIF como principal com WebP de fallback usando o elemento <picture>. Você pode converter JPG pra WebP ou converter pra AVIF no Vizua — tudo roda no seu navegador, sem upload.

Quer uma comparação mais detalhada? Veja nosso artigo WebP vs AVIF e o explicador de compressão lossy vs lossless.

Passo 2: Redimensione pro Tamanho Real de Exibição

Uma foto de 4000 x 3000 pixels da câmera exibida a 800 x 600 no site desperdiça cerca de 80% dos pixels. Esses pixels invisíveis ainda custam banda e tempo de processamento.

A regra: sirva imagens no tamanho de exibição ou próximo dele. Em telas comuns, iguale as dimensões. Em telas Retina 2x, sirva o dobro da largura de exibição — mas não mais.

• Hero full-width: 1600-1920px de largura
• Imagem de conteúdo do blog: 800-1200px
• Thumbnail: 300-400px
• Avatar: 64-128px (até 256px pra 2x)

Use o redimensionador de imagens do Vizua pra escalar a largura exata antes de comprimir. Só isso pode reduzir o tamanho em 70-90%.

Passo 3: Comprima com a Qualidade Certa

Depois de escolher o formato e redimensionar, a compressão é onde você espreme o restante. A relação entre qualidade e tamanho não é linear — cair de 100 pra 80 no JPEG economiza muito; cair de 80 pra 60 rende menos e já mostra artefatos.

• JPEG: 75-85 — ponto ideal pra fotos
• WebP: 75-80 — qualidade visual equivalente ao JPEG 85, em arquivo menor
• AVIF: 60-75 — números mais baixos ainda ficam ótimos
• PNG: Use compressão máxima (lossless). Pra mais economia, reduza pra 8-bit quando possível

O compressor JPEG do Vizua faz isso automaticamente usando algoritmos otimizados. Pra detalhes por formato, veja nosso guia de compressão sem perda de qualidade.

Passo 4: Entregue Imagens de Forma Eficiente

Boa compressão é só metade da história. Como você entrega imagens pro navegador importa tanto quanto pra performance.

Defina dimensões explícitas

Sempre inclua atributos width e height nas tags <img>. Isso previne layout shift — conteúdo pulando conforme imagens carregam — que afeta diretamente o CLS.

Lazy-load imagens abaixo da dobra

Adicione loading="lazy" em qualquer imagem que não é visível no carregamento inicial. O navegador adia o download até o usuário rolar perto.

Priorize sua hero image

Na imagem principal acima da dobra, adicione fetchpriority="high" e garanta que ela não tenha loading="lazy". Testes do Google mostram que imagens LCP precarregadas atingem scores quase perfeitos (percentil 75 de 364ms), enquanto imagens LCP lazy-loaded são quase o dobro mais lentas (720ms).

Use imagens responsivas

Os atributos srcset e sizes permitem que o navegador escolha a melhor variante pro tamanho e resolução da tela do usuário.

Passo 5: Audite e Meça

• PageSpeed Insights: Rode o PageSpeed Insights nas páginas principais
• DevTools: Aba Network, ordene por tamanho. Se qualquer imagem passa de 200 KB, avalie se pode ser redimensionada, recomprimida ou convertida
• Automatize: Adicione otimização de imagens ao pipeline de build

Checklist Rápido

• Use WebP ou AVIF como formato padrão
• Redimensione pro tamanho real de exibição
• Comprima: JPEG/WebP a 75-85, AVIF a 60-75
• Defina width e height em toda <img>
• fetchpriority="high" na hero/LCP image
• loading="lazy" em tudo abaixo da dobra
• Use srcset/sizes pra entrega responsiva
• Hero até 200 KB, thumbnails até 80 KB
• Remova metadados desnecessários — veja nosso guia de privacidade EXIF
• Audite regularmente com PageSpeed Insights

Perguntas Frequentes