Como otimizar e servir as imagens em webp no WordPress de graça?

Existem diversas formas de otimizar as suas imagens no WordPress e servi-las em .webp, mas antes de tudo, se acaso você não saiba, é importante explicar o que é .webp e porque esse ele é importante pro seu site. Confira:

O que é .webp?

Resumidamente, .webp é um formato de imagem, assim como .png ou .jpg, contudo, tem como vantagem ser um formato extremamente leve e otimizado, ideal para páginas web que se beneficiam muito de tamanhos reduzidos de arquivo. Ou seja, páginas web que utilizam imagens .webp em vez de .png ou .jpeg obtém melhores pontuações em ferramentas como GTMetrix e Lighthouse e são carregadas mais rapidamente pelos seus usuários.

Para habilitar o webp em todas as imagens do seu site, basta seguir os dois primeiros passos deste tutorial, o passos três é opcional e o passo 4 voltado para desenvolvedores.

• Passo 1 – criando e configurando sua conta no imagekit.
• Passo 2 – configurando seu site.
• Passo 3 (opcional) – customizando a otimização do imagekit.
• Passo 4 (opcional) – otimização manual para desenvolvedores.

Como substituir suas imagens JPG e PNG por WEBP no WordPress?

Existem plugins que fazem isso de forma menos burocrática, como o Smush, contudo, são ferramentas pagas que, ou limitam a quantidade de imagens otimizadas no seu site em versões gratuitas ou sequer oferecem essa possibilidade. Por sorte, porém, existe um serviço que converte imagens para .webp e as otimiza de graça, tornando-se pago apenas caso as requisições por imagens do seu projeto sejam muito numerosas, ou seja, caso seu site receba milhares de visitas diárias.

Passo 1: Acesse e crie uma conta no Imagekit.io

O imageKit funciona da seguinte forma:

• o sistema acessa e baixa as imagens do seu site,
• as otimiza, removendo metadados e diminuindo o tamanho total do arquivo,
• as converte em .webp,
• e gera uma URL para cada imagem otimizada/convertida.

Após criar sua conta, você deve se deparar com o seguinte painel:

Passo 1.1 : crie um armazenamento externo (external storage)

O armazenamento externo vai ser o diretório no imagekit que conterá todas as imagens do seu site. Parecido com a sua pasta wordpress de /uploads/. Para criar um armazenamento, siga os seguintes passos:

• Expanda a barra lateral direita clicando na seta branca superior, e acesse External store.
• Clique em +Add new na parte superior da página.

Preencha os campos da seguinte forma:

• Origin name: defina um nome que considerar adequado. Esse campo não interfere o funcionamento de nada.
• Origin Type: defina como Web Folder – HTTP(S) server and Magento, Shopify, WordPress, etc. caso as suas mídias estejam salvas da forma padrão em seu site wordpress, sem interferência de outros plugins como os da Amazon.
• Base URL: Coloque a URL base do seu site, o endereço para acessar a sua home basicamente. Por exemplo, no meu caso seria https://lucasmarinifalbo.com
• Advanced: não é necessário marcar nenhuma das duas checkboxes para o funcionamento do sistema.

Passo 1.2: crie um url endpoint

O URL endpoint vai ser o novo endereço base de todas as suas imagens. Para isso, acesse a página URL endpoints no menu lateral esquerdo e clique em Add new.

Preencha os campos da seguinte forma:

• Identifier: vai ser o nome contido na URL de um diretório seu no imagekit. Pode contar apenas letras e números, sem acentos e caracteres especiais. Exemplo:

• Description: a descrição desse seu endpoint, tem fins apenas administrativos para você se organizar. Não afeta o funcionamento do sistema.
• Image origin preference: a primeira opção é sempre o imageKit Media Library, então não adianta tentar alterá-la. Clique em ‘Attach an existing origin’ e escolha o diretório externo que você criou no passo 1.1

• Clique em salvar.

Pronto, o seu armazenamento no imagekit já está pronto para buscar e otimizar as imagens do seu site. É válido também acessar Settings (configurações) e rever algumas opções no painel imagekit. Eu trato essa parte no passo 3, que é opcional por sinal.

Passo 2: instale o plugin imagekit.io em seu site.

Ao contrário de outros plugins que alteram diversas funcionalidades em seu site e podem acabar gerando conflitos com outros plugins ou exigindo mais recursos do seu servidor (exemplo do Smush que otimiza e converte todas as imagens usando o processamento do seu próprio servidor), o imagekit meramente procura as urls das imagens em suas páginas e arquivos e as atualiza, substituindo a url base das suas imagens pela url do seu diretório no imagekit. As otimizações e conversões de imagens ocorrem fora do seu servidor, economizando recursos do seu sistema.

• URL original sem imagekit: https://seusite.com.br/wp-content/uploads/2022/09/imagem.png
• URL atualizada com imagekit: https://ik.imagekit.io/000000/lorem/wp-content/uploads/2022/09/imagem.png

A parte em negríto é o radical, sendo na URL original a url base do seu site, e na atualizada a url base do imagekit. Já a parte em itálico é dividida em, primeiro o número da sua conta no imagekit, que foge ao seu controle, e segundo o nome do endpoint que você definiu no passo 1.2.

OBS: o plugin imagekit não é atualizado há algum tempo, portanto não pode ser mais encontrado no diretório de plugins do WordPress via pesquisa, contudo eu pessoalmente efetuei testes e averiguei os arquivos do plugin, e atesto que continua seguro e funcional. É de fato um plugin muito pequeno, contém apenas 03 arquivos .php ao total, visto que ele apenas busca e atualiza URLS. Todas as outras tarefas são executadas fora do seu servidor.

Passo 2.1: instalando o plugin

• Acesse: https://wordpress.org/plugins/imagekit/,
• baixe o arquivo .zip do plugin,
• acesse o painel do seu site wordpress, vá até plugins > adicionar novo,
• suba o arquivo .zip que você baixou do plugin e o ative.

Passo 2.2: configurando o plugin

• Para acessar as configurações do plugin, vá até configurações > imageKit settings

A configuração é simples e rápida:

• ImageKit URL endpoint (or CNAME): preencha com o seu URL endpoint criado no passo 1.2
• File Types: você pode adicionar formatos extras de imagens caso algum formato que seu site utiliza não esteja nessa lista. Por exemplo, como eu utilizo .svg em meu site, acrescentei a minha lista inserindo *.svg; neste campo. Basta adicionar o(s) formato(s) desejado(s) ao fim da lista conforme a seguinte sintaxe: *.formato;
• Custom Files: você pode definir aqui arquivos específicos ou diretórios que o plugin não considera para exigir a otimização dessas imagens. O imagekit considera apenas a pasta do seu tema ativo, tema pai e /uploads.
• Rejected Files: é o inverso do campo atual, diretórios ou arquivos que você não quer que sejam otimizados. Considerar apenas arquivos nos diretórios que o imagekit busca por padrão (tema filho/pai e uploads).
• Clique em salvar.

Pronto. Seu site já deve estar servindo imagens otimizadas em .webp!

Você pode encerrar por aqui caso não tenha interesse em customizar as configurações pro seu projeto, embora eu recomende dar uma olhada no passo 3. O quatro é exclusivamente voltado para desenvolvedores.

Passo 3 (opcional): configurando o imagekit fora do seu site.

Existem algumas configurações no imagekit que você pode fazer para personalizar o uso da sua ferramenta de acordo com as suas necessidades. Essas são controladas por fora do site, e você pode acessar por essa URL: https://imagekit.io/dashboard/settings.

Abaixo algumas dicas:

Settings > Images > Optimization

• Optimize image quality before delivery: em Default Quality, sugiro manter no mínimo 80. Menor que isso pode prejudicar demais a qualidade das imagens.

Settings > Images > Optimization

• Preserve image metadata in output: sugiro selecionar Discard all metadata. Basicamente exigirá que o imagekit remova qualquer metadado das imagens (como datas; locais e etc), que geralmente são dispensáveis.
• PNG image compression mode: aqui você define se deseja habilitar a compressão de imagens PNG:
  • Maximum significa que as imagens sofrerão alta compressão, ficando muito leves, mas perdendo bastante qualidade. Útil em sites que utilizam PNG somente em ícones e elementos pequenos.
  • Minimum significa que as imagens sofrerão compressão baixa. Útil em sites que utilizam imagens PNG em elementos maiores
  • None significa que não ocorrerá compressão alguma. Não recomendado.

O ideal aqui é efetuar testes, tentar definir maximum e ver se suas imagens PNG estão com baixa resolução, se sim, definir minimum e ver se melhorou.

Existem diversas outras configurações, mas considero não essenciais para usuários leigos. Mas você pode, se desejar claro, explorá-las.

Passo 4 (para programadores): uma função PHP de conversão para usar no seu projeto.

Este passo é voltado para quem desenvolve e trabalha com PHP.

Dependendo da ocasião, você pode estar trabalhando no desenvolvimento de um tema ou plugin que o imagekit, por alguma razão, não tem otimizado as mídias. Isso pode ocorrer, por exemplo, porque você no passo 2.2 não definiu ali um formato de imagem e portanto o plugin o está ignorando, ou porque não definiu o diretório extra, talvez quem sabe outros motivos. São muitas as possibilidades.

Nesse sentido, eu criei uma função PHP que você pode inserir em seu projeto e utilizá-la para efetuar a conversão da URL base pela URL atualizada.

Para usar em seu tema, você pode inseri-la em functions.php. Já para usar em seu plugin, evidentemente fica a critério da sua estrutura.

Função:

 function imagekit_update($img){

	// URL base do site
	$url_base = site_url();

	// Seu URL Endpoint, salvo nas configurações do Imagekit em 'ImageKit URL endpoint (or CNAME)'
	$options = get_option('imagekit_settings');
	$endpoint = $options['imagekit_url_endpoint'];

    // Verifica se a URL da imagem contém a URL base do site
    if (strpos($img, $url_base) !== false) {

        // Se sim, efetua a substituição e retorna a URL atualizada
        $url = str_replace($url_base, $endpoint, $img);

        return $url;

    } else { 

        // Se não, retorna a URL sem alterações
        return $img; 
    }

 }

Exemplo de Utilização:

<?php
// Imagens
$imagem1 = 'https://seusite.com.br/wp-content/uploads/2023/01/lorem-ipsum.png'
$imagem2 = 'https://seusite.com.br/wp-content/uploads/2023/01/imet-dolor.png'
?>

<div id="sessao-principal">
    <div class="box-imagem">

        <!-- A imagem abaixo será otimizada e convertida pelo imagekit -->
        <img alt="Lorem ipsum" src="<?=imagekit_update($imagem1)?>">

        <!-- Já a imagem abaixo não -->
        <img alt="Lorem ipsum" src="<?=$imagem2?>">

    </div>
</div>

Resultado HTML:

<div id="sessao-principal">

    <div class="box-imagem">

        <!-- otimizada e no formato .webp -->
        <img alt="Lorem ipsum" src="https://ik.imagekit.io/00000000/lorem/wp-content/uploads/2023/01/lorem-ipsum.png">

        <!-- não otimizada e no formato .png -->
        <img alt="Lorem ipsum" src="https://seusite.com.br/wp-content/uploads/2023/01/imet-dolor.png'">

    </div>
</div>

Dúvidas? Surgiu algum problema ao tentar implementar? Deixe um comentário abaixo ou entre e contato que eu lhe auxílio com todo o prazer.