Servir Imagens em Formatos de Próxima Geração:
Guia de WebP

O Que Significa “Servir Imagens em Formatos de Próxima Geração”

O Lighthouse e o PageSpeed Insights mostram esse aviso quando uma página carrega imagens JPEG ou PNG que ficariam bem menores em WebP ou AVIF. A auditoria lista cada imagem com a economia estimada. As versões mais recentes trazem a mesma recomendação dentro do insight Melhorar a entrega de imagens.

1. Execute o PageSpeed Insights e anote as URLs das imagens listadas.
2. Crie versões em WebP (ou AVIF): qualidade 75–85 para fotos, sem perdas para capturas de tela.
3. Sirva-as com um elemento <picture>, regras no servidor, um CDN ou um plugin de CMS (detalhes abaixo).
4. Execute o teste novamente. As imagens convertidas saem da lista.

O Elemento Picture com Fallback JPG

O elemento HTML <picture> é a forma mais confiável de servir WebP com fallback para navegadores mais antigos. Ele permite que o navegador escolha o melhor formato disponível sem nenhum JavaScript:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="630"
       loading="lazy" decoding="async">
</picture>

Quando o navegador suporta WebP, ele baixa hero.webp. Caso contrário, recorre a hero.jpg. A tag <img> serve como fallback final e também contém os atributos alt, width, height e de carregamento.

Para imagens responsivas, combine o elemento <picture> com srcset e sizes para servir diferentes resoluções conforme a largura da viewport:

<picture>
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    type="image/webp">
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    src="photo-800.jpg" alt="Product photo" width="800" height="600"
    loading="lazy" decoding="async">
</picture>

Negociação de Conteúdo no Servidor

A negociação de conteúdo verifica o cabeçalho Accept do navegador e serve WebP de forma transparente — sem nenhuma alteração no HTML. Quando um navegador solicita uma imagem e inclui image/webp no cabeçalho Accept, o servidor responde com a versão WebP.

Configuração do Nginx

Coloque o map no bloco http e o location no seu bloco de servidor para servir variantes WebP quando existirem junto aos arquivos originais:

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Isso verifica a existência de um arquivo .webp ao lado do original (ex.: photo.jpg.webp junto a photo.jpg). Se o navegador suporta WebP e o arquivo existe, o Nginx o serve. O cabeçalho Vary: Accept garante que CDNs e proxies armazenem versões separadas para diferentes capacidades de navegador.

Regras .htaccess do Apache

Para servidores Apache, adicione estas regras de reescrita ao arquivo .htaccess:

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

Header append Vary Accept env=REDIRECT_accept

O mesmo princípio se aplica: se o navegador aceita WebP e uma variante .webp existe em disco, o Apache a serve de forma transparente. Nenhuma alteração no HTML é necessária. A flag E=accept:1 define a variável de que a última linha precisa para adicionar o cabeçalho Vary: Accept.

Soluções de Conversão Automática por CDN

A abordagem mais simples para a maioria dos sites é deixar o CDN realizar a conversão para WebP automaticamente. Você faz upload dos originais em JPG/PNG e o CDN serve WebP otimizado para navegadores compatíveis com zero alterações de código.

Soluções baseadas em CDN gerenciam automaticamente a negociação de conteúdo, o cache e a invalidação de cache. São a abordagem recomendada para sites dinâmicos onde usuários ou editores de conteúdo fazem upload de imagens — como não é possível prever quais imagens aparecerão, a conversão automática é essencial.

Configuração WebP no WordPress

O WordPress 5.8+ suporta uploads WebP nativamente, mas você precisa de um plugin para converter imagens existentes e servi-las de forma otimizada:

• ShortPixel Image Optimizer: Converte imagens existentes para WebP on the fly. Serve WebP via elemento <picture> ou reescrita .htaccess. Plano gratuito: 100 imagens/mês
• Imagify: Conversão em massa com três níveis de qualidade (normal, agressivo, ultra). Integra-se ao WP Rocket para cache. Plano gratuito: 20 MB/mês
• EWWW Image Optimizer: Gera cópias WebP automaticamente no upload. Reescreve URLs de imagens via plugin ou CDN. Otimização local ilimitada gratuita
• WebP Express: Plugin leve focado exclusivamente na conversão WebP. Configura .htaccess ou usa serving via PHP. Gratuito e open source

Para a maioria dos sites WordPress, ShortPixel ou EWWW são as escolhas mais seguras. Eles cuidam do pipeline completo: conversão no upload, geração de variantes WebP, reescrita do HTML para servir WebP e fallback para JPG/PNG em navegadores não compatíveis.

Integração com Ferramentas de Build

Para sites estáticos e frameworks JavaScript (React, Vue, Next.js, Nuxt), integre a geração de WebP ao pipeline de build para que as imagens sejam convertidas automaticamente durante a compilação.

Webpack (image-minimizer-webpack-plugin)

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        generator: [{
          preset: "webp",
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: { encodeOptions: { webp: { quality: 80 } } }
        }]
      })
    ]
  }
};

Vite (vite-plugin-imagemin)

import viteImagemin from "vite-plugin-imagemin";

export default defineConfig({
  plugins: [
    viteImagemin({
      webp: { quality: 80 }
    })
  ]
});

A conversão em tempo de build funciona bem para sites com um conjunto conhecido de imagens (páginas de marketing, documentação, blogs). Para conteúdo enviado por usuários, prefira soluções baseadas em CDN que processam imagens de forma dinâmica.

Melhores Configurações de Qualidade

Escolher a configuração correta de qualidade WebP é essencial. Muito baixa e você terá artefatos visíveis; muito alta e você perde os benefícios no tamanho do arquivo. Veja as configurações recomendadas por tipo de conteúdo:

Medindo o Impacto

Após implementar o WebP, meça a melhoria real de desempenho com estas ferramentas:

• Google Lighthouse: Execute auditorias antes e depois da migração. Verifique a auditoria "Servir imagens em formatos de próxima geração" (nas versões mais recentes, o insight "Melhorar a entrega de imagens"); as imagens convertidas devem sair da lista. Compare o score de Performance, LCP e Total Blocking Time
• PageSpeed Insights: Testa mobile e desktop a partir dos servidores do Google. As recomendações de imagem (Oportunidades nos relatórios antigos, Insights nos mais recentes) não devem mais listar as imagens convertidas
• WebPageTest: Fornece gráficos detalhados de cascata com tempos de carregamento individuais por imagem. Compare as visualizações filmstrip antes e depois para ver as diferenças na velocidade de renderização visual
• Aba Network do Chrome DevTools: Filtre por tipo "Img" e compare o tamanho total de transferência. Verifique se o cabeçalho Content-Type mostra image/webp para as imagens convertidas
• Core Web Vitals no Search Console: Monitore dados de campo por 2–4 semanas após a migração. Observe melhorias no LCP e no percentual geral de "URLs boas"

Considerações sobre Lazy Loading

WebP e lazy loading funcionam juntos para maximizar o desempenho, mas há detalhes importantes de implementação:

• Imagens acima da dobra: NÃO aplique lazy loading na imagem hero nem em qualquer imagem visível no carregamento inicial da página. Use loading="eager" (padrão) e adicione fetchpriority="high" para a imagem LCP
• Imagens abaixo da dobra: Use loading="lazy" em todas as outras imagens. O navegador adia o carregamento até que o usuário role a página na direção delas
• Sempre defina dimensões: Inclua atributos explícitos de width e height em cada tag <img> para evitar Cumulative Layout Shift (CLS)
• Decodificação assíncrona: Adicione decoding="async" para permitir que o navegador decodifique imagens fora da thread principal

<!-- Hero image: eager loading, high priority -->
<img src="hero.webp" alt="..." width="1200" height="630"
     fetchpriority="high" decoding="async">

<!-- Below-the-fold: lazy loading -->
<img src="product.webp" alt="..." width="600" height="400"
     loading="lazy" decoding="async">

Por Que o Aviso Continua Aparecendo Após a Conversão

• HTML antigo ou cache: a página ou o CDN ainda serve o JPEG original. Limpe os caches e confira o Content-Type da imagem no DevTools.
• Fundos em CSS: o <picture> não cobre background-image. Use negociação no servidor ou image-set() no CSS.
• Imagens de terceiros: anúncios, incorporações e widgets carregam imagens que você não controla.
• Regra do servidor sem correspondência: nas reescritas baseadas em Accept, a requisição precisa incluir image/webp e um arquivo .webp precisa existir ao lado do original.