🖼 Como servir imagens WebP no WordPress: 3 métodos
PageSpeed Insights mostra a recomendação «Sirva imagens em formatos de próxima geração», mas as imagens no seu site ainda estão em JPEG. Converter tudo para WebP é simples. O desafio é outro: uma pequena percentagem de visitantes com navegadores mais antigos verá imagens partidas se simplesmente substituir o formato no servidor.
A tarefa não é a conversão, é a distribuição seletiva: WebP para quem o suporta e o original para todos os outros. Em WordPress isto resolve-se de três formas diferentes, cada uma para uma stack e orçamento específicos.
💡 Visão geral rápida:
- Compreender o que é o WebP e porque é melhor do que o JPEG
- Conhecer as duas abordagens para servir WebP
- Escolher um dos três métodos para a sua stack e orçamento
- Configurar o plugin e verificar o resultado nas Chrome DevTools
O que é o WebP e porque precisa dele
WebP é um formato de imagem da Google que comprime melhor do que JPEG e PNG com a mesma qualidade visual. Uma imagem que pesa 100 KB em WebP pesa 55-75 KB. Não há magia: apenas um algoritmo de compressão mais eficiente.
O formato não é novo. A especificação foi publicada pela Google em 2010. Desde então, o WebP passou de experiência a padrão: compressão com e sem perdas, transparência, animação. Essencialmente, combina as capacidades do JPEG, PNG e GIF num único contentor.
Comparação rápida com os formatos tradicionais:
| JPEG | GIF | PNG | SVG | WebP |
|---|---|---|---|---|---|
Vetorial | ❌ | ❌ | ❌ | ✅ | ❌ |
Raster | ✅ | ✅ | ✅ | ❌ | ✅ |
Transparência | ❌ | ✅ | ✅ | ✅ | ✅ |
Animação | ❌ | ✅ | ✅ | ✅ | ✅ |
Compressão com perdas | ✅ | ❌ | ❌ | ❌ | ✅ |
Compressão sem perdas | ❌ | ❌ | ✅ | ❌ | ✅ |
A diferença de tamanho é notória. Para um site com cinquenta imagens por página, mudar para WebP reduz o peso total por múltiplos. O impacto nas Core Web Vitals e nos rankings de pesquisa é direto.
Porque não pode simplesmente ativar o WebP em todo o lado
A resposta resume-se à compatibilidade. Hoje, o WebP é suportado por mais de 96% dos navegadores: Chrome, Firefox, Safari (a partir do iOS 14), Edge. Mas permanece uma pequena percentagem de dispositivos antigos que não compreendem o formato.
Se simplesmente substituir todos os JPEG por WebP no servidor, essa pequena percentagem de visitantes verá imagens partidas. Para um site comercial ou loja online, esta perda de utilizadores é inaceitável.
Portanto, a tarefa não se resume a «converter imagens», mas a «servir WebP a quem o suporta e o original a todos os outros».
Duas abordagens básicas para servir WebP
Antes de avançar para os métodos para WordPress, vale a pena perceber como o navegador e o servidor negoceiam o formato. Existem apenas dois mecanismos.
Abordagem 1: tag
É oferecida ao navegador uma escolha entre WebP e o original diretamente na marcação HTML:
1 <picture> 2 <source srcset="img.webp" type="image/webp"> 3 <source srcset="img.jpg" type="image/jpeg"> 4 <img src="img.jpg" alt="Image description"> 5 </picture>
Um navegador com suporte para WebP carregará o primeiro <source>. Os restantes ignorarão a fonte WebP e carregarão o JPEG do <img>.
Vantagem: funciona sem configuração do servidor e com qualquer CDN. Desvantagem: não funciona com imagens de fundo em CSS e altera a estrutura HTML. Alguns plugins de cache e lazy loading tropeçam no <picture>.
Abordagem 2: resposta variada
No HTML permanece um <img src="img.jpg"> normal, mas o servidor devolve conteúdo diferente para o mesmo URL: um ficheiro WebP para navegadores com suporte para WebP, o original para todos os outros.
A chave do mecanismo é o cabeçalho HTTP Accept. O navegador envia-o em cada pedido, o servidor ou a CDN decide o que devolver.
Vantagem: funciona em todo o lado, incluindo imagens de fundo em CSS. O HTML não se altera. Desvantagem: requer configuração do servidor e nem todas as CDN consideram corretamente o Accept na chave de cache.
Vamos comparar:
|
| Resposta Variada |
|---|---|---|
Imagens de fundo | ❌ | ✅ |
Funciona com qualquer CDN | ✅ | Apenas com suporte para |
Configuração do servidor | ❌ não necessária | ✅ necessária |
Lazy loading | ✅ | ✅ |
Compatibilidade com plugins de cache | Pode entrar em conflito | ✅ |
Agora vejamos como estas abordagens são aplicadas no WordPress.
Método 1: CDN com conversão WebP on-the-fly
O caminho mais simples. Liga uma CDN que otimiza imagens em tempo real e serve WebP aos navegadores que o suportam. As cópias convertidas não são armazenadas no seu servidor, poupando espaço em disco.
Várias opções funcionais:
- BunnyCDN com o Bunny Optimizer, comprime e converte imagens em tempo real, suporta WebP na chave de cache. A partir de $0,01/GB.
- Cloudflare com o Polish (plano Pro, $20/mês), compressão e conversão automáticas para WebP.
- Cloudinary, um serviço especializado no trabalho com imagens, WebP de raiz.
- ShortPixel Adaptive Images, um plugin para WordPress que utiliza a CDN bunny.net. Converte e serve WebP automaticamente. Plano gratuito: 500 MB de tráfego por mês.
- WP Compress, um serviço híbrido: otimização de imagens mais distribuição através da sua própria CDN.
Quando escolher o método 1: se estiver disposto a pagar por uma CDN e não quiser lidar com a configuração do servidor. Ligou, ativou a otimização, funcionou.
Método 2: resposta variada + CDN
Um método para quem prefere resolver a tarefa ao nível do servidor sem alterar o markup HTML.
A essência: configura o servidor para que, num único URL, devolva WebP ou JPEG/PNG consoante o cabeçalho Accept. Todos os URLs de imagem no código permanecem iguais.
Configuração via WebP Express
A forma mais fácil de implementar a resposta variada no WordPress é o plugin WebP Express. O plugin tem mais de 400 000 instalações ativas, atualizações regulares e suporte ativo do autor. Faz três coisas:
- Converte as imagens carregadas para WebP.
- Escreve regras de redirecionamento (
.htaccesspara Apache/LiteSpeed ou regras Nginx). - Ao solicitar uma imagem, verifica o cabeçalho
Accepte devolve o formato necessário.
Após a instalação, basta clicar em «Save settings and force new.htaccess rules». O plugin configura o conversor e as regras automaticamente.
Para servidores Nginx
O WebP Express gera regras para .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Se tiver Nginx, precisa de escrever manualmente as regras na configuração:
1 ## --- Nginx rules: try WebP first, fallback to converter 2 location ~* ^/?wp-content/.*\.(png|jpe?g)$ { 3 add_header Vary Accept; 4 expires 365d; 5 if ($http_accept !~* "webp") { 6 break; 7 } 8 try_files 9 /wp-content/webp-express/webp-images/doc-root/$uri.webp 10 $uri.webp 11 /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content 12 ; 13 } 14 15 ## --- Route missing .webp requests to the realizer 16 location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ { 17 try_files 18 $uri 19 /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content 20 ; 21 } 22 ## --- End WebP Express rules
O que as regras fazem: adicionam o cabeçalho Vary: Accept (para a CDN não fazer cache do WebP para todos), tentam servir o .webp pronto e, se não existir, enviam o pedido para o conversor.
Crítico: escolher a CDN para o método 2
O erro que estraga todo o método: a CDN faz cache do WebP e serve-o a navegadores sem suporte para o formato. Isto acontece quando a CDN não considera o cabeçalho Accept na chave de cache.
Fornecedores que funcionam corretamente com Vary: Accept:
Bunny CDN, o suporte a resposta variada é ativado nas definições da zona.
- KeyCDN, também suporta WebP como parte da chave de cache. Ativado nas definições da zona, secção Cache.
- Google CDN, considera
Vary: Acceptpor predefinição.
No plano gratuito da Cloudflare não há consideração total do Accept na chave de cache. Resultado: o WebP pode ser servido onde não é suportado. Duas saídas: mudar para o plano Pro (20 $/mês) ou usar uma CDN que funcione com Vary: Accept de raiz (BunnyCDN ou KeyCDN).
Combinação WebP Express + CDN em alojamentos populares
O esquema é igual para todos: instalar o WebP Express e depois agir conforme as circunstâncias do ambiente do servidor:
- Kinsta / WP Engine, contactar o suporte. Os engenheiros adicionam a configuração Nginx para o WebP Express e ativam a chave de cache WebP correta na CDN deles (KeyCDN na Kinsta).
- Cloudways, um híbrido Apache+Nginx. O WebP Express com gravação do
.htaccesscostuma ser suficiente. As regras são assumidas automaticamente. - SiteGround, pedir ao suporte para adicionar regras Nginx e usar uma CDN compatível.
- LiteSpeed / OpenLiteSpeed / Apache, apenas WebP Express e regras
.htaccess. Escolher uma CDN com suporte aVary: Accept. - VPS próprio com Nginx (LEMP), adicionar manualmente as regras Nginx acima e ligar uma CDN com suporte a
Vary: Accept.
Quando escolher o método 2: se fundamentalmente não quiser alterar o markup HTML, tiver imagens de fundo em CSS e estiver disposto a configurar o servidor uma vez.
Método 3: via tag
Uma opção de recurso quando os dois primeiros não se adequam. Não requer configuração do servidor, funciona com qualquer CDN. O plugin substitui as tags <img> padrão por uma construção <picture> e o navegador escolhe o formato por si.
Desvantagens do método:
- Não funciona com imagens de fundo.
- Pode entrar em conflito com temas e plugins de cache que modificam a saída de
<img>. - Altera a estrutura HTML, o que por vezes quebra plugins de lazy loading.
Configuração via WebP Express
O mesmo WebP Express pode funcionar em modo <picture>. Nas definições, selecione o modo «CDN friendly» e ative a opção «Alter HTML». O plugin irá, em tempo real, envolver todos os <img> em <picture> com uma fonte WebP.
Quando escolher o método 3: se não houver acesso à configuração do servidor e a CDN não suportar Vary: Accept. Por exemplo, alojamento barato com limitações estritas ou Cloudflare gratuito.
Vídeo: WebP no WordPress em 10 minutos
Se prefere ver em vez de ler, aqui está um tutorial visual sobre a configuração de WebP via WebP Express:
O vídeo mostra a configuração completa do WebP Express, desde a instalação até à verificação no Chrome DevTools. A conversão para AVIF também é abordada, como o passo seguinte ao WebP.
⁉️🤔 Perguntas frequentes
O WebP é sempre uma redução de tamanho?
Nem sempre, mas na maioria dos casos. Para fotos e capturas de ecrã, a poupança é de 25 a 50%, segundo os programadores da Google. Para imagens com texto ou cores planas, o WebP pode até ser mais pesado do que o PNG-8. Para imagens de conteúdo, o WebP quase sempre representa um ganho. Para ícones e gráficos simples, o SVG ou o PNG otimizado são mais adequados. Plugins como o WebP Express convertem tudo; o resultado depende do formato de origem.
É possível usar WebP sem plugins no WordPress?
A partir do WordPress 5.8, sim. O núcleo aceita ficheiros
.webpao carregar para a biblioteca de multimédia. Mas não há conversão automática de imagens antigas, nem substituição de formato para o navegador. Se carregar apenas imagens novas em WebP e não se importar com a ausência de alternativa para uma pequena percentagem de navegadores antigos, os plugins não são obrigatórios. Para uma implementação completa num site já existente, não pode prescindir de um plugin: precisa de conversão em lote e de um mecanismo de substituição de formato.
Como verificar se o WebP está a ser servido corretamente?
Abra o site no Chrome, prima F12, separador Rede (Network), filtre por
Img. Na coluna Tipo (Type) deve aparecerwebp. Em alternativa: na resposta do servidor, procure o cabeçalhoX-WebP-Express(se estiver a usar o WebP Express) oucontent-type: image/webp. As Chrome DevTools são a forma mais fiável: filtre por imagens e observe a coluna Tipo. Se disserwebp, está tudo a funcionar.
O que fazer se a CDN armazenar o WebP em cache de forma incorreta?
Sintoma: alguns utilizadores veem imagens partidas, embora tudo esteja ativo nas definições. Solução: certifique-se de que a CDN considera os cabeçalhos
AccepteVaryna chave de cache. Nos painéis da BunnyCDN e da KeyCDN existem opções explícitas para isto. Se oAcceptnão estiver na chave de cache, o primeiro pedido do Chrome criará uma cópia WebP, e todos os utilizadores subsequentes, incluindo o Safari sem WebP, receberão exatamente essa cópia. Na Cloudflare não há solução gratuita: ou o plano Pro ou mudar de CDN.
WebP ou AVIF, o que escolher em 2026?
O AVIF oferece uma compressão ainda melhor (20 a 30% mais pequeno do que o WebP com a mesma qualidade), mas o suporte dos navegadores ainda está atrasado: cerca de 92% contra 96% para o WebP. Em 2026, o WebP continua a ser o padrão de facto para a web. O AVIF está a recuperar, mas a diferença no suporte dos navegadores ainda é crítica para projetos comerciais. Uma estratégia prática: WebP agora, AVIF quando o suporte ultrapassar os 95%.
Que método escolher para a sua tarefa: resumo final
A escolha do método não depende de qual é «melhor em abstrato», mas da sua stack específica e da disponibilidade para gastar tempo ou dinheiro:
- Disposto a pagar por uma CDN e não mexer no servidor, método 1 com a BunnyCDN (a partir de $0,01/GB) ou Cloudflare Pro ($20/mês). Configure em cinco minutos e esqueça o assunto.
- Tem acesso ao servidor e quer resolver de uma vez, método 2 com o WebP Express e uma CDN que suporte
Vary: Accept. Funciona com imagens de fundo, não mexe no HTML. - Sem acesso ao servidor e orçamento limitado, método 3 com o WebP Express em modo
<picture>. Não é o ideal, mas é melhor do que não ter WebP de todo.
Teste o método escolhido em staging. Verifique os cabeçalhos de resposta e a coluna Tipo nas Chrome DevTools. Certifique-se de que os navegadores antigos recebem JPEG, e não links partidos. E só depois implemente em produção.
Experimente o WebP Express, o plugin cobre ambos os métodos de servidor de origem e é gratuito. Escreva nos comentários qual a abordagem que escolheu e que dificuldades encontrou.
Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.