Se você quer acelerar seu site WordPress, encontrar maneiras de reduzir o tamanho de suas imagens oferece um grande retorno sobre o seu investimento.

Em média, as imagens representam cerca de metade do tamanho de um arquivo de uma página web, portanto, mesmo pequenas melhorias podem ter grandes resultados.

WebP é um formato moderno de imagem que pode ajudá-lo a reduzir o tamanho das suas imagens sem alterar a sua aparência. Em média, aprender como converter uma imagem para WebP pode diminuir seu tamanho em ~25-35% sem perda discernível na qualidade.

É por isso que vamos mergulhar fundo no assunto neste post do blog!

Pronto? Vamos começar!

O que é WebP?

Então… o que é um arquivo WebP? Em resumo, WebP é um formato de imagem que é desenvolvido pelo Google. Por exemplo, você tem formatos de imagem como JPEG ou JPG e PNG, certo? Bem, WebP é um formato de arquivo alternativo para imagens.

A WebP está focada em entregar o mesmo arquivo de imagem, apenas com um tamanho de arquivo menor. Ao reduzir o tamanho dos seus arquivos de imagem, você ainda pode entregar a mesma experiência aos visitantes do seu site, mas o seu site será carregado mais rapidamente.

Por exemplo, no estudo de compressão WebP do Google, o Google descobriu que um arquivo de imagem WebP está em média…

É por isso que, se você rodar seu site através do PageSpeed Insights, uma das muitas recomendações é Servir imagens em formatos de próxima geração como o WebP:

O Google PageSpeed Insights sugere o uso de imagens WebP

O Google PageSpeed Insights sugere o uso de imagens WebP

Então como o formato WebP do Google consegue essas reduções no tamanho do arquivo?

WebP suporta tanto a compressão com e sem perdas, portanto a redução exata dependerá de se você está usando compressão com ou sem perdas

Com compressão WebP com perdas, a WebP usa algo chamado “codificação preditiva” para diminuir o tamanho do arquivo. A codificação preditiva usa os valores dos pixels vizinhos em uma imagem para prever valores e depois codifica apenas a diferença. É baseado na codificação de quadros-chave VP8.

O Lossless WebP usa um conjunto muito mais complicado de métodos que foram desenvolvidos pela equipe da WebP.

Se você quer aprender sobre as técnicas de compressão WebP em detalhes, este artigo é um bom ponto de partida.

Quais Navegadores Web suportam WebP?

Para que as imagens do WebP funcionem, o navegador de um visitante precisa apoiá-las. Infelizmente, enquanto o suporte ao navegador cresceu muito, a compatibilidade com WebP ainda não é universal.

As imagens WebP são suportadas por navegadores populares, como por exemplo:

No entanto, o grande obstáculo é o Safari. No momento em que estamos escrevendo este post, nem a versão desktop nem a versão mobile do Safari suportam imagens WebP. A Apple experimentou brevemente o suporte WebP para o Safari em 2016, mas não houve mais nenhum empurrão desde então.

O Internet Explorer também não suporta WebP (mas o Edge suporta WebP porque é baseado no Chromium).

No total, cerca de 77% dos usuários de Internet utilizam um navegador que suporta WebP. Portanto, embora certamente tenha suporte majoritário, esse 23% é muito grande para ser ignorado (em nosso tutorial de WordPress WebP abaixo, vamos mostrar como lidar com isso para que todos os seus visitantes tenham uma ótima experiência):

Suporte WebP

Suporte WebP

Comparação de tamanho WebP vs JPG vs PNG

De acordo com os testes do Google, as imagens do WebP são:

Se você quiser saber mais sobre a metodologia do Google, você pode encontrar links diretos para os resultados completos abaixo:

Ambos os testes são baseados em mais de 11.000 imagens, incluindo:

Como Usar Imagens WebP no WordPress

Como nem todos os navegadores suportam imagens WebP, você não pode simplesmente carregar arquivos de imagem WebP na sua Biblioteca de Mídia e usá-los diretamente no WordPress como você pode com JPEGs e PNGs.

Novamente, 23% das pessoas (incluindo todos os usuários do Safari) usam um navegador web que não suporta WebP. Se você converter imagens WebP e usá-las diretamente no seu conteúdo, esses visitantes não poderão ver suas imagens, o que arruinaria sua experiência de navegação.

Não se preocupe, existe uma solução!

Ao invés de carregar imagens do WebP diretamente no WordPress, você pode usar um plugin WordPress que converte suas imagens originais para o formato WebP e também fornece a imagem original como um fallback se o navegador do visitante não suportar WebP.

Por exemplo, se você carregar um arquivo JPEG no seu site, o plugin o fará:

Dessa forma, todos podem ver a sua imagem e todos ganham a experiência mais rápida possível.

Abaixo, passaremos por alguns dos melhores plugins WebP WordPress, todos trabalhando com a Kinsta e o Kinsta CDN.

Info

Se você está hospedando na Kinsta, você precisará contatar nosso suporte para que possamos criar uma regra Nginx para baldes de cache WebP para alguns desses plugins.

ShortPixel

ShortPixel WordPress plugin

ShortPixel WordPress plugin

ShortPixel é um popular plugin de otimização de imagens WordPress que pode ajudá-lo a redimensionar e comprimir automaticamente as imagens que você carrega no seu site WordPress.

Como parte de sua lista de recursos, o ShortPixel também pode ajudá-lo a converter automaticamente imagens para WebP e servir essas imagens para navegadores que suportam WebP.

ShortPixel tem um plano gratuito limitado que lhe permite otimizar ~100 imagens por mês de graça. Depois disso, os planos pagos começam em $4,99 por mês para até 5.000 imagens/créditos ou $9,99 uma única vez para um pacote de 10.000 créditos.

ShortPixel conta cada tamanho de imagem WordPress que você otimizar como um crédito. Portanto, se você quiser otimizar vários tamanhos de miniaturas de imagem, uma imagem pode usar vários créditos. Não há limites de tamanho de arquivo para as imagens.

Você pode distribuir seus créditos de ShortPixel por ilimitados websites – não há limites por site (e todos os seus websites podem usar a mesma conta ShortPixel).

Para usar o ShortPixel para servir imagens WebP no WordPress, você precisa instalar o plugin do WordPress.org e adicionar sua chave API (que você pode obter registrando-se para uma conta ShortPixel gratuita).

Na guia Geral, você pode configurar as configurações básicas para como a otimização de imagens funciona. Por exemplo, que nível de compressão usar e se as imagens devem ser redimensionadas ou não:

Como definir o nível de compressão e as dimensões da imagem no ShortPixel

Como definir o nível de compressão e as dimensões da imagem no ShortPixel

Para habilitar imagens WebP, vá para a aba Advanced e:

  1. Marque a caixa para Imagens WebP
  2. Marque a caixa para entregar as versões do WebP… (isto aparece depois de marcar a primeira caixa)
  3. Selecione o botão de rádio para Usar a sintaxe <PICTURE> tag (isto aparece após marcar a caixa anterior)
  4. Deixe o padrão Somente via seleção de ganchos do WordPress
Como habilitar imagens do WordPress WebP em ShortPixel

Como habilitar imagens do WordPress WebP em ShortPixel

Então, salve suas mudanças.

Se você estiver hospedado na Kinsta, o ShortPixel lhe dará uma mensagem de aviso sobre a configuração dos arquivos de configuração do servidor no Nginx. Para configurar estas configurações, você pode contactar o suporte da Kinsta e nós teremos prazer em configurar a configuração do servidor para você.

Imagify

Imagify WordPress plugin

Imagify WordPress plugin

Imagify é um plugin popular de otimização de imagens do mesmo desenvolvedor do WP Rocket (que é um dos poucos plugins de cache que funciona com a Kinsta).

Ele pode comprimir e redimensionar automaticamente as imagens que você carrega para o seu site WordPress. Depois, ele também pode ajudá-lo a convertê-las para WebP e servir versões WebP para os visitantes com navegadores que o suportam.

Em termos de características, ShortPixel e Imagify compartilham muitas semelhanças. A maior diferença vem quando você olha para o preço. Enquanto o ShortPixel cobra você com base em imagens sem limite de tamanho por imagem, o Imagify cobra você com base no tamanho total do arquivo, sem limite de imagem.

Portanto, se você precisa otimizar muitas imagens grandes, a abordagem do ShortPixel pode ser mais barata. Mas se você precisa otimizar muitas imagens pequenas, a abordagem do Imagify pode ser mais barata.

Imagify tem um nível gratuito limitado que permite 25 MB de otimizações por mês. Depois disso, os planos pagos começam em US$ 4,99 por mês para até 1 GB ou US$ 9,99 para um crédito único de 1 GB.

Assim como o ShortPixel, você pode distribuir os limites da sua conta por sites ilimitados.

Cansado de um host lento para o seu site WordPress? Nós fornecemos servidores de alta velocidade e suporte 24 horas por dia, 7 dias por semana, com especialistas em WordPress. Confira nossos planos

Para usar o Imagify para entregar imagens do WordPress WebP, você precisará instalar o plugin do WordPress.org e adicionar sua chave API para começar.

Uma vez ativado o plugin, você pode usar a caixa Configurações Gerais para escolher seu nível de compressão.

Como definir o nível de compressão em Imagify

Como definir o nível de compressão em Imagify

Para ativar imagens WebP, desça até a seção Otimização e encontre a seção Formato WebP:

  1. Marque a caixa para Criar versões webp das imagens
  2. Marque a caixa para Exibir imagens em formato webp…
  3. Selecione o botão de rádio para usar <PICTURE> tags
  4. Se você estiver hospedado na Kinsta e estiver usando o Kinsta CDN, digite a URL do seu Kinsta CDN no campo Se você usar uma caixa CDN (nós lhe diremos como encontrar a URL da Kinsta CDN abaixo)
Como habilitar imagens do WordPress WebP no Imagify

Como habilitar imagens do WordPress WebP no Imagify

Se você estiver usando o Kinsta CDN, você pode encontrar a URL do CDN abrindo seu site no painel MyKinsta e visitando a aba Kinsta CDN nas configurações do site:

Como encontrar a URL do CDN da Kinsta

Como encontrar a URL do CDN da Kinsta

Como no ShortPixel, se você estiver hospedando na Kinsta, você precisará criar uma regra Nginx para os baldes de cache WebP (basta chegar ao suporte da Kinsta).

Optimole

Optimole WordPress plugin

Optimole WordPress plugin

Optimole é um plugin de otimização de imagem WordPress que opera um pouco diferente do Imagify e do ShortPixel. O Optimole pode comprimir e redimensionar automaticamente suas imagens. No entanto, ele também possui duas outras características notáveis:

  1. Ele pode servir suas imagens através de seu próprio CDN (powered by Amazon CloudFront).
  2. Oferece imagens adaptativas em tempo real, através das quais a Optimole fornecerá a imagem de tamanho ideal para cada visitante. Por exemplo, alguém navegando em uma pequena tela terá uma imagem de menor resolução do que alguém navegando em uma tela Retina.

Esta abordagem é similar a outros serviços de otimização/manipulação em tempo real como Cloudinary, imgix, KeyCDN Image Processing, etc.

Como parte desta otimização de imagem em tempo real, a Optimole também pode entregar imagens WebP aos visitantes com navegadores que a suportam.

A Optimole tem um plano gratuito limitado que pode atender a cerca de ~5.000 visitantes por mês. Depois disso, os planos pagos começam em 19 dólares por mês para ~25.000 visitantes.

Para começar, você precisará instalar o plugin do WordPress.org e ativá-lo com uma chave API (que você pode obter registrando-se para uma conta Optimole gratuita).

Uma vez que você faça isso, a Optimole começará a otimizar automaticamente suas imagens e a entregá-las através do seu CDN. O suporte a WebP está ligado por padrão, portanto não há necessidade de ativá-lo manualmente.

Para configurar outras configurações, como níveis de compressão e comportamento de escalonamento, você pode ir para a Media → Optimole → Settings:

A área de configurações Optimole - As imagens do WordPress WebP estão habilitadas por padrão

A área de configurações Optimole – As imagens do WordPress WebP estão habilitadas por padrão

Como a Optimole cuida da entrega de suas imagens através de seu próprio CDN, não há necessidade de configurar nenhuma regra Nginx se você estiver hospedando na Kinsta.

Aumente a velocidade do site ⬆️ e diminua o tamanho das imagens ⬇️. Saiba como aproveitar o formato WebP no seu site #WordPress 💥Click to Tweet

Resumo

As imagens do seu site WordPress compõem uma grande parte do tamanho do arquivo de uma página média. Se você encontrar maneiras de reduzir o tamanho de suas imagens, você pode acelerar o seu site sem alterar a experiência dos seus visitantes.

WebP é um formato moderno de imagem que pode oferecer uma redução de ~25% no tamanho do arquivo em comparação com arquivos JPEG ou PNG.

A maioria dos navegadores modernos suporta WebP e cerca de 77% dos usuários de Internet têm um navegador que suporta WebP. No entanto, alguns navegadores, notadamente o Safari, ainda não oferecem suporte a WebP, portanto você não pode servir imagens WebP para todos os visitantes.

Para resolver este problema, você pode usar um plugin WordPress que converte imagens para WebP e serve versões WebP para visitantes cujos navegadores suportam este formato, enquanto usa as imagens originais para visitantes cujos navegadores não o suportam.

Três plugins que podem ajudar você a fazer isso são:

Para mais táticas de otimização de imagens, confira nosso guia completo para otimizar imagens para o desempenho da web.

Você tem alguma dúvida sobre como usar o WebP no WordPress? Pergunte-nos nos comentários.


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos