Otimização de imagens para WebP e AVIF: tutorial completo 2026

Em 2026, a otimização de imagens deixou de ser um “bônus” e se tornou obrigatória. O Google exige imagens leves para aprovação no Core Web Vitals, e os usuários não aceitam sites lentos. Dois formatos dominam o cenário: WebP (compatível com 98% dos navegadores) e AVIF (compressão superior, já suportado por Chrome, Firefox e Safari). Este guia mostra como converter todas as imagens do seu WordPress para esses formatos — com plugin, sem plugin, e em lote.

Entendendo os formatos: WebP vs. AVIF

• WebP – criado pelo Google, suporte praticamente universal. Oferece compressão com perdas e sem perdas, além de suporte a transparência (alfa) e animação. É o formato mais seguro.
• AVIF – baseado no codec AV1, atinge compressão superior ao WebP. Em 2026, já é suportado por mais de 90% dos navegadores (Chrome 85+, Firefox 98+, Safari 16.3+). Ideal para fotografias com muitos detalhes.

A abordagem recomendada é: fornecer imagens nos dois formatos e deixar o navegador escolher o melhor via picture ou pelo suporte do próprio WordPress (a partir da versão 6.5+).

Método 1: Usar o suporte nativo do WordPress (versão 6.5+)

Desde o WordPress 6.5, o núcleo do sistema converte automaticamente imagens JPEG e PNG para WebP durante o upload. Para ativar:

• Acesse Configurações → Mídia
• Marque a opção “Converter imagens para WebP” (ou “AVIF” se disponível no seu servidor)
• O WordPress gera versões WebP das imagens e serve automaticamente para navegadores compatíveis

Método 2: Plugins de otimização (recomendado para maioria dos sites)

Plugins oferecem conversão em lote, compressão inteligente e integração com CDNs. Veja os melhores em 2026:

ShortPixel Image Optimizer

✅ Converte para WebP e AVIF, mantém originais em backup, compressão tanto no servidor quanto via API externa. Versão gratuita: 100 imagens/mês. Premium a partir de $9,99.

Imagify (WP Rocket)

✅ Conversão para WebP/AVIF com três níveis de compressão. Oferece até 20MB grátis por mês. Planos a partir de $5,99.

EWWW Image Optimizer

✅ Conversão sem limite de imagens, inclusive AVIF 10-bit. Suporta otimização servidor-side (exige certas extensões PHP).

Smush Pro

✅ Conversão automática para WebP, integração com CDN WPMU DEV, oferece lazy loading e redimensionamento.

Método 3: Conversão manual via .htaccess (para quem não pode usar plugins)

Se seu servidor tem as bibliotecas GD ou ImageMagick, você pode converter imagens antecipadamente e configurar o Apache/Nginx para servir o formato correto.

Passos resumidos:

1. Converta suas imagens para WebP (use ferramentas online ou o comando cwebp no servidor).
2. Faça upload das versões WebP para o mesmo diretório das originais (ex: imagem.jpg.webp).
3. Adicione regras no .htaccess para que navegadores compatíveis recebam o WebP em vez do JPEG/PNG.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1]
</IfModule>

Conversão em lote de imagens antigas (centenas/milhares)

Para sites antigos com muitas imagens, você pode:

• Usar um plugin que processa em background (ShortPixel, EWWW). Eles não travam seu servidor porque usam filas.
• Rodar um script via WP-CLI (para usuários avançados) – exemplo com WP-CLI e o comando wp media regenerate após instalar um plugin de conversão.
• Utilizar serviços online (Ex: TinyPNG com API) para baixar, converter e reenviar via FTP – mais trabalhoso.

Cuidado: Sempre faça backup completo antes da conversão em lote. Um plugin mal configurado pode substituir originais e perder qualidade.

Como servir AVIF em vez de WebP de forma inteligente

Com o suporte crescente ao AVIF, você pode usar a tag <picture> para oferecer os dois formatos:

<picture>
  <source srcset="imagem.avif" type="image/avif">
  <source srcset="imagem.webp" type="image/webp">
  <img src="imagem.jpg" alt="..." loading="lazy">
</picture>

O navegador escolherá o primeiro formato que suportar. Isso exige um pouco de trabalho manual, mas alguns temas de bloco já implementam isso automaticamente.

Configurando o Nginx para WebP/AVIF (servidores VPS/dedicados)

Se você tem acesso ao Nginx, pode adicionar regras no arquivo de configuração do site:

map $http_accept $webp_suffix {
    default   "";
    "~*image/webp"  ".webp";
}
location ~* ^/wp-content/uploads/.+\.(jpe?g|png)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

Isso faz o Nginx procurar a versão WebP automaticamente se o navegador informar suporte.

Testando a otimização das imagens

Depois de aplicar qualquer método, verifique os resultados:

• PageSpeed Insights – Veja se o diagnóstico “Serve images in next-gen formats” está verde.
• Console do navegador (Inspecionar → Rede) – Filtre por Imagens e confira se os arquivos servidos são .webp ou .avif.
• Ferramenta BuiltWith ou Wappalyzer – Mostra se seu site já está usando esses formatos.

Erros comuns e como evitar

• Imagens convertidas com artefatos – Ajuste o nível de qualidade. Para WebP, 75-85% é ideal. Para AVIF, 60-70%.
• Site quebrado após ativar conversão – Alguns temas antigos não detectam imagens de background via CSS. Use mod_rewrite ou sirva as imagens por tag picture.
• Compatibilidade com navegadores antigos (IE11, Safari antigo) – Sempre mantenha o fallback JPEG/PNG. A tag <picture> já cuida disso.
• Aumento de uso de CPU no servidor – Evite conversão on-the-fly usando plugins mal otimizados. Prefira conversão durante o upload ou em lote via cron.

Conclusão: a hora é agora

WebP e AVIF não são mais “novidades”. Em 2026, são o padrão mínimo para quem se importa com performance. A boa notícia: a infraestrutura do WordPress (plugins, CDNs, temas) já está preparada. Não há desculpas para manter imagens pesadas e perder visitantes.

Resumo da ópera:

• ✔️ Use o suporte nativo do WordPress para novos uploads (simples, mas limitado).
• ✔️ Instale um plugin como ShortPixel ou Imagify para conversão em lote e controle fino.
• ✔️ Considere AVIF para sites com muitas fotografias (ex: portfólios, e-commerces moda).
• ✔️ Se tiver orçamento zero, use Cloudflare Polish (gratuito) para conversão automática.

Essa publicação te ajudou? Acompanhe nosso blog para mais tutoriais de performance em 2026.