Como usar imagens WebP no WordPress (3 métodos)

Entendemos a importância de equilibrar a qualidade da imagem com tempos de carregamento mais rápidos. Muitos proprietários de sites nos perguntam sobre a melhor maneira de usar imagens WebP para fazer exatamente isso.

As imagens WebP são um formato de imagem moderno que oferece melhor compactação de imagem, reduzindo o tamanho do arquivo sem sacrificar significativamente a qualidade da imagem. Isso faz com que seu site carregue mais rápido e economize largura de banda.

O problema é que o WordPress não suporta nativamente o upload ou a exibição de imagens WebP.

Neste artigo, mostraremos a você como usar facilmente imagens WebP no WordPress.

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

Subscribe to WPBeginner

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

Agora que você sabe como usar imagens WebP no WordPress, talvez queira ver outros guias para usar 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

Esperamos que este artigo tenha ajudado você a aprender como usar imagens WebP no WordPress. Talvez você também queira ver nosso guia sobre como criar um boletim informativo por e-mail e nossas escolhas de especialistas sobre os melhores serviços de telefonia comercial para o seu site.

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.