Se você deseja acelerar seu site WordPress , reduzir o tamanho do arquivo de imagens oferece um retorno significativo sobre o 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 produzir resultados gigantescos. O WebP pode ajudá-lo imensamente com isso!
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 reduzir o tamanho do arquivo em cerca de 25-35% sem perda perceptível de qualidade.
A maioria dos navegadores modernos e WordPress 5.8+ suportam WebP fora da caixa. Neste artigo, vamos nos aprofundar nesse novo formato de imagem empolgante e mostrar como você pode aproveitar sua grandiosidade.
Preparar? Vamos começar!
O que é WebP?
Então, o que é um arquivo WebP? Em suma, WebP é um formato de imagem desenvolvido pelo Google para otimizar imagens melhor do que os formatos de imagem populares (naquela época). Por exemplo, você tem formatos de imagem como JPEG ou JPG e PNG.
Observação: verifique como os diferentes tipos de arquivo de imagem podem afetar a velocidade do seu site.
O WebP se concentra em entregar o mesmo arquivo de imagem, apenas com tamanhos de arquivo menores. Ao reduzir o tamanho dos seus arquivos de imagem, você ainda pode dar a mesma experiência aos visitantes do seu site, mas seu site carregará mais rápido .
Por exemplo, no estudo de compressão WebP do Google, o Google descobriu que um arquivo de imagem WebP tem, em média:
- 25-34% menor do que uma imagem JPEG comparável.
- 26% menor do que uma imagem PNG comparável.
Esse é o motivo pelo qual, se você executar seu site por meio do PageSpeed Insights , uma das muitas recomendações é veicular imagens em formatos de última geração, como 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?
Primeiro, ele oferece suporte à compactação com e sem perdas , de modo que a redução exata dependerá se você está usando compactação com ou sem perdas.
Com a compactação 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.
O WebP sem perdas usa um conjunto de métodos muito mais complicado que foi desenvolvido pela equipe do WebP.
Se você deseja 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 suportá-las. Infelizmente, embora o suporte ao navegador tenha crescido muito, a compatibilidade do WebP ainda não é universal .
As imagens WebP são compatíveis com navegadores populares, como:
- Chrome ( desktop e celular )
- Firefox ( desktop e celular )
- Microsoft borda
- iOS e macOS Safari (apenas macOS 11 Big Sur e posterior )
- Opera ( desktop e celular )
No momento em que estamos escrevendo esta postagem, o Safari oferece suporte a imagens WebP apenas parcialmente.
O Internet Explorer também não tem suporte para WebP (mas o Edge oferece suporte para WebP porque é baseado no Chromium). No entanto, o uso do Internet Explorer diminuiu para menos de 1% do total de usuários da Internet. Isso é uma bênção para todos na web!
No total, cerca de 95% dos usuários da Internet usam um navegador compatível com WebP. Portanto, embora certamente tenha o suporte da maioria, esses 5% são um pequeno obstáculo, especialmente quando se trata de usuários do Safari em versões mais antigas do macOS. Em nosso tutorial WordPress WebP abaixo, mostraremos como lidar com isso para que todos os seus visitantes tenham uma ótima experiência.
Suporte WebP nos principais navegadores.
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 semelhantes.
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:
- A famosa imagem de Lenna
- 24 imagens do pacote de imagens Kodak true color
- 100 imagens de Tecnick.com
- Uma amostra aleatória de mais de 11.000 imagens da Pesquisa de imagens do Google
Como usar imagens WebP no WordPress
A partir do WordPress 5.8 , você poderá usar o formato de imagem WebP da mesma forma que os formatos JPEG, PNG e GIF. Basta enviar suas imagens para sua Biblioteca de mídia e incluí-las em seu conteúdo. Como o WordPress 5.8+ suporta o formato WebP por padrão, você não precisa instalar plug-ins de terceiros para fazer upload de imagens WebP. Isso deve ser suficiente para a maioria dos casos de uso comuns.
Para começar imediatamente, você pode consultar nossa introdução rápida sobre o uso de imagens WebP no WordPress 5.8+ . Sugerimos que você leia as advertências sobre o suporte WebP no WordPress .
No entanto, cerca de 5% das pessoas (principalmente usuários do Safari em macOS mais antigos) usam um navegador que não suporta WebP. Se você converter imagens WebP e usá-las diretamente em seu conteúdo , esses visitantes não poderão ver suas imagens, o que arruinaria sua experiência de navegação.
Além disso, gerar imagens WebP não é tão simples quanto obter uma imagem JPG / JPEG, que é o formato de arquivo de imagem padrão na maioria das câmeras, smartphones e bibliotecas de imagens online . O WordPress não oferece suporte à conversão automática de imagens para o formato WebP (ainda!).
Não se preocupe! Existe uma solução.
Você pode usar um plug-in WordPress que converte suas imagens originais para o formato WebP e também fornece a imagem original como um substituto 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 forneça a versão WebP para Chrome, Firefox, Edge, etc.
- Mostre o arquivo JPEG original aos visitantes que navegam com o Safari (em versões mais antigas do macOS) e outros navegadores que não oferecem suporte ao 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 funcionam com o Kinsta e o Kinsta CDN .
Se você estiver hospedando no Kinsta, precisará entrar em contato com nosso suporte para que possamos criar uma regra Nginx para baldes de cache WebP para alguns desses plug-ins.
ShortPixel
Plugin ShortPixel WordPress
ShortPixel é um popular plugin de otimização de imagens para WordPress que pode ajudá-lo a redimensionar e compactar automaticamente as imagens que você carrega em seu site WordPress.
Como parte de sua lista de recursos, ShortPixel também pode ajudá-lo a converter automaticamente imagens para WebP e disponibilizar essas imagens para navegadores que o suportem.
ShortPixel tem um plano gratuito limitado que permite otimizar ~ 100 imagens por mês gratuitamente. Os planos pagos começam em $ 4,99 por mês para até 5.000 imagens / créditos ou $ 9,99 uma vez 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 plug-in do WordPress.org e adicionar sua chave de API ( que você pode obter registrando-se para uma conta ShortPixel gratuita ).
Na guia Geral , você pode definir as configurações básicas para o funcionamento da otimização de imagens. Por exemplo, qual nível de compactaçã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
Para habilitar imagens WebP, vá para a guia Avançado e:
- Marque a caixa para imagens WebP
- Marque a caixa para Entregar as versões WebP ... (isso aparece depois que você marca a primeira caixa)
- Selecione o botão de opção para usar a sintaxe da tag <PICTURE> (isso aparece após marcar a caixa anterior)
- Deixe o padrão Somente via seleção de ganchos do WordPress
Como habilitar imagens WordPress WebP em ShortPixel
Em seguida, salve suas alterações.
Se você estiver hospedando no Kinsta, o 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 entrar em contato com o suporte Kinsta , e ficaremos felizes em definir a configuração do servidor para você.
Imagify
Plug-in do Imagify WordPress
Imagify é um popular plugin de otimização de imagem do mesmo desenvolvedor do WP Rocket ( um dos poucos plugins de cache que funcionam 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 essas versões aos visitantes com navegadores que o suportem.
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
Em termos de recursos, ShortPixel e Imagify compartilham muitas semelhanças. A diferença mais significativa 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 acessível.
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.
Como o ShortPixel, você pode estender os limites de sua conta em sites ilimitados.
Para usar o Imagify para fornecer imagens WordPress WebP, você precisará instalar o plug-in do WordPress.org e adicionar sua chave de API para começar.
Depois de ativar o plug-in, você pode usar a caixa Configurações gerais para escolher o nível de compressão.
Como definir o nível de compressão no Imagify
Para habilitar imagens WebP, role para baixo até a seção Otimização e encontre a seção Formato WebP :
- Marque a caixa para criar versões webp de imagens
- Marque a caixa para exibir imagens no formato webp ...
- Selecione o botão de opção para usar as tags <picture>
- Se você estiver hospedando no Kinsta e usando o Kinsta CDN, insira o URL do seu Kinsta CDN (incluindo https: // ) na caixa Se você usar um CDN (iremos informá-lo sobre como encontrar o URL do Kinsta CDN abaixo)
Como habilitar imagens WordPress WebP no Imagify
Se você estiver usando o Kinsta CDN , poderá encontrar o URL do CDN abrindo seu site no painel do MyKinsta e visitando a guia Kinsta CDN das configurações do site:
Como encontrar o URL Kinsta CDN
Assim como no ShortPixel, se você estiver hospedando no Kinsta, será necessário criar uma regra Nginx para baldes de cache WebP (entre em contato com o suporte Kinsta).
Optimole
Plug-in 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:
- Ele pode servir suas imagens por meio de seu CDN (desenvolvido pelo Amazon CloudFront).
- 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.
O Optimole também pode fornecer imagens WebP aos visitantes com navegadores que o suportem como parte dessa otimização de imagem em tempo real.
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 US $ 19 por mês para cerca de 25.000 visitantes.
Para começar, você precisará instalar o plugin do WordPress.org e ativá-lo com uma chave de 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 a 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 :
O Optimole habilita imagens WordPress WebP por padrão.
Como o Optimole lida com a entrega de suas imagens por meio de seu CDN, não há necessidade de configurar nenhuma regra Nginx se você estiver hospedando no Kinsta.
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, poderá acelerar seu site sem prejudicar a experiência do usuário. WebP é um formato de imagem moderno que faz exatamente isso, oferecendo uma redução de aproximadamente 25% no tamanho do arquivo em comparação com os arquivos JPEG ou PNG comparativos.
Cerca de 95% dos usuários da Internet já usam um navegador compatível com WebP. As versões do WordPress 5.8+ também suportam WebP fora da caixa agora. Portanto, não há razão para que você não deva usá-lo.
No entanto, uma minoria de navegadores, principalmente o Safari em versões mais antigas do macOS, ainda não oferece suporte para WebP. Portanto, você ainda não pode veicular imagens WebP para 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 oferecem suporte, enquanto usa as imagens originais para visitantes cujos navegadores não oferecem.
Para obter mais táticas para otimizar imagens, verifique nosso guia completo para otimizar imagens para desempenho na web .
Se você tiver alguma dúvida sobre como usar o WebP no WordPress, pergunte-nos nos comentários abaixo!
Economize tempo, custos e maximize o desempenho do site com:
- Ajuda instantânea de especialistas em hospedagem do WordPress, 24 horas por dia, 7 dias por semana.
- Integração Cloudflare Enterprise.
- Alcance de público global com 28 data centers em todo o mundo.
- Otimização com nosso monitoramento de desempenho de aplicativos integrado.
Tudo isso e muito mais, em um único plano, sem contratos de longo prazo, migrações assistidas e garantia de devolução do dinheiro em 30 dias. Confira nossos planos ou fale com o departamento de vendas para encontrar o plano certo para você.