Functions.php: Como Enviar Imagens WebP no WordPress sem Plugin

Você está cansado de navegar em sites lentos? Não é só você, mas o seu usuário e até o Google detestam páginas lentas, que demorem mais do que 2 segundos para se abrirem! Como as imagens estão entre os principais fatores que desencadeiam a velocidade de uma página web, resolvemos criar um artigo explicando como você poderá fazer para enviar imagens WebP no WordPress sem plugin somente modificando algumas linhas no arquivo functions.php, do seu tema.

Mas por que utilizar o formato WebP ao invés de PNG ou JPG/JPEG? O formato de imagem WebP do Google visa substituir os formatos de arquivo de imagem existentes, como JPEG/JPG/PNG, por um tamanho de arquivo menor, resultando em tempos de carregamento mais rápidos e economia significativa de largura de banda para operadores de sites.

A própria ferramenta do Google, o Google PageSpeed ​​Insights sugere que os webmasters mudem de JPEG e PNG para WebP a fim de melhorar a pontuação de velocidade do site.

O formato WebP foi anunciado em setembro de 2010, e a biblioteca de suporte atingiu a versão 1.0 em abril de 2018. O suporte para o formato aumentou ao longo dos anos e, em maio de 2021, o WebP era compatível com 94% dos navegadores da web em uso no mundo todo. Apenas o antigo e agora pouco utilizado Internet Explorer e o Safari antigo não suportam leitura de imagens WebP atualmente. Vale lembrar que a Microsoft substituiu o antigo Internet Explorer pelo Edge (suportando imagens no formato WebP) e o Safari também lançou suporte aos arquivos WebP.

Veja também: Os Melhores Temas WordPress para Portfólios

https://youtu.be/rqXMwLbYEE4

História do WebP – Tudo Começou com Vídeo:

O desenvolvimento do WebP foi meio que “acidental” para o Google. Quando o Google comprou a empresa On2 Technologies, especializada em tecnologia de codec de vídeos no formato VP8 (projeto baseado no formato de multimídia WebM), os engenheiros do Google perceberam que o formato era realmente bom para compactar quadros-chave, que são basicamente as fotos no início de uma nova cena ou sequência.
O WebP foi anunciado pela primeira vez pelo Google em 30 de setembro de 2010 como um novo formato aberto para gráficos true-color compactados com perdas na web, produzindo arquivos que eram menores do que os arquivos JPEG para uma qualidade de imagem comparável.
Em 3 de outubro de 2011, o Google adicionou um “Formato de arquivo estendido” permitindo suporte WebP para animação , perfil ICC , metadados XMP e Exif e tiling (composição de imagens muito grandes de no máximo 16384 × 16384 tiles). Arquivos GIF animados mais antigos podem ser convertidos em WebP animados.
Em 18 de novembro de 2011, o Google anunciou um novo modo de compressão sem perdas e suporte para transparência ( canal alfa ) nos modos sem perdas e com perdas; o suporte foi habilitado por padrão na libwebp 0.2.0 (16 de agosto de 2012).
De acordo com as medições do Google em novembro de 2011, uma conversão de PNG para WebP resultou em uma redução de 45% no tamanho do arquivo ao iniciar com PNGs encontrados na web, e uma redução de 28% em comparação com PNGs que são recompactados com sites de redução de imagens PNGs.
Segundo  Husain Bengali, gerente de produto WebP do Google: “Você pode obter tudo isso em um único formato”, se referindo à gama de possibilidades do uso da tecnologia WebP, tanto para imagens PNGs, JPGs ou até mesmo GIFs.
No início, houve uma relutância dos outros navegadores, como o Firefox, Internet Explorer e Safari e até mesmo redes sociais como o Facebook não oferecem suporte nativo ao WebP, fazendo com que mais da metade dos usuários web do mundo não tivessem acesso à leitura de imagens no formato WebP.
Mas, se a tecnologia permite com que empresas gigantes da internet economizem milhares de dólares mensais em largura de banda no processo de imagens, então elas praticamente acabaram se rendendo ao formato de imagens WebP, fornecendo uma adequação: mostrar arquivos no formato WebP em navegadores que suportem o formato e manter o arquivo no formato original em navegadores que ainda não suportam o formato WebP.

WebP e WordPress: Melhores Plugins Gratuitos para Conversão Automática

Como não poderia ser diferente, o WordPress possui vários plugins que fazem a conversão automática de imagens para o formato WebP, sendo os melhores e mais conhecidos:

1. WebP Express

webp express plugin

Para nós, o melhor plugin GRATUITO para converter imagens nos formatos PNG e JPG automaticamente para o WebP é o plugin WebP Express, que usa a biblioteca WebP Convert para converter imagens em webp. 
O WebP Convert é capaz de converter imagens usando vários métodos. Há os métodos de conversão “locais”: imagick, cwebp, vips, gd. Se nada disso funcionar em seu host, existem as alternativas pagas de terceiros que o plugin disponibiliza.
Todas as imagens enviadas depois que o plugin foi instalado serão automaticamente convertidas no formato WebP. Existe também a opção de forçar a conversão de todos os arquivos automaticamente, com um clique, o que torna o plugin muito fácil de ser utilizado!
O plugin oferece suporte a diferentes maneiras de fornecer webps para navegadores que o suportam:

  • Roteando imagens jpeg / png para o webp correspondente – ou para o conversor de imagens se a imagem ainda não foi convertida.
  • Alterando o HTML, substituindo tags de imagem por tags de imagem . Os webps ausentes são gerados automaticamente na visita.
  • Alterando o HTML, substituindo os URLs das imagens de forma que todos apontem para webp. As substituições estão sendo feitas apenas para navegadores que suportam webp. Novamente, os webps ausentes são gerados automaticamente na visita.
  • Em combinação com Cache Enabler , o mesmo que acima pode ser alcançado, mas com cache de página.
  • Você também pode entregar webp a todos os navegadores e adicionar webpjs javascript, que fornece suporte webp para navegadores que não suportam webp nativamente.

Naturalmente nem todos os servidores irão ser compatíveis com o plugin, pois o próprio servidor não dá suporte aos arquivos WebP, como por exemplo, a hospedagem compartilhada do Hostgator.

Confira também: Os Melhores temas WordPress para Podcasts

2. WebP Converter for Media – Convert WebP & Optimize Images

webp convert for media

Outro ótimo plugin GRATUITO para conversão automática de imagens para o formato WebP é o plugin WebP Converter for Media – Convert WebP & Optimize Images
Ao adicionar imagens à sua Biblioteca de mídia, a conversão de WebP é iniciada automaticamente e as imagens WebP são salvas em um diretório separado. Se você acabou de instalar o plugin, pode otimizar as imagens com um clique.
Quando o navegador tenta baixar um arquivo de imagem, o servidor verifica se ele suporta image/webparquivos e se o arquivo existe. Se tudo correr bem, ao invés da imagem original, o navegador receberá seu equivalente em formato WebP.
No modo de carregamento padrão o plugin não altera os URLs das imagens, portanto não há problemas em salvar o código HTML do site no cache e o tempo de sua geração não aumenta. Não importa se a imagem é exibida como uma imgtag HTML ou se você usa background-image. 
Uma mensagem de erro aparece na página do plugin dentro da administração WordPress, caso o seu servidor não seja compatível com as configurações do plugin.

Veja nossas dicas para você criar o seu CV online: Os Melhores Temas WordPress para Curriculum Vitae

3. WP Media Optimizer (.webp)

WP Media Optimizer

WP Media Optimizer (.webp) é outro plugin gratuito, utilizado para converter automaticamente imagens JPGs e PNGs em WebP. Basta instalá-lo e ativá-lo e suas imagens serão otimizadas.
Você pode enviar uma solicitação de recurso da página de configurações do plugin.Espero que você use este formulário para que eu possa adicionar novos recursos a este plugin simples e maravilhoso!
Você pode habilitar o novo recurso Lazy Load fazendo uma pequena doação ao autor, você receberá um token vitalício para este recurso e melhorias futuras.
Quando alguém acessa uma página do WordPress, o plugin verifica se há imagens já convertidas para .webp.Se uma ou mais imagens ainda não foram convertidas, o plugin as converte imediatamente.
As imagens convertidas são armazenadas em uma subpasta da pasta wp-content: wp-content / wpmowebp.

Confira: Os Melhores Temas WordPress para Criar um Portal de Empregos

WebP e WordPress: Melhores Plugins Fremiuns para Conversão Automática

Existem outros plugins fremiuns (que permitem até uma certa quantidade de imagens convertidas gratuitas), mas que você precisará pagá-los posteriormente pelo uso, como por exemplo:

1. EWWW Image Optimizer

ewww image optimizer plugin

EWWW Image Optimizer é um plugin que oferece conversões gratuitas para imagens WebP, desde que o seu servidor as suporte! Servidores que não suportem, será necessário pagar pela conversão, mas ser´um preço muito baixo, se comparado à outros concorrentes!
Recursos adicionais, como compressão de imagens sem perdas, tecnologia de desempenho SWIS e CDN própria, somente na versão paga do plugin.
EWWW IO é o único plugin que permite otimizar imagens usando ferramentas em seu próprio servidor (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp).
Com o Easy IO, as imagens são compactadas automaticamente, dimensionadas para caber no tamanho da página e do dispositivo, carregadas lentamente e convertidas para o formato WebP de próxima geração.
Otimize todas as suas imagens em uma única página. Isso inclui a Biblioteca de mídia, seu tema e um punhado de pastas pré-configuradas. GRAND FlaGallery, NextCellent e NextGEN têm suas próprias páginas Bulk Optimize.
Configure qualquer pasta dentro de sua instalação do WordPress para ser otimizada. O Bulk Optimizer compactará imagens de tema, avatares BuddyPress, imagens BuddyPress Activity Plus, slides Meta Slider, avatares WP Symposium Pro, anexos GD bbPress, Grand Media Galleries e quaisquer pastas especificadas pelo usuário. Você também pode usar a otimização agendada ou executar o otimizador do WP-CLI se for mais do seu interesse.

Deseja criar o seu site de Freelancer em WordPress? Veja estas dicas: Os 65 Melhores Temas WordPress para Freelancers em 2022

2. ShortPixel Image Optimizer

ShortPixel Image Optimizer

ShortPixel é um plugin de otimização de imagem fácil de usar, leve, instale e esqueça, que pode compactar todas as suas imagens anteriores e documentos PDF com um único clique. Novas imagens são redimensionadas / redimensionadas automaticamente e otimizadas em tempo real, em segundo plano. Também é compatível com qualquer galeria, controle deslizante ou plugin de comércio eletrônico.
A compactação de imagens com e sem perdas está disponível para os tipos de imagem mais comuns (JPG, PNG, GIF, WebP e AVIF) além de arquivos PDF.
ShortPixel vem com 100 créditos grátis/mês e créditos adicionais podem ser comprados por apenas $ 4,99 para 5.000 créditos de imagem. Lembrando que, apesar do plugin ser ótimo para compressão de imagens, para cada imagem convertida no formato WebP, você precisará pagar 1 crédito por conversão!

Quer ganhar dinheiro como Freelancer? Clique no link: Como Ganhar Dinheiro como Freelancer e saiba mais!

3. Imagify – Optimize Images & Convert WebP

Imagify Optimize Images Convert WebP

Compatível com WooCommerce e NextGen Gallery, o Imagify otimiza imagens com um clique: obtenha imagens mais claras sem perder qualidade, converta WebP e acelere seu site!
Imagify pode otimizar todas as imagens: jpgs, pngs, pdfs e gifs (animados ou não) e utilizando o Bulk Optimizer irá otimizar todas as suas imagens existentes com um clique. Imagify pode redimensionar suas imagens diretamente, você não terá que perder mais tempo redimensionando suas imagens antes de enviá-las.
Para cada imagem que você otimizar com o plugin Imagify, você também obterá sua versão WebP (se você marcar a opção nas configurações). A otimização também funcionará para imagens incluídas em seus temas, plug-ins e quaisquer imagens localizadas fora de suas pastas de biblioteca de mídia por meio de configuração de “Pastas personalizadas”.
A versão gratuita do plugin permite até 20 MB de imagens (cerca de 200 imagens) todos os meses. Mas lembre-se: para cada imagem enviada ao seu WordPress, automaticamente três diferentes tamanhos, que são considerados como imagens diferentes. Fora isso, criar versões das imagens no formato WebP também devem ser consideradas, o que faz com que o plano gratuito seja bem limitado!

Quer saber quais Os Melhores Plugins Construtores de Sites WordPress?

4. Smush – Lazy Load Images, Optimize & Compress Images

Smush Lazy Load Images Optimize Compress Images

Smush é um dos plugins de imagens mais baixados no site do WordPress.org de todos os tempos. Nós mesmos sempre o utilizamos em nossos sites, apesar de ser apenas por causa do recurso da ferramenta de definição adequada de cada imagem.

Os principais recursos do plugin Smush são:

  • Compressão sem perdas – tira dados não utilizados e comprime imagens sem afetar a qualidade da imagem;
  • Carregamento lento – Adie imagens fora da tela com o toque de um botão;
  • Bulk Smush – Otimize e comprima até 50 imagens com um clique;
  • Detecção de imagem de tamanho incorreto – localize rapidamente as imagens que estão deixando seu site mais lento;
  • Directory Smush – Otimize as imagens mesmo que não estejam localizadas na biblioteca de mídia;
  • Otimização automatizada – smush automático e assíncrono de seus anexos para compactação super rápida no upload;
  • Integração de blocos de Gutenberg;
  • Processe todos os seus arquivos – Smush processará arquivos PNG, JPEG e GIF para obter os melhores resultados.

A desvantagem é que a conversão das imagens para o formato WebP é um recurso somente na versão premium do plugin. A versão pro é uma das mais caras desta lista, custando a partir de 22 dólares mensais, com um período de 7 dias grátis, para teste!

Procurando pelos temas mais rápidos? Veja nossas dicas: Os 38 temas mais rápidos para WordPress 2022.

Plugins para Permitir Uploads de Arquivos no Formato WebP:

Se o teu servidor de hospedagem não suporta os plugins gratuitos listados acima e mesmo assim você deseja carregar imagens no formato WebP em teu site (sem a necessidade de alterar nenhum arquivo do teu tema), você poderá consegui-lo através dos seguintes plugins:

1. Support WebP

Support WebP

O plugin Support WebP é um plugin leve, que irá ajudá-lo a fazer upload de imagem em formato webp na biblioteca de mídia do WordPress, independentemente do tema. Ou seja, funciona com todos os temas.
Recursos do plugin Support WebP:

  • Capacidade de usar imagem webp;
  • Suporta todos os temas;
  • Desprovido de qualquer bloatware; ele é programado em PHP para reduzir a sobrecarga e tem impacto insignificante no tempo de carregamento do seu site.

Veja também como melhorar o SEO do teu site: Os 15 Melhores Plugins de SEO para WordPress 2022

2. Enable SVG, WebP & ICO Upload

Enable SVG WebP ICO Upload

O plugin Enable SVG, WebP & ICO Upload, como o próprio nome já diz, além de permitir o envio de imagens no formato WebP para a tua pasta de mídia do teu site WordPress, permite também o envio de arquivos no formato SVG e ICO.
Por padrão, o WordPress não permite o upload de formatos de arquivo como SVG, WebP e ICO (em alguns hostings), citando razões de segurança. Portanto, o que este plugin GRATUITO fará é permitir que você envie esses tipos de arquivos.
Basta instalar o plugin e seu site WordPress agora pode aceitar facilmente mídia em formato SVG, WebP e ICO. Você também terá a opção de desativar alguns ou todos os formatos de imagens (dos três), conforme necessário.

Functions.php: Enviar Imagens WebP no WordPress sem Plugin

Agora, se você deseja carregar e visualizar imagens no formato WebP ao teu WordPress sem o uso de plugins, então você poderá utilizar uma pequena dica de como fazê-lo através de um pequena modificação no arquivo functions.php do tema do teu site. 
Logicamente será necessário converter MANUALMENTE as imagens para o formato WebP, uma a ma, através de sites de conversões online. Dentre os melhores sites de conversão online de imagens de JPG/PNG para WebP, eu recomendo estes dois abaixo:

  1. Ezgif.com: não há limites de conversões, ou seja, é totalmente gratuito e mantém uma boa qualidade nas conversões efetuadas.
  2. Convertio.co: as conversões mantém uma ótima qualidade, mas só é permitido um total de 10 conversões diárias. Para driblar este limite, basta abri-lo em vários navegadores.

Lembrando que, não adianta apenas permitir o upload de imagens no formato WebP em teu site! Será necessário também poder visualizar os arquivos enviados, para que você possa encontrá-los depois, caso necessite alterá-los ou substituí-los posteriormente!
Veja como é fácil fazer isso, sem a necessidade do uso de plugins:
1. Utilize um programa de FTP ou navegue pelo gerenciador de arquivos no cpanel da sua hospedagem e vá até a pasta temas e escolha o tema que está utilizando. O caminho seria algo como: seusite.com/wp-content/themes/xxxx (nome do tema que está utilizando em teu site);
2. Abra o arquivo chamado “functions.php” e clique em editar;
3. Adicione estas linhas, no final do arquivo:

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

4. Clique em “salvar” .

Importante: 

*Lembre-se sempre de fazer um backup do arquivo functions.php, antes de modificá-lo, caso algo dê errado, para depois você poder corrigi-lo, apenas enviando o arquivo original no lugar do modificado.
**Toda vez que você for atualizar o tema, terá que modificar o arquivo functions.php novamente, para que possa continuar enviando e visualizando as imagens no formato WebP.

Veja também: Os Melhores Plugins de Otimização para WordPress em 2022

Conclusão – Como Enviar Imagens WebP no WordPress sem Plugin: 

Como você viu acima, existem inúmeras maneiras diferentes para que você possa converter as imagens do teu site no formato WebP, com ou sem o uso de plugins.
A maioria dos servidores de hospedagens oferecem suporte ao formato WebP, através de inúmeras bibliotecas e ferramentas de imagens. Nestes casos, o ideal é utilizar um dos plugins citados acima, principalmente para converter uma grande quantidade de imagens de uma só vez.
Em casos de servidores de hospedagens não compatíveis (hospedagens compartilhadas como do Hostgator e outros), você poderá subir arquivos através de plugins ou com a alteração do functions.php do tema do teu site WordPress, mas terá que fazê-lo manualmente, uma imagem por vez.
E aí, você já utiliza imagens no formato WebP em seu(s) site(s)? Conte-nos nos comentários abaixo o que achou das nossas dicas e se você acha importante o uso de imagens no formato WebP para otimizar os sites criados com WordPress.

Não deixe de ver também: Os 65 Melhores Plugins para Freelancers 2022 Como Personalizar a Página de Cadastro do WooCommerce sem Plugin.

Fernando Ota

Webmaster e programador, especialista em construção de sites em Wordpress, Joomla e Magento, tenho profundo conhecimento em CSS3, HTML5, java, Laravel,React, BootStrap, Mysql, Oracle e desenvolvimento de aplicativos. Fez dezenas de cursos de SEO especializado em WordPress, otimização e performance de sites, plugins e temas para WordPress e atualmente trabalha com marketing digital, SEO Onpage e Offpage, Google Analytics e otimização para sites em WordPress.

0 0 votes
Article Rating
Subscribe
Notify of
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x