Na WPBeginner, estamos sempre avaliando novas tecnologias que podem ajudar os usuários do WordPress a criar sites mais rápidos e com melhor desempenho. As imagens WebP estão em nosso radar há algum tempo e, embora ainda não as tenhamos implementado em nosso próprio site, estamos cientes do potencial do formato.
O que torna o WebP interessante é sua capacidade de reduzir o tamanho dos arquivos de imagem em até 35% sem nenhuma perda perceptível de qualidade. Vimos sites que usam WebP alcançarem melhorias significativas na velocidade de carregamento e no engajamento do usuário.
Com base em nossa pesquisa e processo de teste, mostraremos como usar imagens WebP no WordPress para se beneficiar das vantagens de velocidade deste formato de imagem moderno.
O que é WebP?
WebP é um formato de imagem moderno desenvolvido pelo Google especificamente para uso na web. O que o torna especial é sua tecnologia de compressão superior. As imagens WebP são tipicamente 25-35% menores que os arquivos JPEG e PNG, mantendo a mesma qualidade visual.
Para colocar isso em perspectiva, se sua imagem PNG atual for de 100KB, a mesma imagem no formato WebP seria de cerca de 65-75KB, sem diferença visível na qualidade. Essa redução de tamanho se traduz diretamente em tempos de carregamento de página mais rápidos e uma melhor experiência do usuário.
O formato suporta compressão com e sem perdas, além de recursos como transparência e animação, tornando-o um substituto versátil para vários formatos tradicionais.
Você pode aprender sobre compressão de imagem em nosso guia sobre como otimizar imagens para a web.
Suporte do Navegador: O WebP está pronto para o seu site?
Atualmente, o WebP tem forte suporte dos navegadores, com mais de 95% de cobertura global. Todos os principais navegadores, incluindo Chrome, Firefox, Safari (desde o iOS 14) e Edge, suportam totalmente as imagens WebP.
Os 5% restantes consistem principalmente em versões antigas de navegadores que estão em rápido declínio de uso.
Você Deve Usar Imagens WebP no WordPress?
Para a maioria dos sites WordPress, a resposta é sim. A implementação do WebP pode acelerar significativamente seu site WordPress e funciona perfeitamente em conjunto com outras otimizações de desempenho, como plugins de cache e CDNs.
Desde o WordPress 5.8, a plataforma tem suporte nativo a WebP, o que significa que você pode fazer upload e usar imagens WebP diretamente sem nenhum plugin. No entanto, este suporte básico não inclui conversão automática ou opções de fallback.
Para obter os melhores resultados, recomendamos o uso de um plugin dedicado de otimização de imagem. Esses plugins convertem automaticamente suas imagens existentes para o formato WebP e servem versões tradicionais JPEG ou PNG para a pequena porcentagem de usuários com navegadores não suportados.
O WebP é particularmente benéfico se o seu site for rico em imagens (como blogs de fotografia, lojas de e-commerce ou portfólios) ou se o seu blog WordPress atualmente estiver com lentidão devido a imagens grandes.
Veja como usar imagens WebP no WordPress. Mostraremos vários métodos para que você possa escolher um que funcione melhor para você:
- Usando Imagens WebP no WordPress com EWWW Optimizer
- Usando Imagens WebP no WordPress com Imagify
- Usando Imagens WebP no WordPress com SG Optimizer
- Guias de Especialistas sobre o Uso de Imagens no WordPress
Tutorial em Vídeo
Se você prefere instruções escritas, continue lendo.
Método 1: Usando Imagens WebP no WordPress com EWWW Optimizer
Otimizador de Imagem EWWW é um dos melhores plugins de compressão de imagem para WordPress que permite otimizar suas imagens do WordPress. Ele também suporta Imagens WebP e pode exibi-las automaticamente em navegadores compatíveis. Veja nossa análise do Otimizador de Imagem EWWW para mais detalhes.
A primeira coisa que você precisa fazer é instalar e ativar o plugin EWWW Image Optimizer. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para a página Configurações » EWWW Image Optimizer para configurar as opções do plugin. Você será recebido por um assistente de configuração, mas pode clicar no link 'Eu sei o que estou fazendo' para sair do assistente.
Na próxima tela, você verá várias opções do plugin.
Role para baixo e marque a caixa ao lado da opção 'Conversão WebP'.
Depois disso, clique no botão 'Salvar Alterações' para armazenar suas configurações.
Em seguida, você precisa rolar para baixo até a seção Conversão WebP. O plugin agora mostrará algumas regras de reescrita com uma imagem de pré-visualização vermelha.
Você precisa clicar no botão 'Inserir Regras de Reescrita', e o plugin tentará automaticamente inserir essas regras de reescrita em seu arquivo .htaccess.
Se o plugin for bem-sucedido na adição dessas regras, a pré-visualização da imagem vermelha ficará verde com o texto 'WebP'.
Às vezes, o plugin pode não conseguir inserir as regras. Nesse caso, você precisa copiar as regras de reescrita da página de configurações do plugin e colá-las manualmente no final do seu arquivo .htaccess.
Quando terminar, retorne à página de configurações do plugin e clique novamente no botão 'Salvar Alterações'. Se a imagem de pré-visualização ficar verde, isso significa que você ativou com sucesso a entrega de imagens WebP em seu site WordPress.
Alternativamente, você pode escolher entre os métodos JS WebP Rewriting ou WebP Rewriting como suas opções de entrega de WebP. Estes são um pouco mais lentos que o método .htaccess, mas farão o trabalho.
Converta em Massa Suas Imagens Antigas para Versões WebP
O EWWW Image Optimizer permite converter facilmente seus arquivos de imagem previamente carregados em imagens WebP. Simplesmente vá para a página Mídia » Biblioteca e mude para a visualização em lista.
Em seguida, você precisa clicar no botão ‘Opções de Tela’ e alterar o ‘Número de itens por página’ para 999. Se você tiver mais de 1000 imagens, essas imagens aparecerão na próxima página.
Desta forma, você poderá selecionar rapidamente um grande número de imagens para otimização em massa. Em seguida, clique na caixa de seleção Selecionar Tudo no topo para selecionar todas as imagens.
Depois disso, clique no menu suspenso ‘Ações em Massa’ e selecione a opção ‘Otimizar em Massa’. Finalmente, clique no botão ‘Aplicar’.
Na próxima tela, o plugin lhe dará a opção de pular a compressão da imagem e apenas convertê-las para WebP. Você pode marcar esta opção se suas imagens já estiverem otimizadas.
Depois disso, clique no botão ‘Verificar Imagens Não Otimizadas’ para continuar. O plugin então mostrará o número de imagens que encontrou, para que você possa clicar no botão Otimizar para prosseguir.
Suas imagens agora serão otimizadas, e o EWWW Optimizer gerará versões WebP para suas imagens.
Testando Sua Entrega de Imagens WebP
Depois de otimizar suas imagens, você pode ir para uma postagem de blog contendo várias imagens.
Passe o mouse sobre qualquer imagem e clique com o botão direito para abrir a imagem em uma nova aba.
Isso abrirá a imagem em uma nova aba do navegador.
Você poderá ver que ela tem uma extensão .webp na barra de endereço.
Se o plugin não conseguir servir a imagem WebP, você pode voltar para a página de configurações do plugin. A partir daqui, você pode alterar a opção de entrega de WebP para os métodos ‘JS WebP Rewriting’ ou ‘WebP Rewriting’.
Método 2: Usando Imagens WebP no WordPress Com Imagify
Imagify é um plugin de otimização de imagens para WordPress criado pelo pessoal por trás do WP Rocket, o melhor plugin de cache para WordPress. Ele permite otimizar e converter imagens facilmente para o formato de imagem WebP. Veja nossa análise do Imagify para saber mais.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Imagify. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, você precisa visitar a página Configurações » Imagify para configurar as opções do plugin. A partir daqui, clique no botão ‘Criar uma Chave de API Gratuita’ para continuar.
Você será solicitado a inserir um endereço de e-mail comercial. Depois disso, você pode verificar sua caixa de entrada para um e-mail contendo sua chave de API. Copie e cole a chave na página de configurações do plugin e clique no botão ‘Salvar Alterações’.
Em seguida, você precisa rolar para baixo até a seção Otimização. Lá você precisa marcar as opções ao lado de ‘Criar versões webp de imagens’ e ‘Exibir imagens em formato webp no site’.
Abaixo disso, você pode escolher entre dois métodos de entrega para exibir imagens WebP no WordPress. O primeiro é o método .htaccess, e o segundo é usando uma tag.
O método .htaccess é mais rápido, mas não funciona se você estiver usando um serviço de CDN. O método de tag funciona com CDNs também, mas pode quebrar alguns temas do WordPress.
Você pode escolher qualquer um que funcione bem para o seu site. Depois disso, clique no botão ‘Salvar e Ir para Otimizador em Massa’ na parte inferior.
Isso o levará para a página Mídia » Otimização em Massa.
O plugin começará automaticamente a otimizar todas as suas imagens do WordPress em segundo plano.
Se você tiver muitas imagens, isso pode levar algum tempo. Não se preocupe, você pode fechar a página e voltar a ela mais tarde, pois fechar a página não interromperá o processo de otimização de imagens.
Testando suas imagens WebP no WordPress
Assim que a otimização for concluída, você pode visitar uma página ou postagem que contenha algumas imagens. Passe o mouse sobre uma imagem e clique com o botão direito para selecionar 'Abrir imagem em nova guia'.
Isso abrirá a imagem em uma nova aba do navegador.
Você poderá ver a extensão .webp na barra de endereço.
Método 3: Usando imagens WebP no WordPress com SG Optimizer
Este método é recomendado se você for um usuário SiteGround.
SiteGround é uma das melhores hospedagens WordPress. Eles oferecem um plugin SG Optimizer gratuito para seus usuários, que permite otimizar o desempenho do seu WordPress. Ele também inclui a opção de otimizar imagens do WordPress.
Primeiro, você precisa instalar e ativar o plugin SG Optimizer.
Após a ativação, o plugin adicionará um novo item de menu à sua barra lateral de administração rotulado como 'SG Optimizer'. Clicar nele o levará à página de configurações do plugin.
A partir daqui, você pode ativar as configurações de cache se desejar usar o sistema de cache integrado do SiteGround.
Depois disso, você pode mudar para a aba Otimização de Mídia e ativar a opção 'Gerar Cópias WebP de Novas Imagens'.
Abaixo disso, você verá a opção 'Gerar Arquivos WebP em Massa'.
Clicar no botão de alternância dessa opção iniciará a geração de cópias WebP para todos os arquivos de imagem em sua biblioteca de mídia do WordPress.
Assim que terminar, seu site WordPress começará a servir imagens WebP.
Testando imagens WebP no SG Optimizer
Para ver se o seu site está servindo imagens WebP, você precisa abrir uma página do seu site com algumas imagens.
Depois disso, clique com o botão direito e selecione a ferramenta Inspecionar. Isso abrirá o console do desenvolvedor, onde você precisará mudar para a aba Rede.
A partir daqui, clique na aba ‘img’ e depois recarregue a página (CTRL+R no Windows e Command+R no Mac). Conforme seu site recarrega, você verá todas as imagens carregadas no console do desenvolvedor.
Guias de Especialistas sobre o Uso de Imagens no WordPress
Esperamos que este artigo tenha ajudado você a aprender como usar imagens WebP no WordPress. Você também pode querer ver outros guias para usar imagens no seu site WordPress:
- Como adicionar imagens corretamente no WordPress (Passo a Passo)
- Como Adicionar Imagens em Destaque ou Miniaturas de Postagem no WordPress
- WebP vs. PNG vs. JPEG: O Melhor Formato de Imagem para WordPress
- Como Otimizar Imagens para Desempenho na Web Sem Perder Qualidade
- Melhores Plugins de Compressão de Imagem para WordPress Comparados
- Ferramentas para Criar Melhores Imagens para os Posts do seu Blog
- Ótimos Plugins do WordPress para Gerenciar Imagens (Atualizado)
- Texto Alternativo de Imagem vs Título de Imagem no WordPress – Qual a Diferença?
- Onde o WordPress Armazena Imagens no Seu Site?
- Como Carregar Imagens Lentamente (Lazy Load) Facilmente no WordPress
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Olaf
Sempre que nos deparamos com a questão de como acelerar um site, a mídia é uma área onde quase sempre há espaço para otimização. Praticamente todo usuário de WordPress, a menos que seja um profissional, faz upload de imagens para o site como elas são salvas em seus computadores, muitas vezes desnecessariamente grandes em dimensões e tamanho de arquivo. É interessante ver o quanto a velocidade de um site pode melhorar apenas ajustando a mídia, especificamente comprimindo imagens em um formato diferente. Eu gosto do WebP porque ele ainda oferece qualidade suficiente, mantendo os tamanhos de arquivo muito menores em comparação com o original. Para sites existentes com dezenas de imagens, é útil saber um método para fazer tudo isso em massa, e é aí que tutoriais como estes são incrivelmente valiosos.
Paul
Segui os passos que você descreveu, mas ao testar, a nova aba que abre quando seleciono "Abrir imagem em nova aba" não termina em webp, como você mostra, mas com a extensão original do arquivo. No entanto, quando seleciono "Salvar imagem como...", ela mostra webp. Não tenho certeza do que isso significa. A imagem é realmente webp e está sendo exibida como tal? O navegador que estou usando é a versão mais recente do Chrome, então não deveria estar carregando a imagem de fallback. Eu uso um plugin de cache, mas limpei o cache antes de testar.
WPBeginner Support
Você está usando imagens WebP se é isso que você vê ao salvar. Dependeria da ferramenta que você está usando, mas há redirecionamento WebP para a URL, então você mantém a URL, mas mostra a versão WebP da imagem para evitar erros 404.
Admin
MOINUDDIN WAHEED
Eu estava procurando por algum mecanismo para converter minhas imagens do WordPress para webp, pois vi uma enorme diferença no tamanho do arquivo entre imagens png e jpg e imagens webp.
Ter imagens webp definitivamente ajudará a carregar o site mais rápido. Isso melhorará a velocidade e o desempenho do site.
Obrigado pelo guia para converter imagens existentes do WordPress para o formato webp.
WPBeginner Support
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Geralmente, eu gero imagens WebP em um editor externo. No entanto, é uma prática melhor fazer o upload de imagens em formato PNG para a web e depois gerá-las em WebP? Quero dizer, é melhor ter ambos os formatos para o navegador escolher ou não? Estou preocupado que alguém ainda possa estar usando um navegador antigo que não suporta WebP, e então essas imagens não serão exibidas no meu site para esse usuário.
WPBeginner Support
Se você deseja especificamente uma imagem de fallback, permitir que plugins convertam suas imagens seria a melhor opção. Criar as imagens WebP com um editor seria a maneira recomendada de economizar espaço em seu site.
Admin
Jiří Vaněk
Obrigado pela sua resposta. Ainda tenho bastante espaço no meu FTP (100 GB), então, com base na sua resposta, prefiro usar um plugin para ter mais formatos de imagem no site, garantindo que funcione bem mesmo para navegadores mais antigos que não suportam webp. Sei que restam muito poucos navegadores assim, mas eles ainda existem. Obrigado pelo conselho.
emir
Usamos algumas imagens de webp no WooCommerce, ao fazer backup do woocommerce em outro servidor, as imagens webp não foram transferidas, voltamos ao formato jpeg novamente.
WPBeginner Support
Obrigado por compartilhar sua experiência com imagens webp. Se você entrar em contato com o suporte da sua ferramenta de backup, normalmente existem trechos de código ou outras maneiras de corrigir esse problema!
Admin
Ashikur Rahman
se eu seguir o passo 1, terei arquivos antigos em formato jpg/png, certo? isso criará uma bagunça na pasta de upload. eles removeram a opção de arquivo original, se eu usar essa opção. isso quebrará as imagens do meu post?
e o mais importante, e se eu desativar/excluir o plugin eww, ele também excluirá a imagem webp convertida?
o que devo fazer?
WPBeginner Support
O plugin atualmente mantém as imagens antigas para navegadores que não suportam imagens WebP e só criaria a imagem WebP se ela for de tamanho melhor que a jpg/png. Remover a original não quebraria seu site, mas se a maioria dos seus visitantes estiver usando navegadores antigos que não suportam WebP, ele pode quebrar para esses usuários.
Você precisaria verificar com o suporte do plugin o status atual das imagens criadas quando o plugin for removido.
Admin
Rebecca
Oi, notei que alguns plugins como o wp-optimize permitem uma opção para preservar dados EXIF na conversão para WebP. Esses dados são necessários para manter?
Obrigado antecipadamente
WPBeginner Support
Não é obrigatório, mas é útil para sites que usam essas informações.
Admin
Theo
é o que eu estou procurando,
Muito útil
WPBeginner Support
Fico feliz que nosso guia tenha sido útil!
Admin
Kim
Muito obrigado pela resposta rápida!
WPBeginner Support
Glad we could help
Admin
Kim
Esta é uma ótima dica, apenas 1 pergunta… precisarei executar o otimizador EWWW toda vez que eu fizer upload de uma nova imagem (PNG, JPG)?
WPBeginner Support
The plugin will automate the process for new uploads
Admin