Se você quiser acelerar o seu site WordPress, reduzir o tamanho do arquivo de suas imagens oferece um retorno significativo sobre o seu investimento. Em média, as imagens representam cerca da metade do tamanho do arquivo de uma página da web, então até mesmo pequenas melhorias podem render resultados incríveis. O WebP pode ajudá-lo imensamente com isso!
WebP é um formato de imagem moderno que pode ajudar você a reduzir o tamanho de suas imagens sem mudar a aparência delas. Em média, aprender como converter uma imagem para WebP pode reduzir o tamanho do arquivo em ~25-35%, sem perda de qualidade.
A maioria dos navegadores modernos e o WordPress 5.8+ suportam WebP. Neste artigo, vamos dar uma olhada neste novo formato de imagem e mostrar como você pode tirar proveito de suas imagens.
Pronto? Vamos começar!
O que é WebP?
Então, o que é um arquivo WebP? Em poucas palavras, 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.
Nota: Verifique como diferentes tipos de arquivos de imagem podem impactar a velocidade do seu site.
WebP foca na entrega do mesmo arquivo de imagem, apenas com arquivos de tamanho menor. Ao reduzir o tamanho de seus arquivos de imagem, você ainda pode dar 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:
- 25-34% menor do que uma imagem JPEG.
- 26% menor do que uma imagem PNG.
Esta é a razão pela qual se você executar seu site através do PageSpeed Insights, uma das muitas recomendações é Servir imagens em formatos de próxima geração como o WebP:
Então como o formato WebP do Google consegue essas reduções no tamanho do arquivo?
Primeiro, ele suporta compressão com e sem perda, então a redução exata dependerá se você estiver usando compressão com ou sem perdas.
Com compressão com perda, a WebP usa algo chamado “codificação preditiva” para diminuir o tamanho do arquivo. A codificação preditiva usa os valores dos píxeis 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 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 da internet suportam o WebP?
Para que as imagens do WebP funcionem, o navegador de internet de um visitante precisa suportá-las. Infelizmente, embora o suporte para navegadores tenha crescido muito, a compatibilidade com WebP ainda não é universal.
Imagens WebP são suportadas por navegadores populares, como, por exemplo:
- Chrome (desktop e móvel)
- Firefox (desktop e celular)
- Microsoft Edge
- iOS e macOS Safari (macOS 11 Big Sur)
- Opera (desktop e móvel)
No momento em que estamos escrevendo este artigo, o Safari suporta imagens WebP apenas parcialmente.
Internet Explorer também não suporta WebP (mas Edge suporta WebP porque é baseado no Chrome). Entretanto, o uso do IE encolheu para menos de 1% do total de usuários de Internet. Isso é uma bênção para todos na internet!
No total, cerca de 95% dos usuários de Internet usam um navegador que suporta WebP. Portanto, embora certamente tenha suporte majoritário, esses 5%, é um obstáculo menor, especialmente quando se trata de usuários do Safari em versões antigas do MacOS. Em nosso tutorial de WordPress WebP abaixo, mostraremos como lidar com isso para que todos os seus visitantes tenham uma ótima experiência.
Comparação de tamanho do WebP vs JPG vs PNG
Segundo os testes do Google, as imagens do WebP são:
- 25-34% menor do que imagens JPEG.
- 26% menor do que imagens PNG.
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, inclusive:
- A famosa imagem da Lenna
- 24 imagens do conjunto de imagens coloridas verdadeiras da Kodak
- 100 imagens do Tecnick.com
- Uma amostra aleatória de mais de 11.000 imagens do Google Image Search
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 plugins de terceiros para fazer upload de imagens WebP. Isso deve ser suficiente para a maioria dos casos de uso comum.
Para começar imediatamente, você pode consultar nossa cartilha rápida sobre o uso de imagens WebP no WordPress 5.8+. Sugerimos que você passe pelas advertências sobre o suporte WebP no WordPress.
Entretanto, cerca de 5% das pessoas (principalmente usuários do Safari em MacOS mais antigos) usam um navegador web 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, sendo o formato padrão de arquivo de imagem na maioria das câmeras, smartphones e bibliotecas de imagens on-line. O WordPress não suporta conversão automática de imagens para o formato WebP (ainda!).
Não se preocupe! Há uma solução.
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 em seu site, o plugin:
- Converte o arquivo JPEG para WebP e serve a versão WebP para Chrome, Firefox, Edge, etc.
- Mostra o arquivo JPEG original aos visitantes navegando com o Safari (em versões antigas do MacOS) e outros navegadores que não suportam WebP.
Dessa forma, todos podem ver à sua imagem, e todos ganham a experiência mais rápida possível.
Abaixo, passaremos por alguns dos melhores plugins WebP WordPress, todos eles funcionam com Kinsta e o Kinsta CDN.
Funcionalidade de otimização de imagem da Kinsta
Este primeiro não é exatamente um plugin, mas sim uma funcionalidade integrada: Otimização de Imagem da Kinsta.
Este recurso – acessado através do painel personalizado da Kinsta, MyKinsta – cria automaticamente cópias otimizadas das imagens originais do seu site, e então serve o menor dos dois arquivos de imagem para seus visitantes.
Sempre assegurar que o menor arquivo possível seja recuperado, a Otimização de Imagem aumenta imediatamente os tempos de carregamento, o que pode melhorar muito tanto seus resultados de SEO quanto a experiência de seus usuários. O recurso aproveita diretamente o rápido CDN da Kinsta para entregar os arquivos ainda mais rápido.
Os proprietários de sites podem escolher entre compressão com e sem perda para suas imagens WebP, dependendo de suas necessidades. A otimização também pode ser habilitada ou desabilitada quando quiser, caso precisar fazer alguns testes.
O recurso de Otimização de Imagem é completamente gratuito para todos os clientes Kinsta. Veja aqui como habilitá-la:
- Envie suas imagens para sua biblioteca de mídia WordPress hospedada pela Kinsta.
- Entre no seu painel MyKinsta.
- Navegue para Sites WordPress > nomedosite > CDN.
- Clique no botão Configurações abaixo da seção Otimização de imagens.
- Escolha entre Compressão sem perda e Compressão com perda, então clique em Salvar configurações.
Se você ainda não está na plataforma Kinsta, você pode experimentar o recurso sem nenhum custo, agendando uma demonstração.
Compressão sem perda vs Compressão com perda
Você pode escolher entre compressão sem perda e com perda para seus arquivos. Embora ambos os métodos comprima seus arquivos de imagem e remova seus metadados, há uma grande diferença entre eles:
- Otimização de imagens sem perda: A compressão de imagens sem perda tem impacto zero sobre a qualidade de suas imagens. Você deve escolher esta opção se a qualidade da imagem for mais importante para você do que a velocidade.
- Otimização de imagens com perda: A compressão de imagens com perda pode reduzir a qualidade de suas imagens. Escolha esta opção para maximizar e priorizar a velocidade sobre a qualidade da imagem.
A seguir, veremos alguns plugins WordPress para otimização.
ShortPixel
ShortPixel é um popular plugin de otimização de imagens WordPress que pode ajudá-lo a redimensionar e comprimir automaticamente as imagens que você envia para o seu site WordPress.
Como parte da sua lista de recursos, ShortPixel também pode ajudar você a converter automaticamente imagens para WebP e servir essas imagens para navegadores que o suportam.
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 inúmeros créditos. Não há limites de tamanho de arquivo para imagens.
Você pode distribuir seus créditos do ShortPixel por ilimitados sites – 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 adicionar sua chave API (que você pode obter registrando-se para uma conta ShortPixel gratuita).
Na aba General, você pode ajustar as configurações básicas de como a otimização da imagem funciona. Por exemplo, qual nível de compressão deve ser usado e se deve redimensionar a imagem:
Para habilitar imagens WebP, vá para a aba Advanced e:
- Marque a caixa para WebP Images
- Marque a caixa para Deliver the WebP versions… (isso aparece após você marcar a primeira caixa)
- Selecione o botão de opção Using the <PICTURE> tag syntax (isso aparece após marcar a caixa anterior)
- Deixe o padrão Only via WordPress hooks selection
Então, salve suas alterações.
Se você estiver hospedando em Kinsta, 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 entrar em contato com o suporte da Kinsta, e teremos prazer em ajustar a configuração do servidor para você.
Imagify
Imagify é um plugin de otimização de imagem popular do mesmo desenvolvedor do WP Rocket.
Ele pode comprimir e redimensionar automaticamente as imagens que você envia para o seu site WordPress. Então, ele também pode ajudá-lo a convertê-las para WebP e servir aquelas versões aos visitantes com navegadores que o suportam.
Em termos de funcionalidades, ShortPixel e Imagify compartilham muitas semelhanças. A diferença mais significativa vem quando você olha para os preços. 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 $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 estender os limites da sua conta em ilimitados sites.
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 de General Settings para escolher seu nível de compressão.
Para ativar imagens WebP, desça até a seção Optimization e encontre a seção WebP Format:
- Marque a caixa para Create webp versions of images
- Marque a caixa para Display images in webp format…
- Selecione o botão de opção para use <picture> tags
Como no ShortPixel, se você estiver hospedando em Kinsta, você precisará criar uma regra Nginx para cache de cache WebP (procure o suporte da Kinsta).
Optimole
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 tem duas outras funcionalidades notáveis:
- Ele pode servir suas imagens através do seu CDN (alimentado por Amazon CloudFront).
- Ele oferece imagens adaptativas em tempo real, onde 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.
A Optimole também pode entregar imagens WebP aos visitantes com navegadores que a suportam como parte desta otimização de imagem em tempo real.
A Optimole tem um plano gratuito limitado que pode atender cerca de ~5.000 visitantes por mês. Depois disso, os planos pagos começam em $19 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).
Após fazer isso, o Optimole começará automaticamente a otimizar suas imagens e entregá-las por meio do CDN. O suporte WebP é ativado por padrão, portanto, não há necessidade de ativá-lo manualmente.
Para ajustar outras configurações, como níveis de compressão e comportamento de escalonamento, você pode ir para a Mídia → Optimole → Settings:
Como a Optimole lida com a entrega de suas imagens através do seu CDN, não há necessidade de configurar nenhuma regra Nginx se você estiver hospedando na Kinsta.
Resumo
As imagens do seu site WordPress compõem uma grande parte do tamanho do arquivo de uma página média. Se você puder encontrar maneiras de reduzir o tamanho de suas imagens, você pode acelerar o 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 ~25% no tamanho do arquivo em comparação com arquivos JPEG ou PNG.
Cerca de 95% dos usuários de Internet já usam um navegador que suporta WebP. As versões WordPress 5.8+ também suportam WebP. Portanto, não há nenhuma razão para você não usar.
No entanto, um pequeno número de navegadores, incluindo o Safari em versões mais antigas do macOS, ainda não oferece suporte ao WebP. Portanto, você ainda não pode disponibilizar imagens WebP para todos os visitantes. Para contornar isso, você pode usar um plugin do WordPress que converte imagens em WebP e disponibiliza versões WebP para visitantes habilitados para navegador enquanto usa as imagens originais para visitantes habilitados para navegador.
Para mais táticas para otimizar imagens, confira nosso guia completo para otimizar imagens para o desempenho da web. E não se esqueça que os clientes Kinsta podem gerar automaticamente imagens WebP comprimidas, sem custo no espaço em disco, aproveitando o recurso gratuito de Otimização de Imagens incorporado na Kinsta.
Se você tem alguma dúvida sobre o uso do WebP no WordPress, por favor, pergunte nos comentários abaixo!
Jon é o Diretor de Operações na Kinsta e está envolvido diariamente com as equipes de vendas, atendimento ao cliente e suporte técnico da Kinsta. Jon é um homem de família. Então, quando não está digitando freneticamente no laptop, geralmente está ajudando um de seus filhos a consertar uma bicicleta ou configurando a Netflix para uma criança impaciente.
Deixe um comentário