Como usar e converter imagens WebP no WordPress

A maior dúvida da maioria das pessoas que criam sites com WordPress é de como usar e converter imagens WebP no WordPress.

Um dos fatores que podem afetar a performance do seu site são as imagens do contidas no seu site. Se elas não estiverem otimizadas, elas podem afetar o carregamento da sua página, consequentemente, tornando o site lento e causando a perda de vendas e conversões.

Assim, podemos definir que ao tornar o seu site rápido, bem estruturado e responsivo para celulares, você vai ter mais visibilidade nos buscadores e com isso, mais conversões.

Uma das formas de deixar o formato das suas imagens mais leves é usar o formato de imagem WebP.

Neste artigo, você irá aprender sobre WebP e como usar esse formato no seu site do WordPress.

Conteúdo

Pré-requisitos

O Que Exatamente é WebP

Como usar e converter imagens em WebP no WordPress

Pré-requisitos

Inicialmente você precisará ter o seu domínio/site hospedado em uma hospedagem de sites ou já possui uma hospedagem de sites na estrutura da MigraCloud.

  1. Possuir o WordPress instalado
  2. Acesso ao painel de administração do WordPress

O Que Exatamente é WebP

Ter um site que carrega rapidamente talvez seja o maior sonho de todo webmaster. Uma das maneiras de otimizar a velocidade da página é usando formatos de imagem WebP. Mas o que é WebP, afinal de contas?

O WebP é um formato de arquivo que foi desenvolvido pela Google lá em 2010. Ele oferece uma taxa de compressão mais alta para imagens, enquanto mantém a sua qualidade intacta. Webmasters e desenvolvedores podem criar imagens com tamanhos de arquivos menores, para que você possa carregá-los mais rapidamente. Este formato usa métodos de compressão mais poderoso, tanto do tipo lossy quanto do lossless, se comparado com os formatos PNG e JPEG.

Como usar e converter imagens em WebP no WordPress

Você pode exibir imagens em WebP no WordPres usando o WebP Express.

O plugin WebP Express usa a WebP Convert Library para modificar as imagens. Esse plugin serve como um conversor que gera WebP para navegadores que suportam esse formato, mas exibe JPG ou PNG para navegadores que são suportam.

página de download do plugin webp express para wordpress

 

A instalação do plugin, é bem simples: no painel de administração do WordPress, vá em “plugins” e “adicionar novo”.

 

 

Na caixa de busca, você precisa digitar “Web Express” e, então, encontrará o plugin Web Express, com a opção “Instalar agora

 

 

Após clicar na opção de instalação, basta selecionar a opção de ativação, que vem logo após o processo,

Após ativação ele deve aparecer assim na sua instalação:

Adicionando o plugin Webp Express

 

Depois disso vc vai na lateral e clicar em Configurações e Webp Express, como na figura abaixo:

 

Configurações do plugin Webp Express

 

Agora vamos configurá-lo:

No primeiro bloco onde está escrito “Operation mode:” deixe selecionado a opção “Varied Imagens Responses“.
No modo “Respostas de imagem variada”, o WebP Express cria regras de redirecionamento para imagens, de modo que uma solicitação de jpeg resultará em uma webp – mas apenas se a solicitação vier de um navegador habilitado para webp. Se um webp já existir, ele será veiculado imediatamente. Caso contrário, é convertido e, em seguida, adicionado.

Logo após em GENERAL, coloque as opções conforme a imagem abaixo:

 

  1. Escopo: uploads e temas
  2. Tipos de imagem para trabalhar: JPEGs e pngs
  3. Pasta de destino: em pasta separada
  4. Estrutura de destino: Raiz do Documento
  5. Cache-Control header (coloque em Custom e cole o código): public, max-age:86400, stale-while-revalidate=604800, stale-if-error=604800

 

Em .htaccess rules for webp generation deixe as opções “Enable direct redirection to existing converted images?” e “Enable redirection to converter?” selecionados conforme a imagem abaixo:

 

No bloco Conversion em Jpeg options:

  1. Codificação WebP: Automático
  2. Qualidade para perdas: Qualidade fixa > 70
  3. Qualidade para sem perdas: Aplicar pré -processamento de qualidade “Quase sem perdas”: 65

Em opções de PNG :

  1. Codificação WebP: Automático
  2. Qualidade para perdas: 75 Qualidade alfa:  75
  3. Qualidade para sem perdas: Aplicar pré -processamento de qualidade “Quase sem perdas”: 65

Metadados: Copie todos os metadados para webp

 

Em Conversion method, ative a opção GD Extension
Selecione a opção “Convert on upload“.

Na opção “Bulk convert” vamos falar sobre mais pra frente, por enquanto essa opção não precisa fazer nada.

 

Ative a opção Alter HTML.
Ativar isso altera o código HTML, de modo que as imagens de webp sejam veiculadas em navegadores compatíveis com webp. É recomendável habilitar isso mesmo quando o redirecionamento também estiver ativado, para que as respostas de imagem variadas sejam usadas apenas para as imagens que não podem ser substituídas em HTML. As respostas variadas geralmente levam a um cache mais baixo em proxies e CDNs. E se os usuários fizerem o download dessas imagens, eles terão extensão jpg / png, mesmo que sejam webp.

  1. Replace image URLs: Escolha essa opção
  2. Only do the replacements in webp enabled browsers: Marque esta opção
  3. Em How to replace marque a opção: The complete page (using output buffering)

 

Feito! Agora vá em “Save settings” e salve sua configuração. Para finalizar nossa configuração, volte para á opção Bulk Convert e clique em Bulk Convert

Agora o plugin irá converter todas as suas imagens, vale a pena fazer isso fora do horário comercial.

 

Conclusão

Quando você decide usar imagens do webP no WordPress, sem sombra de dúvidas é uma das melhores decisões que você fará para o desempenho do seu site.

Veja mais

Artigos relacionados

Fale conosco

Uma parceria que dá resultado

Estamos prontos para responder suas dúvidas e auxiliar o seu negócio para alcançar os resultados que você busca.

Qual é o processo
1

Agendamento de uma conversa.

2

Vamos entender a sua necessidade.

3

Apresentar soluções para resolver as demandas.

Agende uma conversa