No entanto, entregar imagens via WebP não é fácil. Depende do servidor web do seu servidor, cdn selecionado, tema, plugins de cache, etc.
Este guia irá ajudá-lo a entregar imagens WebP ao WordPress de três maneiras.
O que é WebP?
Novo formato de imagem para a Web
pelo Google
WebP é um formato de imagem (como png e jpg) desenvolvido pelo Google. As imagens WebP (.webp) tendem a ser muito menores, o que acelera os sites e usa menos largura de banda.
Dependendo da imagem, você pode reduzir o tamanho de 25% para 70%.
JPEG, PNG, GIF, etc. têm seus prós e contras. A tabela abaixo dá uma ideia:
| JPG | GIF | PNG | SVG | |
| Vetor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparência | ❌ | ✅ | ✅ | ✅ |
| Animação | ❌ | ✅ | ✅ | ✅ |
| Perdido | ✅ | ❌ | ❌ | ❌ |
O WebP tem quase todos os recursos mencionados acima! Então por que não podemos usar WebP em todos os lugares?
Por que não usar o WebP em todos os lugares?
Como você pode ver, apenas 80% dos dispositivos suportam apenas WebP. Não apenas navegadores legados, Safari/iOS Safari ainda não suporta WebP.
Por que é tão difícil servir WebP?
Como você percebeu, entregamos as imagens de acordo com o navegador. Se o navegador não suportar WebP, devemos fornecer a imagem original (jpg/png/gif).
Existem duas maneiras principais de servir WebP:
Usando a tag de imagem
Podemos usarfototag para informar ao navegador que temos um formato WebP. Se o navegador suportar, a imagem regular/fallback será carregada.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Por resposta diferente
Em uma resposta diferente, como de costume, você tem um arquivo. Exatamente:
<img src="img.jpg" />Um URL de imagem suporta a entrega de arquivos jpg e webp. Isso é o que o servidor faz.
Mesmo sendo uma extensão de arquivo .jpg, se o navegador suportar WebP, a resposta será WebP. Também chamado de "resposta diversa".
Tag de imagem x resposta diversa
Cada um tem os seus prós e contras. Aqui está uma tabela de comparação:
| etiqueta de imagem | Resposta diversificada | |
|---|---|---|
| Funciona com imagens de fundo | ❌ | ✅ |
| Compatível com CDN | ✅ | ✅ (apenas alguns) |
| O servidor precisa ser configurado | ❌ | ✅ (nginx) |
| Funciona com carregamento lento | ✅ | ✅ |
Como servir imagens no WebP no WordPress?
Método #1 - Use CDN apenas com conversão Fly WebP
Esta é provavelmente a solução mais simples. Alguns provedores de CDN atualmente oferecem suporte a conversão de imagem em tempo real para WebP junto com otimização de imagem.
Aqui estão alguns:
- BunnyCDN
- Cloudflare com polonês (plano Pro)
- Cloudinário
- Imagens adaptáveis ShortPixel (usa StackPath CDN)
- WP Comprimir
Você também pode economizar espaço em disco usando esse método, pois não precisa armazenar imagens WebP regulares e convertidas.
BunnyCDN
O BunnyCDN vem com o Bunny Optimizer, que pode compactar imagens e convertê-las para WebP em tempo real.
Método nº 2 - Usando Resposta Diversa + CDN
Conforme descrito acima, uma "resposta variada" terá um único URL de imagem que pode veicular imagens WebP e não Webp, dependendo do navegador solicitado.
Também precisamos escolher o CDN correto que suporte cabeçalhos de solicitação WebP como chave de cache. Caso contrário, assim que a imagem WebP for armazenada em cache no servidor, ela será entregue a navegadores que não suportam WebP.
Personalizando a resposta variada no WordPress
A maneira mais fácil de configurar uma resposta rica para WebP no WordPress é usar o plug-in WebP Express. Basta instalar o plugin e clicar em "Salvar configurações e forçar novas regras .htaccess".
O WebP Express configurará o conversor WebP e substituirá as regras para que, quando receber uma solicitação, converta as imagens para WebP em tempo real e, se o navegador não suportar WebP, a imagem padrão será entregue.
Se você estiver no Nginx
O WebP Express adiciona as regras de reescrita '.htaccess' necessárias, mas só funciona em um servidor Apache, LiteSpeed ou OpenLiteSpeed. Se você estiver usando o Nginx, você precisa editarnginx.confige adicione o seguinte código:
# Regras WebP Express# --------------------localização ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Variar Accept;expira 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Encaminhe solicitações de webps inexistentes para o local do conversor ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (as regras do WebP Express terminam aqui)O código acima adiciona os cabeçalhos de resposta necessários (o gerenciamento de cache também varia) e tenta entregar o WebP, se existir, caso contrário, redirecione-o para o conversor (com base no suporte do navegador)
Provedores de CDN que apoiam a resposta diversa
Se o seu provedor de CDN não suportar WebP como chave de cache, os arquivos WebP serão entregues a navegadores que não suportam WebP. Da mesma forma, há uma chance de que imagens não-webp sejam entregues a navegadores compatíveis.
BunnyCDN , KeyCDN , Google CDN e muitos outros provedores de CDN suportam WebP como chave de cache. Certifique-se de habilitá-los nas configurações.
VBunnyCDN :
VKeyCDN :
Você está usando o plano gratuito da Cloudflare?
Infelizmente, o plano gratuito da Cloudflare não suporta WebP como chave de cache. Use um CDN como o BunnCDN ou atualize para o plano profissional.
Configure uma resposta diversificada + CDN com provedores de hospedagem populares
Certifique-se de que o WebP Express esteja instalado.
- Kinsta ou WP Engine - entre em contato com sua equipe de suporte para adicionar a configuração Nginx acima e incluir a chave de cache WebP em seu CDN (KeyCDN).
- Cloudways - basta instalar o WebP Express e salvar as configurações usando .htacess. Como o Cloudways usa uma abordagem híbrida Apache + Nginx, ele funciona imediatamente.
- SiteGound - Entre em contato com o suporte para adicionar a configuração do Nginx. Use um CDN compatível como acima.
- Servidor LiteSpeed/OpenLiteSpeed/Apache - basta instalar o WebP Express e salvar as configurações com '.htacess'. Use também um CDN suportado como acima.
- VPS personalizado com Nginx (LEMP Stack) - Configurar
nginx.confe use um CDN suportado como acima.
Método nº 3 - Usando uma tag de imagem
Se ambos os métodos acima não funcionarem para você, você pode usar a tag de imagem. Não requer configuração de servidor (edição de nginx.conf) e suporta todos os provedores de CDN.
O uso desse método alterará o HTML para entrega WebP. Não funcionará com imagens de fundo, é incompatível com alguns temas, plugins de cache, plugins de carregamento lento, etc.
Se você usar esse método, todas as tags img serão convertidas assim:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Se o navegador suportar WebP, o arquivo correspondente será entregue; caso contrário, uma imagem normal será entregue.
Personalizando uma tag de imagem para WebP no WordPress
A maneira mais fácil de configurar uma tag de imagem é por meio do WebP Express.
Defina o modo de trabalho para “CDN friendly” e ative “Alter HTML”.
Conclusão
Eu gostaria que chegasse o dia em que todos os navegadores suportassem WebP!
Se você puder gastar alguns dólares por mês, a maneira mais fácil e eficiente é usar um CDN como o BunnyCDN, que converterá imagens para WebP na hora. Caso contrário, atenha-se ao método nº 2 que mencionei acima.
