Todos nós queremos que nossos sites tenham ótima aparência e carreguem rapidamente. Na WPBeginner, entendemos o equilíbrio entre boa qualidade de imagem e tempos de carregamento rápidos. Muitos proprietários de sites usam formatos de imagem modernos para melhorar o desempenho e nos perguntam sobre o uso de imagens WebP para resolver esse desafio.
As imagens WebP são um novo tipo de formato de imagem que torna seus arquivos de imagem menores e, ao mesmo tempo, com excelente aparência. Isso significa que seu site carrega mais rápido e usa menos largura de banda.
No entanto, o WordPress não tem suporte interno para carregar ou exibir imagens WebP. Isso pode ser um problema se você estiver tentando otimizar suas imagens.
Neste artigo, mostraremos uma maneira simples de usar imagens WebP em seu site WordPress. Isso o ajudará a melhorar o desempenho do seu site sem sacrificar a qualidade da imagem.

O que é WebP?
O WebP é um formato de arquivo mais recente para imagens a serem usadas na Web. Ao usar o formato de imagem WebP, suas imagens terão um tamanho de arquivo 25 a 34% menor do que PNG e JPEG sem perder a qualidade.
Se as imagens estiverem deixando seu site lento, convertê-las para o formato WebP pode melhorar as pontuações do teste de velocidade de carregamento da página.
Você pode saber mais sobre compactação de imagens em nosso guia sobre como otimizar imagens para a Web.
Como o WebP é um novo formato de arquivo, ele ainda não é compatível com todos os navegadores. No entanto, a maioria dos navegadores modernos, como Google Chrome, Firefox e Microsoft Edge, é compatível com imagens WebP.
Você deve usar imagens WebP no WordPress?
As imagens WebP podem ajudá-lo a acelerar seu site WordPress. É uma prática recomendada a ser usada junto com um plugin de cache do WordPress, CDN e outros.
Desde o WordPress 5.8, o WordPress oferece suporte a imagens WebP por padrão. Isso significa que você pode salvar e carregar suas imagens WebP em seu site WordPress sem usar um plug-in.
Mas, dito isso, talvez você ainda queira usar um plugin de compactação de imagens em seu site WordPress. Se muitos dos seus usuários usarem navegadores sem suporte, considere a possibilidade de usar um plug-in de compactação de imagens.
Os plug-ins de compactação de imagens podem converter suas imagens existentes no formato WebP e exibir imagens JPEG ou PNG como opção alternativa em navegadores que ainda não suportam o WebP.
Se o seu site usa muitas imagens e elas estão deixando o blog do WordPress mais lento, considere a possibilidade de usar imagens WebP.
Veja a seguir como usar imagens WebP no WordPress. Mostraremos vários métodos para que você possa escolher o que funciona melhor para você:
Tutorial em vídeo
Se você preferir instruções escritas, continue lendo.
Método 1: Usar imagens WebP no WordPress com o EWWWW Optimizer
OEWWW Image Optimizer é um dos melhores plug-ins de compactação de imagens do WordPress que permite otimizar suas imagens do WordPress. Ele também é compatível com imagens WebP e pode exibi-las automaticamente nos navegadores compatíveis. Consulte nossa análise do EWWW Image Optimizer para obter mais detalhes.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in EWWW Image Optimizer. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, vá para a página Settings ” EWWW Image Optimizer para configurar as opções do plug-in. 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 de plug-in.
Role para baixo e marque a caixa ao lado da opção “WebP Conversion” (Conversão de WebP).

Depois disso, clique no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.
Em seguida, você precisa rolar para baixo até a seção WebP Conversion (Conversão de WebP). O plug-in agora mostrará algumas regras de reescrita com uma imagem de visualização vermelha.

Você precisa clicar no botão “Insert Rewrite Rules” (Inserir regras de reescrita), e o plug-in tentará inserir automaticamente essas regras de reescrita em seu arquivo .htaccess.
Se o plug-in for bem-sucedido na adição dessas regras, a visualização da imagem vermelha ficará verde com o texto “WebP”.

Às vezes, o plug-in pode não ser capaz de inserir as regras. Nesse caso, você precisa copiar as regras de reescrita da página de configurações do plug-in e colá-las manualmente na parte inferior do arquivo .htaccess.
Quando terminar, retorne à página de configurações do plug-in e clique novamente no botão “Save Changes” (Salvar alterações). Se a imagem de visualização ficar verde, isso significa que você ativou com êxito o fornecimento de imagens WebP em seu site do WordPress.
Como alternativa, você pode escolher entre os métodos JS WebP Rewriting ou WebP Rewriting como suas opções de entrega de WebP. Esses métodos são um pouco mais lentos do que o método .htaccess, mas darão conta do recado.
Converta em massa suas imagens antigas em versões WebP
O EWWW Image Optimizer permite que você converta facilmente seus arquivos de imagem carregados anteriormente em imagens WebP. Basta acessar a página Mídia ” Biblioteca e alternar para a exibição de lista.

Em seguida, você precisa clicar no botão “Screen Options” (Opções de tela) e alterar o “Number of items per page” (Número de itens por página) para 999. Se você tiver mais de 1.000 imagens, essas imagens aparecerão na próxima página.
Dessa forma, você poderá selecionar rapidamente um grande número de imagens para otimização em massa. Em seguida, clique na caixa de seleção Select All (Selecionar tudo) na parte superior para selecionar todas as imagens.

Depois disso, clique no menu suspenso “Bulk Actions” (Ações em massa) e selecione a opção “Bulk Optimize” (Otimizar em massa). Por fim, clique no botão “Apply” (Aplicar).
Na próxima tela, o plug-in lhe dará a opção de ignorar a compactação da imagem e apenas convertê-la em WebP. Você pode marcar essa opção se suas imagens já estiverem otimizadas.

Depois disso, clique no botão “Scan for Unoptimized Images” (Verificar imagens não otimizadas) para continuar. O plug-in mostrará o número de imagens encontradas, para que você possa clicar no botão Optimize (Otimizar) para continuar.
Suas imagens agora serão otimizadas, e o EWWW Optimizer gerará versões WebP para suas imagens.

Testando sua entrega de imagem WebP
Depois de otimizar suas imagens, você pode acessar um post de blog que contenha várias imagens.
Passe o mouse sobre qualquer imagem e clique com o botão direito do mouse para abrir a imagem em uma nova guia.

Isso abrirá a imagem em uma nova guia do navegador.
Você poderá ver que ele tem uma extensão .webp
na barra de endereços.

Se o plug-in não conseguir fornecer a imagem WebP, você poderá voltar à página de configurações do plug-in. A partir daí, você pode alterar a opção de fornecimento de WebP para os métodos “JS WebP Rewriting” ou “WebP Rewriting”.
Método 2: Usar imagens WebP no WordPress com o Imagify
O Imagify é um plug-in de otimização de imagens do WordPress criado pelo pessoal por trás do WP Rocket, o melhor plug-in de cache do WordPress. Ele permite que você otimize e converta facilmente imagens 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 plug-in Imagify. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, você precisa visitar a página Settings ” Imagify para definir as configurações do plug-in. A partir daí, clique no botão “Create a Free API Key” (Criar uma chave de API gratuita) para continuar.

Você será solicitado a inserir um endereço de e-mail comercial. Depois disso, você poderá verificar se há um e-mail contendo sua chave de API em sua caixa de entrada. Copie e cole a chave na página de configurações do plug-in e clique no botão “Save Changes” (Salvar alterações).
Em seguida, role a tela para baixo até a seção Otimização. Lá, você precisa marcar as opções ao lado de “Create webp versions of images” e “Display images in webp format on the 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 é usar 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 também funciona com CDNs, mas pode quebrar alguns temas do WordPress.
Você pode escolher qualquer um que funcione bem para seu site. Depois disso, clique no botão “Save & Go to Bulk Optimizer” (Salvar e ir para o otimizador em massa) na parte inferior.

Isso o levará à página Mídia ” Otimização em massa.
O plug-in começará a otimizar automaticamente todas as suas imagens do WordPress em segundo plano.

Se você tiver muitas imagens, isso pode demorar um pouco. Não se preocupe, você pode fechar a página e voltar a ela mais tarde, pois o fechamento da página não interromperá o processo de otimização de imagens.
Testando suas imagens WebP no WordPress
Quando a otimização estiver concluída, você poderá visitar uma página ou publicação que contenha algumas imagens. Passe o mouse sobre uma imagem e clique com o botão direito do mouse para selecionar “Abrir imagem em nova guia”.

Isso abrirá a imagem em uma nova guia do navegador.
Você verá a extensão .webp
na barra de endereços.

Método 3: Usar imagens WebP no WordPress com o SG Optimizer
Esse método é recomendado se você for um usuário do SiteGround.
A SiteGround é uma das melhores empresas de hospedagem de WordPress. Eles oferecem um plugin SG Optimizer gratuito para seus usuários, que permite otimizar o desempenho do WordPress. Ele também inclui a opção de otimizar as imagens do WordPress.
Primeiro, você precisa instalar e ativar o plug-in SG Optimizer.
Após a ativação, o plug-in adicionará um novo item de menu à barra lateral do administrador denominado “SG Optimizer”. Ao clicar nele, você será direcionado para a página de configurações do plug-in.

A partir daqui, você pode ativar as configurações de cache se quiser usar o sistema de cache integrado do SiteGround.
Depois disso, você pode alternar para a guia Media Optimization (Otimização de mídia) e ativar a opção “Generate WebP Copies of New Images” (Gerar cópias WebP de novas imagens).

Abaixo disso, você verá a opção “Bulk Generate WebP Files” (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 na biblioteca de mídia do WordPress.

Quando terminar, seu site WordPress começará a servir imagens WebP.
Teste de imagens WebP no SG Optimizer
Para ver se o seu site está servindo imagens WebP, você precisa abrir uma página no site com algumas imagens.
Depois disso, clique com o botão direito do mouse e selecione a ferramenta Inspecionar. Isso abrirá o console do desenvolvedor, onde será necessário alternar para a guia Network (Rede).

A partir daí, clique na guia “img” e recarregue a página (CTRL+R no Windows e Command+R no Mac). Quando o site for recarregado, você verá todas as imagens carregadas no console do desenvolvedor.
Guias especializados sobre o uso de imagens no WordPress
Esperamos que este artigo tenha ajudado você a aprender como usar imagens WebP no WordPress. Talvez você também queira ver outros guias sobre o uso de imagens em seu site WordPress:
- Como adicionar imagens corretamente no WordPress (passo a passo)
- Como adicionar imagens em destaque ou miniaturas de postagens no WordPress
- WebP vs. PNG vs. JPEG: O melhor formato de imagem para WordPress
- Como otimizar imagens para desempenho na Web sem perder a qualidade
- Comparação dos melhores plug-ins de compactação de imagens do WordPress
- Ferramentas para criar imagens melhores para suas postagens no blog
- Ótimos plug-ins do WordPress para gerenciar imagens (atualizado)
- Texto alternativo da imagem vs. título da imagem no WordPress – qual é a diferença?
- Onde o WordPress armazena as imagens em seu site?
- Como carregar facilmente imagens em modo preguiçoso no WordPress
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
MOINUDDIN WAHEED
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Admin
emir
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Admin
Ashikur Rahman
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Admin
Rebecca
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support
It is not required but is useful for the sites that use that information.
Admin
Theo
here’s what I’m looking for,
Very helpful
WPBeginner Support
Glad our guide was helpful!
Admin
Kim
Thanks so much for the quick reply!
WPBeginner Support
Glad we could help
Admin
Kim
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support
The plugin will automate the process for new uploads
Admin