Como usar arquivos WebP no WordPress

A maioria de nós já sabe que a otimização de imagem é muito importante, pois desempenha um papel importante no tempo total de carregamento do seu site WordPress. Hoje queremos compartilhar com você uma alternativa fácil de como integrar os arquivos WebP do Google em seu site WordPress. Alguns usuários viram reduções no tamanho do arquivo de imagem de mais de 70%!

O que é WebP?

Se você não estiver familiarizado com WebP , é um formato de arquivo de imagem criado pela equipe de desempenho da Web do Google com a intenção de criar imagens menores e mais rápidas. Foi anunciado pela primeira vez em 2010 e apresenta métodos de compactação com e sem perdas. As imagens são entregues ao navegador da Web a partir de um servidor da Web com base no tipo MIME que ele usa, que é image/webp.

Imagens sem perdas WebP são 26% menores em tamanho em comparação com PNGs e imagens com perdas WebP são 25-34% menores que JPEGs.

Empresas como YouTube e eBay já estão usando o WebP para alimentar silenciosamente muitos de seus sites. Abaixo está um exemplo do eBay, onde em sua página inicial eles têm em média cerca de 30 arquivos WebP.

Por que o WebP é tão importante? De acordo com httparchive , em agosto de 2016, as imagens representavam mais de 64% do peso médio de uma página da web . Normalmente, é mais do que CSS, JS e HTML combinados. Portanto, escolher um método de otimização de imagem robusto e formato de imagem como WebP é crucial para que você possa diminuir o peso da página o máximo possível. Geralmente, quanto menor for sua página, mais rápido ela será carregada. E isso vai agradar não só seus visitantes, mas também o Google, já que a velocidade da página é um fator de ranqueamento .

Suporte WebP

Agora, embora o WebP seja muito interessante, também é importante mencionar o suporte ao navegador. Nem todos os navegadores modernos suportam WebP no momento. De acordo com caniuse , o WebP é atualmente suportado no Chrome 23+, Opera 39+, todas as versões do Opera mini, navegador Android 4.3+ e Chrome para Android.

Mas espere! Não fique muito desapontado, porque no tutorial que mostraremos abaixo, existe um método para entregar arquivos WebP para navegadores suportados e JPG/PNGs como um fallback . Isso significa que os navegadores não suportados não verão uma imagem quebrada, eles apenas verão o que estavam vendo antes. Pense no WebP como uma adição ao seu site WordPress, em vez de uma migração.

De acordo com a W3Schools , o Chrome tem o monopólio da participação de mercado de navegadores em pouco mais de 70%. Mas não tome apenas a participação de mercado como uma prova sólida, observe os dados de seus próprios visitantes e veja quais navegadores eles estão usando, pois pode diferir com base no seu nicho. Você pode se surpreender com o quão distorcidas são as estatísticas.

No Google Analytics, em “Público”, você pode clicar em “Navegador e SO” e ver quais navegadores as pessoas estão usando quando acessam seu site. Pegamos um site aleatório e como você pode ver abaixo, 67% dos visitantes são do Chrome e outros 1% do Opera. Portanto, 68% dessas pessoas podem visualizar e se beneficiar do formato de arquivo de imagem WebP!

Como usar arquivos WebP no WordPress

No exemplo de hoje, usaremos uma combinação de dois plugins diferentes do WordPress para colocar o WebP em funcionamento no WordPress. Eles são criados e desenvolvidos pela equipe da KeyCDN, que é uma rede global de entrega de conteúdo ( CDN ).

1. [premium]  Optimus Image Optimizer : Plugin de compressão de imagem sem perdas para WordPress, converte imagens para WebP
2. [grátis] WordPress Cache Enabler : Plugin de cache que permite servir WebP para navegadores suportados

Optimus Image Optimizer

Você pode baixar o Optimus Image Optimizer no repositório do WordPress , em  optimus.io ou no painel do seu plugin. Nota: Requer uma licença premium se você quiser converter suas imagens para WebP. Uma vez instalado, você pode habilitar a “Criação de arquivos WebP” nas configurações do plugin.

Depois que o WebP é ativado, isso cria essencialmente uma imagem adicional para tudo o que é convertido. Portanto, se você enviar um arquivo PNG ou JPG, agora também haverá uma versão .webp de sua imagem. Lembre-se, o PNG/JPG ainda é necessário porque eles ainda são usados para servir a navegadores não suportados. O Optimus faz compactação sem perdas, então seus PNG e JPGs também são compactados.

Há também uma opção de otimizador em massa caso você já tenha compactado suas imagens antes e ainda precise convertê-las para WebP.

Habilitador de cache do WordPress

Então, agora que você tem imagens WebP, você precisa de uma maneira de dizer ao WordPress para servir imagens WebP para navegadores suportados e PNG/JPG para outros navegadores. Isso pode ser feito com o plugin gratuito WordPress Cache Enabler. Você pode baixar o plug-in do repositório do WordPress  ou instalá-lo no painel do plug-in. Uma vez instalado, você pode ativar a opção “Criar uma versão em cache do WebP adicional” nas configurações do plug-in.

Depois de habilitar essa opção, uma versão WebP em cache adicional da sua página é criada.

E é isso! Agora você deve ter arquivos WebP em execução no seu site WordPress.

Comparação de JPG para WebP

Fizemos uma comparação de JPG com WebP para mostrar as diferenças que você pode alcançar.

O WebP resultou em uma redução de 85,87% no tamanho médio da imagem .

Comparação de PNG para WebP

Novamente, também executamos uma comparação de PNG com WebP para mostrar as diferenças que você pode alcançar.

O WebP resultou em uma redução de 42,8% no tamanho médio da imagem .

Resumo

Como você pode ver, o WebP é muito fácil de implementar em seu site WordPress e você pode obter tamanhos de arquivo de imagem drasticamente menores! Não há compactação de imagem que possa ser comparada à economia do WebP. Ah, e nós mencionamos que o WebP tem a capacidade de usar compressão sem perdas? Isso significa que você não verá nenhuma perda de qualidade perceptível. Se você está procurando uma maneira melhor de acelerar o WordPress , o WebP pode ser uma ótima solução.