Imagens em WebP e AVIF: Como Otimizar as Imagens do Site

Por Que as Imagens Pesam Tanto

Em boa parte dos sites, as imagens são a maior parte do peso da página. Uma foto tirada no celular pode ter 4 MB e 4000 pixels de largura, enquanto o espaço em que ela aparece no site tem 800 pixels. Enviada assim, ela atrasa o carregamento, gasta o plano de dados de quem visita e piora o LCP.

Os Formatos, Lado a Lado

Para fotos, WebP costuma reduzir bastante o tamanho em relação ao JPG, e AVIF reduz ainda mais. Para logotipos e ícones, SVG é quase sempre a melhor escolha.

O Tamanho Certo Vale Mais que o Formato

Converter uma foto de 4000 pixels para WebP ainda deixa um arquivo grande. O primeiro passo é redimensionar para o tamanho em que ela aparece, considerando telas de alta densidade. Uma regra prática:

• Imagem que ocupa a largura toda no celular: cerca de 800 a 1000 pixels de largura.
• Imagem de destaque no computador: cerca de 1200 a 1600 pixels.
• Miniaturas e cartões: o dobro do tamanho exibido, raramente mais de 600 pixels.

Com srcset, o navegador escolhe sozinho a versão certa para cada tela:

<img src="/fotos/sala-800.webp"
     srcset="/fotos/sala-480.webp 480w, /fotos/sala-800.webp 800w, /fotos/sala-1600.webp 1600w"
     sizes="(min-width: 1024px) 50vw, 100vw"
     width="800" height="533" alt="Sala com sofá cinza e janela ampla">

Como Fazer na Prática

WordPress

1. 1

   Instale um plugin de otimização de imagens que converta para WebP ou AVIF, como os que vêm com os plugins de cache ou os dedicados à compressão.

2. 2

   Ative a conversão automática para as novas imagens e rode a otimização em massa para as antigas.

3. 3

   Confirme no navegador, nas ferramentas do desenvolvedor, que as imagens estão sendo entregues no formato novo.

Desde a versão 5.8, o WordPress aceita o envio de arquivos WebP, e versões mais novas também aceitam AVIF quando o servidor suporta.

Shopify, Nuvemshop e Wix

Essas plataformas convertem e redimensionam as imagens automaticamente para o navegador de quem visita. O que fica com você é enviar arquivos razoáveis, sem fotos de vários megabytes, e não usar imagens com texto no lugar de texto de verdade.

Sites sob medida

Use um serviço ou CDN de imagens que converta na hora, ou gere as versões no momento do envio. Frameworks como Next.js têm componentes de imagem que fazem isso sozinhos.

Outras Dicas que Fazem Diferença

• Use lazy loading nas imagens abaixo da primeira tela, nunca na imagem de destaque.
• Escreva um texto alternativo que descreva a imagem para quem não pode vê-la.
• Dê nomes descritivos aos arquivos, como sofa-cinza-tres-lugares.webp, em vez de IMG_2034.jpg.
• Evite imagens com texto dentro: o texto real é mais leve, acessível e lido pelo Google.

Perguntas Frequentes