Performance

Imagens WebP: por que e como usá-los em seu site WordPress

Imagens WebP: por que e como usá-los em seu site WordPress

O formato de imagem WebP é uma ótima maneira de acelerar o seu site WordPress. Fotos grandes costumam ser a principal causa de carregamento lento em um site , mas até mesmo um compressor de imagem pode fazer com que os usuários sejam forçados a carregar imagens enormes e prejudicar o carregamento do site. Além disso, os compressores também podem tirar a qualidade das imagens.

Mas há um formato de arquivo frequentemente esquecido que pode compactar imagens e ao mesmo tempo com qualidade. Se você odeia a aparência de suas fotos com compactação JPEG (que perde qualidade), ou os enormes tamanhos de arquivo PNGs, o WebP pode ser exatamente o que você está procurando.

Portanto, nesse post vamos apresentar o que é WebP entre outras questões para que você possa diminuir o tamanho das imagens e carregar as páginas do seu site com mais rapidez.

1. O que é WebP?

A maioria dos formatos de imagem que usamos hoje existem quase desde o início dos computadores, como PNG, JPEG e GIF que funcionam muito bem. 

O problema surge quando esses formatos simplesmente não estão compactando o suficiente. Embora a Internet esteja cada vez mais rápida, a ascensão dos dispositivos móveis significa menos energia concentrada. Além disso, embora as conexões móveis estejam disponíveis em todo o mundo, elas podem ser mais lentas do que a Internet conectada no cabo de rede, como nos computadores.

O WebP foi lançado em 2010 e oferece uma solução para esse problema de longa duração – melhor compactação e qualidade de imagem. Seu projeto irmão, o WebM, tem um objetivo semelhante em mente: compactar vídeo e áudio e, ao mesmo tempo otimizá-los para a web.

O WebP usa compactação com e sem perdas e até suporta transparência, perfis de cores, entre outros. Também é suportado ou parcialmente suportado por todos os principais navegadores, exceto Internet Explorer, KaiOS e algumas versões do Safari, que ainda são amplamente utilizadas atualmente.

2. Por que o WebP é importante?

O Google fez vários estudos sobre WebP e todas as vezes descobriram que seu algoritmo pode compactar 26% menor com imagens sem perda de qualidade e 25 a 34% menor com imagens com perdas.

Em outras palavras, se você optar por compactar as imagens mais em detrimento da qualidade ou compactá-las menos para preservar a clareza, o WebP faz isso muito bem!

Apesar desses benefícios, apenas 0,3% de todos os sites o usam. As tendências estão subindo, mas ainda é uma tecnologia menos utilizada considerando o quanto o WebP tem a oferecer. Isso provavelmente se deve a uma menor taxa de adoção inicial, já que o WebP não costumava oferecer suporte a recursos como animação ou transparência, e seu suporte anteriormente era pouco em navegadores comuns.

Além disso, mudar para o WebP não é tão fácil quanto usar formatos de arquivo comuns como PNG. Você não pode simplesmente salvar uma imagem WebP em seu computador e carregá-la em seu site. São necessários mais alguns passos.

Veja também: Como otimizar imagens no seu site WordPress e melhorar a performance

3. WebP x Outros tipos de arquivo

Existem muitos formatos de imagem, alguns mais adequados do que outros para certas tarefas. Alguns compactam bem; outros suportam animações; e há alguns que permitem fundos transparentes. O WebP nem sempre é a melhor escolha, mas funciona bem em várias situações.

  • PNG é um dos formatos de arquivo mais comuns, popular por sua compressão nítida e sem perdas, adequado para a exibição de fotografia e arte online.
  • Um formato de arquivo com perdas, o JPEG é uma escolha comum para reduzir o tamanho do arquivo. Isso vem com desvantagens perceptíveis na imagem e uma falta de suporte para transparência.
  • As imagens TIFF não têm absolutamente nenhuma compactação. A imagem é exibida em ótima qualidade o que é claro, tem o custo de um arquivo enorme. Este não é um bom tipo de arquivo para a web.
  • GIF é um dos poucos formatos de arquivo comuns que suportam animação. Mas sendo um formato mais antigo, ele suporta apenas 256 cores, o que geralmente deixa as imagens com uma aparência feia e de baixa qualidade.
  • Arquivos EPSSVG são uma liga à parte. Essas imagens vetorizadas são perfeitamente claras e escalonáveis, porque na verdade não são feitas de pixels.
  • E por último está o WebP, que tem uma qualidade de imagem comparável a JPEG ou PNG com tamanhos de arquivo muito menores, bem como suporte para transparência e animações. 

O WebP geralmente é uma boa escolha se você aceita perder um pouco da qualidade em troca de uma imagem menor. A menos que você esteja criando um portfólio em que a qualidade é importante, a compensação geralmente vale a pena. Se não, considere usar PNG ou JPG.

Abaixo apresentamos alguns plugins WordPress que fazem a conversão muito mais fácil:

WebP Express

Se você não precisa desses plugins de compactação e deseja apenas converter para WebP no WordPress, você pode utilizar o WebP Express. É um plugin simples, gratuito, faz muito bem o seu trabalho e é o plugin utilizado pela Inovalize em praticamente todos os projetos!

Ele usa uma biblioteca para converter localmente imagens em WebP com tecnologia em seu servidor. Nem todas as hospedagens suportam isso, mas não se desespere, pois você ainda tem opções. Você pode se conectar a outro site de sua propriedade em um host diferente que suporte o método local ou pode comprar uma chave API.

Este é um plugin um pouco avançado. Ele lida com as partes difíceis para você, mas você terá que fazer alguns ajustes de configuração.

Imagify

Imagify é mais do que apenas conversão WebP. Ele otimiza suas imagens e miniaturas conforme você as carrega, além disso, há três níveis de compressão: normal (sem perdas), agressivo (com perdas) e ultra (compressão máxima com perdas). Mas as técnicas de otimização fazem com que, mesmo em nível ultra, seja difícil dizer que a imagem foi compactada.

Quando você carrega uma imagem em seu site com o Imagify ativado, ele gera automaticamente uma versão WebP separada. Dessa forma, você pode exibir as imagens WebP otimizadas em seu site e, ao mesmo tempo, manter uma imagem reserva para navegadores não suportados.

Otimizador de imagem EWWW

EWWW é outro otimizador popular que funciona como um conversor WebP. Sua compactação é ilimitada e gratuita. Também permiti subir images em massa e o plugin compacta todas as imagens, não apenas as da sua biblioteca de mídia.

No geral, o EWWW IO é muito fácil de usar e torna a conversão de suas imagens para WebP simples. Não tem limites de upload, o que é ótimo. Mas a melhor compactação está disponível apenas em planos pagos.

ShortPixel

A ShortPixel oferece uma quantidade surpreendente de recursos para um plugin de compressão de imagem. Possui uma configuração simples e gera automaticamente versões WebP sempre que você otimiza uma imagem, seja enviando diretamente ou com o otimizador em massa. Exibi-los é tão fácil quanto alterar uma configuração ou modificar um documento em seu servidor.

Você pode converter automaticamente PNG para JPG, otimizar miniaturas, redimensionar imagens, otimizar imagens fora da galeria de mídia, remover metadados e fazer backup de imagens não otimizadas em seu servidor. 

Esse plugin oferece o máximo de graça e é definitivamente a melhor escolha se você planeja fazer upload de menos de 100 imagens por mês.

4. Imagens menores e carregamento mais rápido 

O WebP pode não ser oficialmente compatível com o WordPress, mas você ainda pode fazer uso dele em seu site utilizando plugins para facilitar a adição deste formato.

A qualidade do WebP não é tão nítida quanto outros tipos de arquivo, mas a diferença é insignificante. Você pode querer evitá-lo se estiver exibindo arte ou fotografia em um portfólio, mas na maioria dos outros casos é a melhor escolha, seja site institucional, lojas virtuais ou portais de notícias.

Veja também: 7 bancos de imagens gratuitos para potencializar seu conteúdo

O WebP carrega muito mais rápido e tem uma aparência melhor do que outras opções de compactação pesada. Você mal conseguirá perceber a diferença entre ele e os formatos de arquivo de alta qualidade como PNG. Quando você puder perder um pouco da qualidade em troca de velocidades de carregamento muito mais rápidas, use o WebP.

Fonte

Leve seu negócio para o próximo nível

Estamos prontos para desenvolver uma solução direcionada para sua empresa.