Como Otimizar Imagens para Seu Site: Guia Completo e Atualizado
Imagens representam cerca de 40% do peso total da pagina web media. Otimize bem e voce corta o tamanho da pagina pela metade, atinge um Largest Contentful Paint abaixo de 2.5 segundos e sobe no ranking de busca. Aqui esta o processo completo, passo a passo.
Por Que Otimizar Imagens Importa Mais do Que Nunca
Segundo dados do HTTP Archive, a pagina 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 visivel. Na maioria das paginas, esse elemento e uma imagem.
O benchmark: LCP de 2.5 segundos ou menos e "bom". Acima de 4 segundos e "ruim". Paginas com LCP baseado em imagem tem tempo de carregamento no percentil 75 quase o dobro de paginas com LCP baseado em texto. A diferenca entre uma hero otimizada e uma inchada e frequentemente a diferenca 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:
| Formato | Melhor pra | Tamanho vs JPEG | Suporte |
|---|---|---|---|
| JPEG | Fotos, compatibilidade total | Referencia | 100% |
| WebP | Fotos + graficos | 25-35% menor | 97%+ |
| AVIF | Sites com foco em performance | ~50% menor | ~93% |
| PNG | Logos, icones, graficos com texto | Geralmente maior | 100% |
| SVG | Icones, ilustracoes | Minusculo (vetor) | 100% |
Pra maioria dos sites, WebP e o padrao mais seguro. Se sua stack suportar, sirva AVIF como principal com WebP de fallback usando o elemento <picture>. Voce pode converter JPG pra WebP ou converter pra AVIF no Vizua — tudo roda no seu navegador, sem upload.
Quer uma comparacao mais detalhada? Veja nosso artigo WebP vs AVIF e o explicador de compressao lossy vs lossless.
Passo 2: Redimensione pro Tamanho Real de Exibicao
Uma foto de 4000 x 3000 pixels da camera exibida a 800 x 600 no site desperidca cerca de 80% dos pixels. Esses pixels invisiveis ainda custam banda e tempo de processamento.
A regra: sirva imagens no tamanho de exibicao ou proximo dele. Em telas comuns, iguale as dimensoes. Em telas Retina 2x, sirva o dobro da largura de exibicao — mas nao mais.
- Hero full-width: 1600-1920px de largura
- Imagem de conteudo do blog: 800-1200px
- Thumbnail: 300-400px
- Avatar: 64-128px (ate 256px pra 2x)
Use o redimensionador de imagens do Vizua pra escalar a largura exata antes de comprimir. So isso pode reduzir o tamanho em 70-90%.
Passo 3: Comprima com a Qualidade Certa
Depois de escolher o formato e redimensionar, a compressao e onde voce espreme o restante. A relacao entre qualidade e tamanho nao e linear — cair de 100 pra 80 no JPEG economiza muito; cair de 80 pra 60 rende menos e ja mostra artefatos.
- JPEG: 75-85 — ponto ideal pra fotos
- WebP: 75-80 — qualidade visual equivalente ao JPEG 85, em arquivo menor
- AVIF: 60-75 — numeros mais baixos ainda ficam otimos
- PNG: Use compressao maxima (lossless). Pra mais economia, reduza pra 8-bit quando possivel
O compressor JPEG do Vizua faz isso automaticamente usando algoritmos otimizados. Pra detalhes por formato, veja nosso guia de compressao sem perda de qualidade.
Passo 4: Entregue Imagens de Forma Eficiente
Boa compressao e so metade da historia. Como voce entrega imagens pro navegador importa tanto quanto pra performance.
Defina dimensoes explicitas
Sempre inclua atributos width e height nas tags <img>. Isso previne layout shift — conteudo pulando conforme imagens carregam — que afeta diretamente o CLS.
Lazy-load imagens abaixo da dobra
Adicione loading="lazy" em qualquer imagem que nao e visivel no carregamento inicial. O navegador adia o download ate o usuario rolar perto.
Priorize sua hero image
Na imagem principal acima da dobra, adicione fetchpriority="high" e garanta que ela nao tenha loading="lazy". Testes do Google mostram que imagens LCP precarregadas atingem scores quase perfeitos (percentil 75 de 364ms), enquanto imagens LCP lazy-loaded sao 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 resolucao da tela do usuario.
Passo 5: Audite e Meca
- PageSpeed Insights: Rode o PageSpeed Insights nas paginas principais
- DevTools: Aba Network, ordene por tamanho. Se qualquer imagem passa de 200 KB, avalie se pode ser redimensionada, recomprimida ou convertida
- Automatize: Adicione otimizacao de imagens ao pipeline de build
Checklist Rapido
- Use WebP ou AVIF como formato padrao
- Redimensione pro tamanho real de exibicao
- Comprima: JPEG/WebP a 75-85, AVIF a 60-75
- Defina
widtheheightem toda<img> fetchpriority="high"na hero/LCP imageloading="lazy"em tudo abaixo da dobra- Use
srcset/sizespra entrega responsiva - Hero ate 200 KB, thumbnails ate 80 KB
- Remova metadados desnecessarios — veja nosso guia de privacidade EXIF
- Audite regularmente com PageSpeed Insights
Perguntas Frequentes
Qual o melhor formato de imagem pra sites?
WebP e a melhor escolha padrao em 2026. Gera arquivos 25-35% menores que JPEG na mesma qualidade, suporta transparencia e funciona em mais de 97% dos navegadores. Use AVIF pra arquivos ainda menores quando o suporte permitir, e PNG so pra graficos com texto ou bordas nididas.
Quanto imagens nao otimizadas deixam o site mais lento?
Imagens respondem por cerca de 40% do peso total de uma pagina web (aproximadamente 1 MB dos 2.5 MB medianos, segundo dados do HTTP Archive). Uma unica imagem hero nao otimizada pode empurrar seu LCP acima de 4 segundos, classificado como "ruim" pelo Google, afetando diretamente seu ranking.
Devo usar lazy-load em todas as imagens?
Nao. Use lazy-load apenas em imagens abaixo da dobra (que nao ficam visiveis no carregamento inicial). Nunca use lazy-load na imagem hero ou no elemento LCP — isso adiciona atraso e prejudica o Largest Contentful Paint. Pra imagem principal, use fetchpriority="high".
Preciso definir width e height em toda imagem?
Sim. Atributos width e height explicitos (ou CSS aspect-ratio) permitem que o navegador reserve espaco antes do carregamento. Sem eles, o conteudo pula conforme as imagens aparecem, aumentando o Cumulative Layout Shift (CLS).
Otimize suas imagens agora
Gratis, privado, sem cadastro. Tudo roda no seu navegador.