Como servir imagens em formato WebP no WordPress

O que é WebP?

O WebP é um formato moderno para servir imagens mais rápido do que nunca. Se estiver a usar WordPress, pode facilmente servir todas as imagens no WebP com algumas afinações básicas.

A maioria dos Browsers suporta WebP

• De acordo com os dados do Caniuse, WebP é actualmente suportado em 94% dos navegadores incluem Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge e navegadores Android.
• Pode ainda servir o JPEG/PNG como recurso para o browser não suportado.

Principais benefícios da utilização de imagem em formato WebP

• Em comparação com o tamanho da imagem normal JPG ou PNG, a mesma dimensão de imagem WebP pode servir em pequenos bytes. Assim, as imagens serão carregadas mais rapidamente. Será especialmente útil para utilizadores móveis.
• Servir imagens de qualidade em poucos bytes, poupa drasticamente largura de banda.
• Mantenha o seu sítio web actualizado com as últimas tendências. Não perca a conversa devido ao problema do carregamento lento do carro de bois.
• WebP é recomendado pelo Google Developers. Ajuda-o a passar “serve images in next-gen format“recomendação do Google PageSpeed Insight.

É assim que se pode servir WebP para um site WordPress.

Utilização de WebP Express Plugin em NGINX

• Instalar & Activar WebP Express, plugin gratuito. Um enorme agradecimento ao Dev.
• Modo de funcionamento: Várias respostas de imagem.
• Âmbito de aplicação: Apenas Upload.

• Executar Bulk Convert

• Para utilizadores Apache, nenhuma configuração requer como .htaccess faz todas as magias.
• O utilizador do servidor NGINX precisa de modificar o ficheiro de configuração com acesso à raiz.

Para melhor organização do código, eu recomendaria colocar primeiro dentro do directório /etc/nginx/ com nome webp.conf e depois incluir no bloco do servidor principal.

Entrar abaixo comando

cd /etc/nginx/ && nano webp.conf

• Colar o código abaixo usando o botão direito do rato dentro do nano editor no terminal SSH.

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

• Prima CTRL+O e a tecla Enter para guardar.

Agora visite o bloco do servidor principal.

cd /etc/nginx/sites-available && ls

Altamente recomendável: Aprenda Instalando WordPress na NGINX (Em três passos simples)

Edite o seu ficheiro de configuração, e coloque include webp.conf; como se mostra abaixo.

# General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .gulshankumar.net;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

Recarregar ou reiniciar o NGINX.

service nginx reload

Coisas a notar

• Se utilizar BunnyCDN, deve activar Vary Cache.

• O Cloudflare não suporta Vary Cache. Tente abaixo uma abordagem alternativa.

Usar WebP usando o CDN Cloudflare (Sem Plugin)

Se for um utilizador Cloudflare Pro pode simplesmente activar o WebP com um clique a partir do separador Speed.

Servir WebP usando BunnyCDN Optimizer (Sem Plugin)

BunnyCDN oferece serviços Optimizer que vêm com solução de serviço On-the-fly WebP. É uma solução de um clique por $9,5/mês de custo adicional.

Servir WebP usando JetPack Plugin

• Basta instalar e activar o plugin JetPack
• Activar o Acelerador do Sítio.

Poderá notar uma degradação na qualidade da imagem que pode ser corrigida utilizando o filtro abaixo.

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 100;
    $args['strip'] = 'all';
    return $args;
}

Servir WebP em NGINX usando ShortPixel Plugin

O plugin ShortPixel pode ajudar na optimização de imagens em massa com conversão WebP e servir como suporte por Browser. A melhor parte deste plugin faz o processamento no seu servidor para não atrasar o seu site.

• Se for utilizador do servidor web Apache pode utilizar a reescrita .htaccess. Isso é simples.
• No caso do NGINX pode utilizar a regra de reescrita abaixo com a ajuda de apoio de alojamento
• Este plugin também é suportado com WP Rocket cache plugin.

Primeiro, acrescentar este bloco antes da directiva do servidor:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Acrescentar este bloco no interior da directiva do servidor:

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

A colocação é importante. Por isso, acrescente-o cuidadosamente.

Servir WebP usando Imagify

Imagify é um plugin de Optimização de Imagem oferecido pela WP Media, o pessoal por detrás da WP Rocket.

• Instalar e activar Imagify plugin
• Introduza a chave API
• Em definições, escolher o modo de etiquetas de imagem para uma configuração rápida.
• Em alternativa, pode usar a regra de reescrita com alguma configuração de servidor como descrito aqui. Com o Apache, o processo de adição de código .htaccess será automático mas com o NGINX terá de ser feito manualmente.

WebP para JPG

A WebP pode degradar um pouco a qualidade da imagem em alguns casos. Se quiser reverter da WebP para JPG, basta seguir estes passos.

• Desactivar & Apagar plugin relacionado com WebP.
• Remover a sua configuração relacionada do ficheiro de configuração (.htaccess)
• Apagar ficheiros .webp em massa e guardar espaço em disco.

find . -type f -name "*.webp*" -delete

Se quiser converter o ficheiro WebP para JPG, pode utilizar a ferramenta disponível no CloudConvert.

---

Método manual sem Plugin

Esta secção é apenas para fins informativos.

Passo 1 : Adição do formato WebP em documento HTML

Primeiro, precisa de converter todas as suas imagens em WebP e juntamente com o seu formato de imagem anterior como o fall-back. Há alguns plugin como Optimus que podem fazer este trabalho automaticamente. Mas, mostrarei um outro fácil de fazer isto manualmente.

1. Ir a este sítio web image.online-convert.com/convert-to-webp
2. Cole o seu link de imagem e clique em converter. As suas imagens em formato WebP serão descarregadas
3. Agora edite o código HTML em bruto onde a sua Imagem normal está a aparecer.

Digamos que, no início, o código HTML da sua imagem era assim

<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

É necessário embrulhar acima do código com um pouco mais de marcação HTML.

<picture>
	<source srcset="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />
</picture>

Agora, o seu documento HTML está pronto para servir imagens em formato WebP.
Passo 2 : Configurar as configurações do servidor
Apenas mais um passo, é necessário configurar algumas definições do Apache Webserver via .htacccess para que o browser e o servidor web possam tratá-lo correctamente como todas as outras imagens.

O seu servidor Web Hosting pode não saber a partir de que tipo de mímica é que este tipo de imagens de formato necessitam para servir. Por isso, devem adicionar o tipo de mímica adequado. Além disso, valeria a pena configurar o cabeçalho de validade para caching.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Atenção: Certifique-se de que está a utilizar o WordPress 5.8 ou posterior.

Se estiver a utilizar WordPress mais antigo que a versão 5.8 não suporta o carregamento de imagem em formato WebP. Pode receber erro “Este tipo de ficheiro infelizmente não é permitido por razões de segurança “ enquanto carrega imagens em formato .webp.

Portanto, deve corrigir este problema adicionando este código nas suas funções temáticas.php Seria útil no caso de carregar as suas imagens directamente do Painel WordPress > opção Media.

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Feito.

Se precisar de ajuda, por favor consulte a secção comentário ou junte-se ao meu fórum. Terei todo o prazer em ajudá-lo.

Notas adicionais

• If you’re a Cloudways user, you cannot deliver WebP with .htaccess rewrite because they use NGINX specifically for static files. In this case you have two choices. Ask hosting team to edit configuration file for you or use JavaScript or 3rd-party CDN based solution such as Bunny or CF.

Leituras adicionais
Se estiver curioso para saber mais sobre o WebP, por favor consulte estes links.

• https://developers.google.com/speed/webp/
• https://en.wikipedia.org/wiki/WebP

Obrigado.