WebP para Sites: Por Que Você Deve
Migrar do JPG/PNG

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

Adicione isso ao bloco de servidor Nginx 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,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.

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 o diagnóstico "Servir imagens em formatos de próxima geração" — ele deve desaparecer. Compare o score de Performance, LCP e Total Blocking Time
• PageSpeed Insights: Testa mobile e desktop a partir dos servidores do Google. A seção "Oportunidades" não deve mais listar otimização de imagens como recomendação
• 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">