Otimização de imagens site é, disparado, o item que mais move o ponteiro no PageSpeed quando o projeto começa com imagens mal configuradas. Não falo de teoria — falo do que eu vejo toda semana: sites chegando pra mim com JPEGs de 2 MB servidos em um container de 400 px de largura, derrubando o score de performance para a faixa dos 40 a 60. Trocar o formato de imagem, sem mexer em nada mais, já é capaz de economizar entre 30 % e 75 % do peso original dependendo do conteúdo. Neste post vou mostrar os números reais dessa comparação e como eu aplico isso em cada projeto que entrego.
Por que o formato de imagem impacta tanto o PageSpeed
O PageSpeed Insights (e o Lighthouse por baixo dele) pontua a entrega de imagens em formato de próxima geração como um dos itens de maior peso no diagnóstico de performance. Isso acontece porque imagens costumam representar entre 50 % e 70 % do peso total de uma página típica de negócio — muito mais do que scripts e CSS somados.
Quando o arquivo é grande demais, o navegador demora mais para baixar, o LCP (Largest Contentful Paint) sofre, e o score despenca. A boa notícia é que esse é exatamente o tipo de problema que tem solução técnica direta, sem depender de copywriting, de redesign ou de qualquer decisão do cliente.
Se quiser entender por que uma nota baixa no PageSpeed tem consequência real em receita — não só em nota de teste —, recomendo o post que escrevi sobre o custo real de um site lento em conversão.
JPEG, WebP e AVIF: o que muda de verdade no peso do arquivo
Cada formato usa um algoritmo de compressão diferente, e a diferença de peso não é marginal.
JPEG: o formato legado que ainda domina (pelo motivo errado)
JPEG é o padrão de fato em sites mais antigos porque foi o único formato de foto amplamente suportado por décadas. Ele comprime bem para qualidade visual aceitável em torno de 70–80 %, mas não consegue descartar informação visual redundante com a eficiência dos formatos modernos. Um fundo desfocado, um degradê sutil, grandes áreas de cor sólida — o JPEG gasta bits à toa nessas regiões.
Exemplo real de um projeto recente: banner hero de 1920 × 700 px salvo como JPEG a 80 % de qualidade → 380 KB.
WebP: o salto que já devia ser padrão em todo site
WebP é um formato criado pelo Google em 2010, suportado por todos os navegadores modernos desde 2020. Ele usa compressão preditiva e transformação de blocos que o JPEG não usa, e o resultado é visível: a mesma imagem acima em WebP a qualidade equivalente saiu com 160 KB — uma redução de 58 % sem perda visual percetível.
Para fotos de produtos, fotos de equipe, imagens editoriais — WebP entrega qualidade idêntica ao olho humano com quase metade do peso. Não existe motivo técnico para servir JPEG em 2025 quando o visitante está em Chrome, Edge, Safari ou Firefox.
AVIF: compressão de nova geração com diferencial em gradientes e pele
AVIF é baseado no codec de vídeo AV1 e representa o estado da arte em compressão de imagem estática. Suporte de navegador hoje está na casa dos 94 % (Chrome, Firefox, Edge, Safari 16+), o que já é suficiente para servir como formato principal com fallback em WebP.
O mesmo banner em AVIF a qualidade equivalente: 90 KB. Isso é uma redução de 76 % em relação ao JPEG original.
AVIF se destaca especialmente em imagens com gradientes suaves, tons de pele e fundo com muita informação — justamente o tipo de imagem que aparece em sites de clínicas, fotógrafos e portfólios. Não por acaso, quando montei a estrutura de performance para o site para fotógrafo com portfólio de alto volume, AVIF com fallback WebP foi a escolha central.
Otimização de imagens site: tabela comparativa de peso real
Para deixar isso concreto, aqui estão os números de três tipos de imagem comuns em sites profissionais, todos exportados com qualidade visual equivalente:
- Banner hero (1920 × 700 px, foto de escritório): JPEG 380 KB → WebP 160 KB → AVIF 90 KB
- Foto de produto (800 × 800 px, fundo branco): JPEG 95 KB → WebP 42 KB → AVIF 28 KB
- Foto de equipe (600 × 400 px, ambiente interno): JPEG 110 KB → WebP 48 KB → AVIF 31 KB
Multiplique isso por 10, 15 imagens em uma página e o impacto no LCP e no peso total da página é imediato.
Como eu implemento isso na prática em WordPress + Elementor
A otimização de imagens site não acontece só na hora de exportar — ela precisa estar na pipeline de entrega do WordPress.
1. Conversão automática com plugin de compressão
Uso plugins que convertem automaticamente qualquer imagem enviada para a biblioteca do WordPress em WebP ou AVIF, sem que o cliente precise saber de nada. O upload continua sendo o JPEG ou PNG normal — o plugin processa, gera a versão otimizada e substitui a entrega. Isso funciona de forma transparente.
2. Tag picture com fallback explícito
Em blocos críticos — especialmente o hero e a primeira imagem visível na dobra — eu configuro a entrega com a tag <picture>, que permite servir AVIF para quem suporta, WebP para quem suporta WebP, e JPEG como fallback para qualquer navegador mais antigo. Ninguém vê imagem quebrada, e quem está em Chrome mais recente recebe o arquivo mais leve.
3. Dimensionamento correto antes de tudo
Formato otimizado sobre imagem superdimensionada ainda gera problema. Antes de converter, eu redimensiono cada imagem para a largura máxima que ela vai ocupar no layout. Não tem sentido servir 1920 px em um container que nunca passa de 700 px no desktop — isso é peso desperdiçado mesmo em AVIF.
4. Lazy loading nas imagens abaixo da dobra
Imagens que estão fora da viewport inicial não precisam carregar no primeiro request. Com loading="lazy" configurado corretamente, o navegador só busca essas imagens quando o usuário scrolla em direção a elas. Isso reduz o tempo de carregamento inicial e melhora diretamente o LCP — que é justamente o que o PageSpeed mede com mais peso.
Essa configuração faz parte do SEO técnico que configuro por padrão em todo site que entrego, não como item opcional.
Impacto real no score do PageSpeed
Um site que chega com JPEG sem compressão e sem lazy loading normalmente aparece na faixa de 45 a 65 no PageSpeed Mobile. Depois de aplicar a otimização de imagens site — conversão para WebP/AVIF, dimensionamento correto e lazy loading — esse mesmo site sobe para a faixa de 88 a 96, dependendo do restante da configuração de performance.
A diferença não é sutil. E ela aparece nas métricas que o Google usa para ranqueamento orgânico, especialmente no Core Web Vitals. Se quiser entender como INP e LCP funcionam juntos nesse contexto, escrevi sobre Core Web Vitals em 2026 e o que mudou com o INP.
Qual formato usar em cada situação
A resposta prática: use AVIF como principal com fallback WebP sempre que o stack permitir. Se o plugin ou o servidor não suportar AVIF com estabilidade, WebP já entrega uma redução expressiva e tem suporte universal nos navegadores modernos. JPEG fica como fallback de última camada — não como padrão.
PNG mantém espaço em imagens que precisam de transparência real (logos, ícones complexos), mas mesmo aí o WebP com canal alfa entrega tamanho menor. SVG continua sendo a escolha certa para ícones simples e ilustrações geométricas — nenhum formato raster compete com vetor em logos limpos.
Otimização de imagens site não é detalhe — é fundação
Todo site que entrego com nota 95+ no PageSpeed tem otimização de imagens site como uma das primeiras camadas resolvidas. Não é possível chegar em alta performance ignorando o elemento que ocupa a maior fatia de bytes da página. WebP e AVIF não são modismo técnico — são a diferença entre um site que carrega em 1,2 s e um que carrega em 3,8 s no 4G médio.
Se você quer um site construído com esse nível de atenção técnica desde o início — formato de imagem, dimensionamento, lazy loading, CDN e tudo mais configurado por padrão —, me chama no WhatsApp. Posso avaliar o que seu projeto precisa e montar um orçamento.
💬 Falar com Leonardo no WhatsApp
Perguntas frequentes
WebP ou AVIF: qual formato usar para otimização de imagens em sites em 2025?
A recomendação prática é usar AVIF como formato principal — ele reduz o peso em até 76 % em relação ao JPEG — com fallback em WebP para navegadores sem suporte a AVIF. WebP já é suficiente e tem suporte universal nos navegadores modernos; JPEG deve ficar apenas como camada de fallback final, nunca como padrão.
Quanto a otimização de imagens melhora a nota no PageSpeed?
Em projetos reais, converter imagens de JPEG para WebP/AVIF, aplicar dimensionamento correto e ativar lazy loading pode elevar o score do PageSpeed Mobile de uma faixa de 45–65 para 88–96, dependendo da configuração geral de performance do site.
Como converter imagens para WebP e AVIF automaticamente no WordPress?
Plugins de compressão de imagem (como Imagify, ShortPixel ou Converter for Media) convertem automaticamente os arquivos enviados para a biblioteca do WordPress em WebP ou AVIF. O upload continua sendo feito normalmente em JPEG ou PNG; o plugin processa e entrega o formato otimizado de forma transparente, sem necessidade de ação manual do administrador.
O que é a tag picture e por que ela é importante para otimização de imagens?
A tag <picture> permite declarar múltiplas fontes de imagem com formatos diferentes. O navegador escolhe automaticamente o formato mais eficiente que ele suporta — AVIF, depois WebP, depois JPEG como fallback. Isso garante que nenhum visitante veja imagem quebrada enquanto os usuários em navegadores modernos recebem o arquivo mais leve possível, o que impacta diretamente o LCP e o score do PageSpeed.