Como usar WebP no WordPress (2020)

Com o plugin WebP Express você pode criar imagens no formato WebP automaticamente que tornam o seu website WordPress mais rápido e de acordo com os novos padrões do WebVitals e também do Page Speed Insights.

Se você ainda não conhece o WebP:

WebP (pronunciado weppy) é um formato de imagem desenvolvido pelo Google Inc., com o objetivo de diminuir o tamanho dos arquivos e garantir uma transferência mais rápida para quem possui uma internet lenta. Outra vantagem desse novo formato de imagem é que ele une o que há de melhor em outros formatos como: a possibilidade de compressão do arquivo (como ocorre com o JPEG), a possibilidade de usar transparência (como no PNG), e o suporte a animações (como no GIF)

Fonte: Wikipédia.

Suporte ao formato WebP

Quase 4 em cada 5 usuários móveis usam um navegador capaz de exibir imagens de webp e o Google está investindo pesado no formato.

No entanto, na maioria dos sites, são exibidas imagens jpeg, que geralmente têm o dobro do tamanho das imagens de webp para uma determinada qualidade.

Com pouco esforço, os administradores do WordPress podem ter seu site veiculando imagens de webp geradas automaticamente em navegadores que o suportam, enquanto ainda veiculam arquivos jpeg e png em navegadores que não suportam webp.

O WebP é suportado nativamente no Google Chrome, Firefox, Edge, no navegador Opera e em muitas outras ferramentas e bibliotecas de software.

Os desenvolvedores também adicionaram suporte a uma variedade de ferramentas de edição de imagens.

O formato WebP inclui a biblioteca leve de codificação e decodificação libwebp e as ferramentas de linha de comando cwebp e dwebp para converter imagens para e a partir do formato WebP, além de ferramentas para exibir, compactar e animar imagens WebP.

Requisitos de Sistema para usar WebP Express

  • Servidor da web Apache ou LiteSpeed. Também pode ser feito para trabalhar com o NGINX;
  • módulo mod_rewrite para Apache;
  • PHP 5.6 ou mais recente (estamos testando apenas para 5.6. No entanto, também deve funcionar no 5.5);
  • Que um dos conversores de conversão de webp deve estar funcionando no seu servidor.

O Suporte ao WebP é incluido por padrão no DockerPress 😉

O que faz o plugin WebP Express?

O WebP Express oferece um modo simples e fácil de usar o novo formato de imagens webp no seu website sem esforço.

O plugin WebP Express suporta diferentes maneiras de fornecer imagens webp aos navegadores que o suportam:

  • Redirecionamento de imagens jpeg / png para o webp correspondente – ou para o conversor de imagens, se a imagem ainda não tiver sido convertida.
  • Altera o HTML, substituindo tags de img por tags de picture. Os webps ausentes são gerados automaticamente na visita.
  • Altera o HTML, substituindo os URLs da imagem para que todos aponte para webp. As substituições estão sendo feitas apenas para navegadores que suportam webp.

Basicamente o WebP Express modifica o WordPress Core para veicular automaticamente imagens WebP em vez de jpeg / pngs para navegadores compatíveis com WebP.

Uma vez configurado, ele converterá automaticamente as imagens, independentemente de como elas são referenciadas e também funciona em imagens referenciadas em CSS.

Como a solução não requer nenhuma alteração no HTML, ela pode ser facilmente integrada a qualquer site / estrutura.

Instalando o WebExpress no WordPress

Você pode instalar o plugin WebP Express no diretório de plugins do WordPress.

A instalação não possui nenhum segredo e você precisa pesquisar por “WebP Express” como mostra a imagem abaixo:

Instalando o WebExpress no WordPress

Conversão de imagens de JPG e PNG para WebP

O plugin WebP Express usa a biblioteca WebP Convert para converter imagens png, gif e jpg em webp. O WebP Convert é capaz de converter imagens usando vários métodos.

Existem os métodos de conversão “local”: imagick, cwebp, vips, gd. Se nada disso funcionar no seu host, existem alternativas na nuvem: ewww (pago) ou conexão com um site WordPress em que você instalou o WebP Express e ativou a funcionalidade “serviço da web”.

Configurando o plugin WebP Express

A Configuração do plugin é muito fácil e o padrão já é o suficiente para você começar a usar WebP no seu site agora mesmo.

Configurado o Modo de Operação do WebP Express

Pense nos modos de operação como predefinições que correspondem a casos de uso normais.

Configurado o Modo de Operação do WebP Express

Estas são as duas configurações mais comuns do plugin e que abrangem a maioria dos websites:

  • No modo Varied Image Responses, o WebP Express cria regras de redirecionamento para imagens, de modo que uma solicitação de jpeg resultará em uma webp – mas somente se a solicitação vier de um navegador habilitado para webp.
  • O modo Tweaked permite ver as opções subjacentes ao modo Varied Image Responses.

Configurações Gerais do plugin Webp Express

Na Seção de Configurações Gerais do plugin é possível ajustar algumas opções interessantes. Por padrão as configurações já são otimizadas e você não precisa alterar nada aqui.

Configurações Gerais do plugin Webp Express

Segue uma explicação de cada opção que você pode ajustar de acordo com as suas necessidades:

Scope

Essa configuração determina em quais pastas o WebP Express está operacional. O Padrão recomendado é o valor Uploads and Themes.

Se, por exemplo, “Only uploads” estiver selecionado, o WebP Express converterá apenas as imagens de upload e colocará um arquivo .htaccess na pasta de uploads (se necessário).

A configuração All Content” funcionará em uploads, temas, plugins – qualquer coisa na pasta wp-content (ou o que quer que tenha sido renomeado).

Image Types to work on

Esta opção permite selecionar o tipo de imagem que você quer converter para webp.

O Padrão é “Both PNG and JPG” que converte ambas PNG e JPG, mas você pode optar por somente uma das duas.

Lembre-se de que existem relatos de problemas com GD e PNG, mas não foram identificados quando isso acontece e provavelmente está nas versões mais antigas do GD.

Caso você use o DockerPress, tenha em mente que está usando a versão mais recente de qualquer biblioteca para o WordPress.

Destination Folder

Esta opção permite você escolher em qual pasta os arquivos webp serão salvos após a conversão. O valor recomendado é o “Mingled“.

  • Mingled (Misturado): Quando a opção “Mingled” é selecionada, as imagens da webp são colocadas na mesma pasta que o original, mas apenas para imagens na pasta de uploads. Outras imagens, como imagens de tema, são armazenadas separadamente.
  • In Separate Folder (Em uma pasta separada): As imagens são armazenadas em uma pasta separada (wp-content/webp-express/webp-images/doc-root).

Importante: Alterar esta opção fará com que as imagens existentes do webp sejam movidas para o novo destino.

File Extension

Esta opção controla o nome do arquivo convertido. O Valor recomendado é “Append”.

A opção “Append” resulta em nomes de arquivos como “imagem.png.webp”. A opção “Set” resulta em nomes de arquivos como “imagem.webp”.

Importante: Ce você escolher “Set”, será um problema se ambos tiverem um logo.jpg e um logo.png na mesma pasta.

A alteração dessa opção fará com que as imagens existentes do webp sejam renomeadas (somente aquelas na pasta de upload e somente aquelas que possuem uma imagem de origem correspondente).

Destination structure

Essa configuração determina como os arquivos convertidos são estruturados na pasta que o WebP Express usa para armazenar imagens de webp. A opção “Document Root” é a recomendada.

Cache-Control header

Controla o cabeçalho de controle de cache quando ocorre uma conversão bem-sucedida e no redirecionamento direto para a imagem convertida em .htaccess.

Em caso de falha na conversão, os cabeçalhos serão enviados para impedir o armazenamento em cache.

O Valor padrão é “Do Not Set”.

Configurando Regras de Redirecionamento

Na seção de Regras de Redirecionamento, as 3 opções devem ser selecionadas.

Configurando Regras de Redirecionamento

Com as 3 opções habilitadas, o WebP Express irá redirecionar as imagens convertidas para os arquivos correspondentes e também irá criar novos arquivos sob demanda.

Configurando opções de Conversão de Imagens para Webp

Aqui temos a parte mais delicada do processo e é altamente recomendado que utilize o valor padrão como mostra a imagem abaixo:

Configurando opções de Conversão de Imagens para Webp

Nestas opções você pode selecionar o método de conversão do JPG e d PNG.

Vale notar que pelo menos um método de conversão deve existir para que você possa usar o plugin corretamente. Verifique com o seu Provedor de Hospedagem.

Configurações de Alteração no HTML do WebP

Ativar esta opção altera o código HTML gerado pelo seu site de modo que as imagens de webp sejam veiculadas em navegadores compatíveis com o formato webp.

É recomendável habilitar isso mesmo quando o redirecionamento também estiver ativado, para que as respostas de imagem variadas sejam usadas apenas para as imagens que não podem ser substituídas em HTML.

Aqui é possível ver em “What to Replace” que as tags img serão substituídas por uma tag picture com diversos srcset, que é o modo recomendado atualmente.

Para obter um bom desempenho na análise das tags img da página, a opção “Use Output Buffering” deve estar habilitada em “Where to Replace”.

Configurações de Alteração no HTML do WebP

Conclusão

Este plugin é fantástico. Você terá um ganho enorme de velocidade no seu site habilitando as imagens WebP. Vale muito a pena.

Um grande abraço!

Deixe uma resposta