Se você quiser acelerar seu site WordPress, encontrar maneiras de reduzir o tamanho das imagens oferece um grande retorno do investimento.

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

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

É por isso que vamos nos aprofundar no tópico nesta postagem do blog!

Pronto? Vamos começar!

O que é WebP?

Então ... o que é um arquivo WebP? Resumindo, WebP é um formato de imagem 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. Veja como diferentes tipos de arquivo de imagem pode afetar a velocidade do seu site.

O WebP está focado 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 oferecer a mesma experiência aos visitantes do seu site, mas seu site irá carregar mais rápido.

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

  • 25-34% menor do que uma imagem JPEG comparável.
  • 26% menor do que uma imagem PNG comparável.

É por isso, se você execute seu site por meio do PageSpeed Insights, uma das muitas recomendações é Veicule imagens em formatos de última geração como WebP:

Google PageSpeed Insights suggests using WebP images

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 ambos compressão com e sem perdas, então a redução exata dependerá se você está usando compactação com ou sem perdas

Com a compactação WebP com perdas, o 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 os valores e então codificar apenas a diferença. É baseado na codificação de quadro chave VP8.

Lossless WebP usa um conjunto de métodos muito mais complicado que foi desenvolvido pela equipe do WebP.

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

Quais navegadores da web suportam WebP?

Para que as imagens WebP funcionem, o navegador do visitante precisa oferecer suporte a elas. Infelizmente, embora o suporte ao navegador tenha crescido muito, A compatibilidade WebP ainda não é universal.

As imagens WebP são compatíveis com navegadores populares, como:

  • Cromada (desktop e celular).
  • Raposa de fogo (desktop e celular).
  • Beira.
  • Opera (desktop e celular).

No entanto, o mais notável é o Safari. No momento em que escrevemos esta postagem, nem a versão desktop nem a versão móvel do Safari oferecem suporte a imagens WebP. A Apple experimentou brevemente com suporte WebP para Safari em 2016, mas não houve mais empurrões desde então.

O Internet Explorer também não tem suporte para WebP (mas o Edge oferece suporte para WebP porque é baseado no Chromium).

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

WebP web browser support

Suporte WebP

Comparação de tamanhos WebP vs JPG vs PNG

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

  • 25-34% menor do que imagens JPEG comparáveis.
  • 26% menor do que imagens PNG comparáveis.

Se 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 oferecem suporte a imagens WebP, você não pode simplesmente carregue arquivos de imagem WebP em sua biblioteca de mídia e use-os diretamente no WordPress como você pode fazer com JPEGs e PNGs.

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

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

Em vez de enviar imagens WebP diretamente para o WordPress, você pode usar um plug-in WordPress que converte suas imagens originais para o formato WebP e também fornece a imagem original como fallback se o navegador do visitante não suportar WebP.

Por exemplo, se você enviar um arquivo JPEG para o seu site, o plug-in irá:

  • Converta o arquivo JPEG em WebP e use a versão WebP para visitantes navegando com Chrome, Firefox, etc.
  • Mostre o arquivo JPEG original aos visitantes que navegam com o Safari e outros navegadores que não oferecem suporte a WebP.

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

Abaixo, veremos alguns dos melhores plug-ins WebP WordPress, todos os quais trabalham com Kinsta e o Kinsta CDN.

Informações

Se você estiver hospedando no Kinsta, você precisará entre em contato com nosso suporte para que possamos criar uma regra Nginx para baldes de cache WebP para alguns desses plug-ins.

ShortPixel

ShortPixel WordPress plugin

Plug-in ShortPixel WordPress

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

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

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

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

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

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

No Geral guia, você pode definir as configurações básicas para o funcionamento da otimização de imagem. Por exemplo, qual nível de compactação usar e se deve ou não redimensionar as imagens:

How to set compression level and image dimensions in ShortPixel

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

Para habilitar imagens WebP, vá para o Avançado guia e:

  1. Marque a caixa para Imagens WebP
  2. Marque a caixa para Entregue as versões WebP .. (isso aparece depois de marcar a primeira caixa)
  3. Selecione o botão de opção para Usando o sintaxe de tag (isso aparece depois de marcar a caixa anterior)
  4. Deixe o padrão Apenas via seleção de ganchos do WordPress
How to enable WordPress WebP images in ShortPixel

Como habilitar imagens WordPress WebP em ShortPixel

Em seguida, salve suas alterações.

Se você estiver hospedando no Kinsta, ShortPixel lhe dará uma mensagem de aviso sobre a configuração dos arquivos de configuração do servidor no Nginx. Para definir essas configurações, você pode entre em contato com o suporte Kinsta e ficaremos felizes em definir a configuração do servidor para você.

Imagify

Imagify WordPress plugin

Plugin do Imagify WordPress

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

Ele pode compactar e redimensionar automaticamente as imagens que você carrega em seu site WordPress. Em seguida, ele também pode ajudá-lo a convertê-los em WebP e fornecer versões WebP aos visitantes com navegadores que o suportem.

Em termos de recursos, ShortPixel e Imagify compartilham muitas semelhanças. A maior diferença surge quando você olha para os preços. Enquanto o ShortPixel cobra com base nas imagens sem limite de tamanho por imagem, o Imagify cobra com base no tamanho geral do arquivo, sem limite de imagem.

Portanto, se você precisar otimizar muitas imagens grandes, a abordagem do ShortPixel pode ser mais barata. Mas se você precisar otimizar muitas imagens pequenas, a abordagem da 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 $4.99 por mês para até 1 GB ou $9.99 para um crédito único de 1 GB.

Como o ShortPixel, você pode espalhar os limites da sua conta por sites ilimitados.

Cansado de um host lento para o seu site WordPress? Oferecemos servidores extremamente rápidos e suporte de classe mundial 24 horas por dia, 7 dias por semana, de especialistas em WordPress. Confira nossos planos

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

Depois de ativar o plugin, você pode usar o Configurações Gerais para escolher o nível de compressão.

How to set compression level in Imagify

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

Para habilitar imagens WebP, role para baixo até o Otimização seção e encontre o Formato WebP seção:

  1. Marque a caixa para Crie versões webp de imagens
  2. Marque a caixa para Exibir imagens em formato webp ...
  3. Selecione o botão de opção para usar Tag
  4. Se você estiver hospedando no Kinsta e usando o Kinsta CDN, insira o URL do seu Kinsta CDN (incluindo https: //) no Se você usar uma caixa CDN (diremos a você como encontrar o URL Kinsta CDN abaixo)
How to enable WordPress WebP images in Imagify

Como habilitar imagens WordPress WebP no Imagify

Se vocês são usando o Kinsta CDN, você pode encontrar o URL do seu CDN abrindo seu site no Painel MyKinsta e visitando o Kinsta CDN guia das configurações do site:

How to find Kinsta CDN URL

Como encontrar o URL Kinsta CDN

Tal como acontece com ShortPixel, se você está hospedando no Kinsta, você precisa criar um Nginx regra para depósitos de cache WebP (basta entrar em contato com o suporte Kinsta).

Optimole

Optimole WordPress plugin

Plugin Optimole WordPress

Optimole é um plugin de otimização de imagem para WordPress que opera de maneira um pouco diferente do Imagify e ShortPixel. Optimole pode compactar e redimensionar suas imagens automaticamente. No entanto, ele também possui dois outros recursos notáveis:

  1. Ele pode servir suas imagens por meio de seu próprio CDN (desenvolvido pelo Amazon CloudFront).
  2. Ele oferece imagens adaptáveis em tempo real, por meio das quais o Optimole entrega a imagem de tamanho ideal para cada visitante. Por exemplo, alguém navegando em uma tela pequena obterá uma imagem de resolução mais baixa do que alguém navegando em uma tela Retina.

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

Como parte dessa otimização de imagem em tempo real, o Optimole também pode fornecer imagens WebP aos visitantes com navegadores que as suportem.

A Optimole tem um plano gratuito limitado que pode gerenciar imagens de exibição para cerca de 5.000 visitantes por mês. Depois disso, os planos pagos começam em $19 por mês para aproximadamente 25.000 visitantes.

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

Depois de fazer isso, o Optimole começará a otimizar automaticamente suas imagens e entregá-las por meio de seu CDN. O suporte WebP está ativado por padrão, portanto, não há necessidade de ativá-lo manualmente.

Para definir outras configurações, como níveis de compressão e comportamento de dimensionamento, você pode ir para Mídia → Otimização → Configurações:

The Optimole settings area - WordPress WebP images are enabled by default

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

Como o Optimole lida com a entrega de suas imagens por meio de seu próprio CDN, não há necessidade de configurar nenhuma regra Nginx se você estiver hospedando no Kinsta.

/ * Clique para twittar * /
body a.novashare-ctt {
display: bloco;
background: #00abf0;
margem: 30px automático;
preenchimento: 20px 20px 20px 15px;
cor: #ffffff;
decoração de texto: nenhum! importante;
sombra da caixa: nenhum! importante;
-webkit-box-shadow: nenhum! importante;
-moz-box-shadow: nenhum! importante;
fronteira: nenhum;
border-left: 5px solid #00abf0;
}
body a.novashare-ctt: hover {
cor: #ffffff;
borda esquerda: 5px sólido #008cc4;
}
body a.novashare-ctt: visitado {
cor: #ffffff;
}
body a.novashare-ctt * {
eventos de ponteiro: nenhum;
}
body a.novashare-ctt .novashare-ctt-tweet {
display: bloco;
tamanho da fonte: 18px;
altura da linha: 27px;
margin-bottom: 10px;
}
body a.novashare-ctt .novashare-ctt-cta-container {
display: bloco;
estouro: oculto;
}
body a.novashare-ctt .novashare-ctt-cta {
flutuar: certo;
}
body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
flutuar: esquerda;
}
body a.novashare-ctt .novashare-ctt-cta-text {
tamanho da fonte: 16px;
altura da linha: 16px;
alinhamento vertical: meio;
}
body a.novashare-ctt .novashare-ctt-cta-icon {
margem esquerda: 10px;
display: bloco embutido;
alinhamento vertical: meio;
}
body a.novashare-ctt .novashare-ctt-cta-icon svg {
alinhamento vertical: meio;
altura: 18px;
}
/ * Simples + Temas Alternativos Simples * /
body a.novashare-ctt.novashare-ctt-simple {
fundo: nenhum;
preenchimento: 10px 0px 10px 20px;
cor: inicial;
}
body a.novashare-ctt.novashare-ctt-simple-alt {
plano de fundo: #f9f9f9;
preenchimento: 20px;
cor: inicial;
}
body a.novashare-ctt.novashare-ctt-simple: hover, body a.novashare-ctt.novashare-ctt-simple-alt: hover {
borda esquerda: 5px sólido #008cc4;
}
body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
cor: #00abf0;
}
body a.novashare-ctt.novashare-ctt-simple: hover .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt: hover .novashare-ctt-cta {
cor: #008cc4;
}

Resumo

As imagens do seu site WordPress constituem uma grande parte do tamanho do arquivo de uma página média. Se você encontrar maneiras de reduzir o tamanho de suas imagens, acelere seu site sem mudar a experiência de seus visitantes.

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

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

Para resolver esse problema, você pode usar um plug-in WordPress que converte imagens em WebP e fornece versões WebP para visitantes cujos navegadores suportam esse formato, enquanto usa as imagens originais para visitantes cujos navegadores não o suportam.

Três plug-ins que podem ajudá-lo a fazer isso são:

  • ShortPixel.
  • Imagify.
  • Optimole.

Para mais táticas para otimizar imagens, confira nosso guia completo para otimizar imagens para desempenho na web.

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