Otimização de imagens é o ajuste que devolve velocidade mais rápido em quase todo site — e quase ninguém faz direito. Segundo o Web Almanac 2025 do HTTP Archive, imagem responde por 48% do peso de uma página mediana e é o elemento que define o LCP (a maior parte visível da tela ao abrir) em cerca de 85% das páginas no desktop e 76% no mobile. Traduzindo: quando a sua página demora, na maioria das vezes a culpada é uma imagem.
E o peso vira dinheiro. A página mediana no celular pesa hoje 2,6 MB — em 2015 eram 845 KB, quase três vezes menos, pelo mesmo Almanac. Um estudo do Google com a Deloitte ('Milliseconds Make Millions') mostrou que melhorar apenas 0,1 segundo no carregamento fez o consumidor de varejo gastar cerca de 10% a mais. Imagem pesada não é detalhe técnico: é venda que escorre pelo ralo.
Por que imagem é o primeiro lugar para otimizar
Tem coisa difícil de acertar num site: cache, JavaScript, tempo de resposta do servidor. Imagem não é uma delas. O ganho é grande e o esforço é baixo. Como a imagem costuma ser o próprio elemento de LCP, encolher o arquivo certo derruba direto a métrica que o Google usa pra medir velocidade — a mesma que pesa no ranqueamento e na conversão.
E o elo com conversão é medido, não achismo. Casos de mercado ilustram: a varejista Furnspace cortou o tempo de carregamento em 65% otimizando imagens e dobrou a conversão; a Agrofy reduziu o abandono na página de produto de 3,8% para 0,9% ao priorizar o carregamento de imagem, caso documentado pelo web.dev do Google. É por isso que, ao entregar sites e landing pages, imagem otimizada entra como requisito, não como enfeite.
WebP ou AVIF: qual formato usar
JPEG e PNG são o padrão antigo. Os formatos modernos entregam a mesma qualidade visual com muito menos bytes. O WebP costuma ser 25% a 35% menor que um JPEG equivalente. O AVIF vai além: fica cerca de 20% a 30% menor que o WebP e perto de 50% menor que o JPEG, segundo comparativos técnicos de 2025 (SpeedVitals, Crystallize). A troca de formato, sozinha, já corta boa parte do peso.
A dúvida de sempre é compatibilidade — e ela deixou de ser problema. Pelos dados do caniuse compilados em 2025, o WebP roda em cerca de 97% dos navegadores e o AVIF em torno de 94% (Chrome, Firefox, Edge e Safari 16+). Dá pra usar AVIF hoje sem medo, desde que você tenha um plano para os poucos que não abrem.
A regra prática: AVIF com fallback para WebP
O jeito robusto é servir AVIF para quem aceita, WebP para quem não aceita e deixar o JPEG só como última rede de segurança. O próprio HTML faz essa escolha sozinho com a tag picture. Um passo a passo que funciona na prática:
- Converta cada imagem para AVIF e WebP — ferramentas gratuitas como o Squoosh (do Google), o cwebp e o avifenc fazem isso sem custo.
- Envolva a imagem numa tag picture com as fontes AVIF e WebP e um img JPEG como fallback; o navegador escolhe sozinho a primeira que entende.
- Na imagem principal do topo (a de LCP), adicione fetchpriority=alta e loading=eager para ela baixar antes de tudo.
- Nas imagens abaixo da dobra, use loading=lazy para elas só carregarem quando o usuário chega perto.
- Sirva tamanhos diferentes por tela com srcset e sizes — três ou quatro larguras (por exemplo 400, 800, 1200 e 2400 px) cobrem quase todos os dispositivos.
O erro que trava o carregamento: lazy load na imagem errada
Lazy loading é ótimo — nas imagens certas. O problema é aplicar em tudo, inclusive na imagem principal do topo. Quando a imagem de LCP recebe loading=lazy, o navegador a joga para o fim da fila e o carregamento visível atrasa. O Web Almanac 2025 mostra que 10,4% das páginas mobile ainda cometem exatamente esse erro: fazem lazy load justo da imagem que deveriam priorizar.
A regra é simples e vale ouro: a imagem grande do topo (hero, banner, foto principal do produto) carrega com prioridade alta; só o que está abaixo da dobra ganha lazy load. Inverter isso é como servir o prato principal por último no rodízio — a pessoa já foi embora.
Compressão: até onde apertar sem estragar
Formato novo resolve metade. A outra metade é o nível de compressão. Para fotos, qualidade entre 75 e 85 costuma ser o ponto em que o olho não percebe perda mas o arquivo cai bastante. Abaixo de 70 começam a aparecer manchas (os artefatos) em áreas de céu e gradiente. Teste caso a caso; não cravar um número fixo para tudo é o que separa o resultado bom do medíocre.
Dois cuidados que quase todo mundo esquece. Primeiro: nunca suba uma imagem maior do que o espaço em que ela aparece — uma foto de 4000 px exibida num quadro de 800 px é desperdício puro de banda. Segundo: limpe os metadados EXIF, que carregam dados de câmera e até GPS inúteis para o site e ainda somam peso.
Como medir se a otimização funcionou
Não confie no 'ficou mais rápido' no olho — meça. O PageSpeed Insights, que roda o Lighthouse (ambos do Google), mostra o LCP, aponta as imagens grandes e avisa quando a imagem de LCP está com lazy load indevido. Rode antes e depois de mexer: se o LCP não caiu, a otimização não pegou onde importava. Em projetos de sites focados em conversão, esse número é acompanhado release a release.
Site rápido não é luxo de engenheiro. É a diferença entre o visitante que espera carregar e o que fecha a aba antes de ver seu produto. E, na maioria das vezes, o que ele está esperando é uma imagem.
Perguntas frequentes
WebP ou AVIF: qual devo usar?+
Use os dois. O AVIF comprime melhor (cerca de 20% a 30% menor que o WebP e até 50% menor que o JPEG), mas nem todo navegador abre. A solução é servir AVIF como opção principal e WebP como fallback pela tag picture — o navegador escolhe sozinho a que entende. Assim você ganha o menor arquivo possível sem quebrar nada.
Preciso me preocupar com navegadores antigos ao usar AVIF?+
Pouco. Pelos dados de 2025, o AVIF já roda em torno de 94% dos navegadores e o WebP em cerca de 97%. Com o fallback correto (AVIF, depois WebP, depois JPEG dentro da tag picture), até quem usa navegador antigo vê a imagem — só recebe uma versão um pouco mais pesada.
Por que não posso usar lazy loading em todas as imagens?+
Porque a imagem principal do topo (a de LCP) precisa carregar primeiro, não por último. Colocar loading=lazy nela atrasa o carregamento visível e piora a métrica de velocidade do Google. Segundo o Web Almanac 2025, 10,4% das páginas mobile cometem esse erro. Use lazy load só nas imagens abaixo da dobra.
Qual o melhor nível de compressão para fotos na web?+
Para a maioria das fotos, qualidade entre 75 e 85 mantém o visual sem perda perceptível e reduz bastante o arquivo. Abaixo de 70 começam a surgir artefatos em céus e gradientes. O ideal é testar imagem a imagem, porque foto com muito detalhe aguenta menos compressão que uma com áreas lisas.
Otimizar imagem melhora o SEO?+
Sim, de forma indireta e forte. Imagem é o elemento de LCP na maioria das páginas, e o LCP é um dos Core Web Vitals que o Google usa para ranquear. Página mais leve carrega mais rápido, retém mais visitante e converte mais — e velocidade é fator de ranqueamento desde a atualização de experiência de página.
Que ferramenta gratuita usar para converter imagens?+
Para tarefas pontuais, o Squoosh do Google converte para WebP e AVIF direto no navegador, sem instalar nada. Para volume, o cwebp e o avifenc fazem a conversão em lote pela linha de comando. Em sites com muitas imagens, o ideal é automatizar isso no build ou usar um CDN de imagens que serve o formato certo por navegador.
Se o seu site demora a abrir e você não sabe se o gargalo é imagem, servidor ou código, a VELTRIX faz um diagnóstico gratuito: rodamos o PageSpeed no seu site, apontamos qual imagem está segurando o LCP e mostramos o ganho estimado de velocidade e conversão antes de qualquer contratação. Manda o endereço do seu site que precisa converter mais e a gente devolve o mapa do que otimizar primeiro.
Quer aplicar isso no seu negócio?
Diagnóstico gratuito com nosso time. Sem compromisso.