arquivos webp 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 sobre como integrar os arquivos WebP do Google ao seu site WordPress. Alguns usuários viram reduções de tamanho de arquivo de imagem acima de 70%!


O que é WebP?

Se você não conhece WebP, é um formato de arquivo de imagem criado pela equipe de desempenho da Web no 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 ou sem perdas. As imagens são entregues ao navegador da web a partir de um servidor da web com base no tipo MIME usado, que é image / webp.

As imagens sem perdas WebP são 26% menor em tamanho comparado aos PNGs e às imagens com perda de WebP. 25-34% menor 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 na página inicial eles têm em média cerca de 30 arquivos WebP.

ebay de uso de webp

Por que o WebP é tão importante? De acordo com 0.8parchive, a partir de agosto de 2016, as imagens representam mais de 64% do peso médio de uma página da web. Normalmente, é mais do que seu CSS, JS e HTML combinados. Portanto, a escolha de um método robusto de otimização de imagem e de um formato de imagem como o WebP é crucial para que você possa diminuir o peso da página o máximo possível. Geralmente, quanto menor sua página, mais rápida ela será carregada. E isso agradará não apenas seus visitantes, mas também o Google, como a velocidade da página é um fator de classificação.

Suporte WebP

Agora, embora o WebP seja muito empolgante, também é importante mencionar o suporte ao navegador. Nem todos os navegadores modernos oferecem suporte ao WebP no momento. De acordo com eu posso usar, No momento, o WebP é compatível com Chrome 23+, Opera 39+, todas as versões do Opera mini, navegador Android 4.3+ e Chrome para Android.

suporte ao navegador webp

Mas espere! Não fique desapontado, porque no tutorial, mostraremos a seguir, existe um método para entregar arquivos WebP para navegadores e JPG / PNGs suportados como substituto. Isso significa que navegadores não suportados não verão uma imagem corrompida, 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 W3Schools, O Chrome detém o monopólio da participação no mercado de navegadores em pouco mais de 70%. Mas não tome apenas a participação de mercado como uma prova sólida, veja os dados de seus próprios visitantes e veja quais navegadores eles estão usando, pois podem diferir com base no seu nicho. Você pode se surpreender com a distorção das 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. Nós criamos um site aleatório e, como você pode ver abaixo, 67% dos visitantes são do Chrome e outro 1% do Opera. assim 68% dessas pessoas podem visualizar e se beneficiar do WebP formato de arquivo de imagem!

navegadores chrome 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 do KeyCDN, que é uma rede global de entrega de conteúdo (CDN).

  1. [Prêmio] Optimus Image Optimizer: Plugin de compressão de imagem sem perdas para WordPress, converte imagens em WebP
  2. [livre] Ativador de cache do WordPress: Cache de plug-in que permite servir WebP para navegadores suportados

Optimus Image Optimizer

Pode transferir o Optimus Image Optimizer a partir do Repositório WordPress, de optimus.io, ou de dentro do painel de plug-ins. Nota: Requer uma licença premium se você deseja converter suas imagens em WebP. Uma vez instalado, você pode ativar a “Criação de arquivos WebP” nas configurações do plugin.

criação de arquivos webp

Após a ativação do WebP, 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 da sua imagem. Lembre-se de que o PNG / JPG ainda é necessário porque ainda é usado para servir a navegadores não suportados. A Optimus realiza uma compactação sem perdas, pelo que os seus PNG e JPG também são comprimidos.

arquivos webp e png

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

otimizador de imagens em massa

Ativador de cache do WordPress

Então, agora que você tem imagens da WebP, precisa de uma maneira de dizer ao WordPress para veicular imagens da WebP em navegadores suportados e PNG / JPG nos outros navegadores. Isso pode ser realizado com o plugin WordPress Cache Enabler gratuito. Você pode baixar o plugin no diretório Repositório WordPress ou instale-o no painel do plug-in. Depois de instalado, você pode ativar a opção “Criar uma versão em cache adicional do WebP” nas configurações do plug-in.

configurações do habilitador de cache

Depois de ativar essa opção, uma versão WebP em cache adicional da sua página é criada.versões do webp

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

Comparação JPG para WebP

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

NOME DO ARQUIVOJPG ORIGINALJPG COMPRIMIDOFORMATO DA WEBPDIFERENÇA DE TAMANHO%
jpg-para-webp-1.jpg758 KB685 KB109 KB86%
jpg-para-webp-2.jpg599 KB529 KB58,8 KB90%
jpg-para-webp-3.jpg960 KB881 KB200 KB79%
jpg-para-webp-4.jpg862 KB791 KB146 KB83%
jpg-para-webp-5.jpg960 KB877 KB71,7 KB93%

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

Comparação de PNG para WebP

Mais uma vez, também fizemos uma comparação de PNG para WebP para mostrar as diferenças que você pode alcançar.

Nome do arquivoPNG originalPNG compactadoFormato WebPDiferença de tamanho%
png-para-webp-1.png44 KB34 KB30 KB32%
png-para-webp-2.png46 KB35 KB33 KB28%
png-para-webp-3.png43 KB31 KB25 KB42%
png-para-webp-4.png30 KB24 KB18 KB40%
png-para-webp-5.png15 KB11 KB8 KB47%
png-para-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-para-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-para-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-para-webp-12.png61 KB45 KB39 KB36%
png-para-webp-13.png32 KB25 KB21 KB35%
png-para-webp-14.png26 KB21 KB17 KB35%
png-para-webp-15.png14 KB12 KB9 KB36%
png-para-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-para-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-para-webp-20.png23 KB20 KB18 KB22%

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

Sumário

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me