Como Otimizar Imagens do Site Sem Perder Qualidade

O que é otimizar imagens do site

Otimizar imagens do site é reduzir o peso de cada arquivo de imagem até o ponto mínimo necessário para a qualidade visual que a página exige, sem cortar resolução onde o usuário percebe a diferença. Cada imagem pede uma combinação própria de formato, tamanho e momento de carregamento, de acordo com onde ela aparece na tela.

Na prática, imagem é o recurso mais pesado da maioria das páginas. Um banner de capa em JPEG sem compressão facilmente passa de 2 MB. A mesma cena, no formato certo e no tamanho certo, costuma sair abaixo de 200 KB sem diferença visível a olho nu.

Por que imagem pesada derruba o LCP

Imagem sem otimização é a causa mais comum de LCP alto, porque na maioria das páginas o maior elemento visível é justamente uma imagem: banner, foto de produto ou capa de artigo. O guia completo dessa métrica está em como otimizar o LCP do seu site.

O efeito em cadeia é direto. O navegador só termina de pintar a imagem depois de baixar o arquivo inteiro, então cada quilobyte a mais atrasa o momento em que o usuário vê a página pronta. Suponha uma página de produto com uma foto de 3 MB no topo: em uma conexão 4G comum, esse arquivo sozinho já consome boa parte do orçamento de 2,5 segundos que o Google considera bom para LCP.

E o problema não some depois do primeiro carregamento. Toda imagem nova publicada no site carrega o risco de voltar a pesar, se ninguém revisar o processo antes de subir o arquivo.

Qual formato de imagem usar em cada caso

O formato certo depende do tipo de conteúdo da imagem, não de preferência pessoal. Fotografia com gradiente e muita variação de cor pede um formato diferente de um ícone com poucas cores sólidas.

Para fotografia, WebP e AVIF comprimem melhor que JPEG mantendo qualidade parecida. AVIF costuma gerar arquivo ainda menor que WebP no mesmo nível de qualidade, mas exige mais tempo de codificação no build e tem suporte um pouco mais recente nos navegadores. Para ícone, logo ou ilustração com poucas cores, SVG é a escolha certa: é vetorial, escala sem perder nitidez e o arquivo costuma pesar menos que qualquer formato raster equivalente.

PNG continua útil quando a imagem precisa de transparência e não é fotográfica, como um logotipo sobre fundo colorido. Fora esse caso, ele quase sempre perde para WebP em peso final.

Como comprimir e dimensionar sem perder qualidade

Comprimir sem perder qualidade perceptível é ajustar a taxa de compressão até o ponto em que o olho humano não distingue mais o original do arquivo reduzido, e parar ali. Ir além disso economiza pouco e já introduz artefato visível.

1. Exporte a imagem original no formato de destino (WebP ou AVIF) com qualidade entre 70 e 80. Esse intervalo é o ponto de equilíbrio entre peso e nitidez para a maioria das fotos.
2. Redimensione para o maior tamanho em que a imagem realmente aparece na tela. Uma foto de 4000px de largura exibida num card de 400px está desperdiçando 90% do peso do arquivo.
3. Gere versões em srcset para pelo menos dois ou três breakpoints, para que o celular baixe a versão pequena em vez da mesma imagem que aparece no desktop.
4. Declare width e height (ou aspect-ratio) no HTML, para o navegador reservar o espaço antes do arquivo chegar e evitar que o layout pule quando a imagem carrega.
5. Se o projeto usa Next.js, o componente next/image já cobre os passos 1 a 4 automaticamente: gera WebP, redimensiona por breakpoint e reserva o espaço no layout a partir das dimensões informadas.

O passo 2 é o que mais gente pula. É comum ver um site inteiro rodando com a mesma imagem de 3000px de largura em todos os tamanhos de tela, porque redimensionar por breakpoint dá mais trabalho do que subir um arquivo único.

Quando usar lazy loading sem prejudicar o LCP

Lazy loading é adiar o carregamento de uma imagem até o momento em que ela está prestes a entrar na área visível da tela, para não competir por banda com o que o usuário já está vendo. A regra central é simples: nunca aplique lazy loading na imagem que forma o LCP.

Isso parece contraintuitivo, porque lazy loading tem fama de sempre ajudar performance. Mas a imagem do LCP precisa começar a baixar o quanto antes, e o atributo loading="lazy" faz o oposto: atrasa o início do download até o navegador confirmar que o elemento está perto da tela. Aplicar lazy loading justamente na imagem mais importante da página é um dos erros mais comuns nessa área.

A prática correta separa os dois casos. Na imagem do LCP, use loading="eager" (ou omita o atributo, que é o padrão) e adicione fetchpriority="high" para sinalizar ao navegador que ela entra na fila de download primeiro. Em toda imagem abaixo da dobra, que só fica visível depois que o usuário rola a página, loading="lazy" é o comportamento certo.

Como confirmar que a otimização funcionou

Confirmar a otimização é medir o peso total de imagens transferidas e o LCP da página antes e depois da mudança, porque só a inspeção visual não mostra o efeito real no carregamento.

A aba Network do DevTools do Chrome, filtrada por tipo "Img", mostra o peso de cada arquivo carregado numa visita. Comparar esse número antes e depois da otimização já indica se o trabalho valeu a pena. Para o efeito em métrica de campo, o relatório de Core Web Vitals do Search Console leva alguns dias para refletir o uso real dos visitantes, então a comparação de LCP costuma aparecer só na semana seguinte à mudança.

Vale revisitar essa checagem a cada ciclo de conteúdo novo. Um blog que publica fotos direto da câmera, sem passar pelo processo de otimização, volta a acumular peso rapidamente, mesmo que a otimização inicial tenha sido bem feita.

Se as imagens do seu site estão pesando mais do que deveriam e você quer um diagnóstico de performance completo, fale com a gente.