Como Criar e Exibir Imagens WebP para Acelerar Seu Website

O autor selecionou a Apache Software Foundationpara receber uma doação como parte do programa Write for DOnations.

Introdução

WebP é um formato aberto de imagem desenvolvido pelo Google em 2010, baseado no formato de vídeo VP8. Desde então, o número de sites e aplicativos móveis que usam o formato WebP cresceu rapidamente. Tanto o Google Chrome como o Opera suportam o formato WebP de forma nativa e, uma vez que esses navegadores representam cerca de 74% do tráfego da Web, os usuários podem acessar sites mais rapidamente se esses sites usarem imagens WebP. Também existem planos para implementar o WebP no Firefox.

O formato WebP suporta tanto a compressão de imagens com perda, quanto sem perda de dados, incluindo animação. Sua princpal vantagem em comparação com outros formatos de imagem usados na Web é o tamanho bastante reduzido dos arquivos, o que permite que as páginas Web carreguem mais rapidamente e reduz o uso de largura de banda. Usar imagens WebP pode levar a aumentos consideráveis na velocidade da página. Se o seu aplicativo ou site estiver passando por problemas de desempenho ou aumento de tráfego, converter suas imagens pode ajudar a otimizar o desempenho das páginas.

Neste tutorial, você usará a ferramenta de linha de comando cwebp para converter imagens para o formato WebP, criando scripts que irão ver e converter imagens em um diretório específico. Finalmente, você irá explorar duas maneiras de exibir imagens WebP aos seus visitantes.

Pré-requisitos

Trabalhar com imagens WebP não exige uma distribuição específica, mas vamos demonstrar como trabalhar com os software relevantes no Ubuntu 16.04 e CentOS 7. Para seguir este tutorial você precisará de:

• Um servidor configurado com um usuário não raiz (non-root) de comando sudo. Para configurar um servidor Ubuntu 16.04, você pode seguir nosso Guia de configuração inicial de servidor Ubuntu 16.04. Se você quiser usar o CentOS, você pode configurar um servidor CentOS 7 com nossa Configuração Inicial de Servidor com tutorial CentOS.

• O Apache instalado no seu servidor. Se você estiver usando o Ubuntu, você pode seguir o passo um do Como Instalar Linux, Apache, MySQL, pilha PHP (LAMP) no Ubuntu 16.04. Se você estiver usando o CentOS, então você deve seguir o passo um do Como Instalar Linux, Apache, MySQL, pilha PHP (LAMP) no CentOS 7. Certifique-se de ajustar as configurações do seu firewall para permitir o tráfego HTTP e HTTPS.

• mod_rewrite instalado no seu servidor. Se você estiver usando o Ubuntu, você pode seguir nosso guia Como Manipular URLs com mod_rewrite para o Apache no Ubuntu 16.04. No CentOS 7 o mod_rewrite é instalado e ativado por padrão.

Passo 1 — Instalando o cwebp e Preparando o Diretório de Imagens

Nesta seção, instalaremos o software para converter imagens e criaremos um diretório com imagens para a finalidade de teste.

No Ubuntu 16.04, você pode instalar o cwebp, um utilitário que comprime imagens no formato .webp, digitando:

sudo apt-get update
sudo apt-get install webp 

No CentOS 7, digite:

sudo yum install libwebp-tools

Para criar um novo diretório de imagens chamado webp no diretório raiz do Apache Web (localizado por padrão em /var/www/html) digite:

sudo mkdir /var/www/html/webp

Altere o proprietário deste diretório para o seu usuário sammy não raiz:

sudo chown sammy: /var/www/html/webp

Para testar comandos, você pode baixar imagens JPEG e PNG gratuitas usando o wget. Esta ferramenta é instalada por padrão no Ubuntu 16.04; se você estiver usando o CentOS 7, você pode instalá-la digitando:

sudo yum install wget

A seguir, baixe as imagens teste usando os comandos seguintes:

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

A maior parte do seu trabalho no próximo passo estará no diretório /var/www/html/webp, para o qual você pode se mover digitando:

cd /var/www/html/webp

Com as imagens teste instaladas e o servidor Apache Web, mod_rewrite e cwebp instalados, você está pronto para ir para a conversão de imagens.

Passo 2 — Comprimindo Arquivos de Imagem com o cwebp

Exibir imagens .webp para visitantes do site exige versões .webp de arquivos de imagem. Neste passo, você irá converter imagens JPEG e PNG para o formato .webp usando o cwebp. A sintaxe geral do comando se parece com essa:

cwebp image.jpg -o image.webp

A opção -o especifica o caminho até o arquivo WebP.

Uma vez que você ainda está no diretório /var/www/html/webp, você pode executar o comando a seguir para converter a image1.jpg em image1.webp e image2.jpg em image2.webp:

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

Definir o fator de qualidade -q em 100 retém 100% da qualidade da imagem; se não especificado, o valor padrão é 75.

A seguir, inspecione o tamanho das imagens JPEG e WebP usando o comando ls. A opção -l irá mostrar o formato de lista longa, que inclui o tamanho do arquivo e a opção -h irá garantir que ls imprima tamanhos legíveis para humanos:

ls -lh image1.jpg image1.webp image2.jpg image2.webp

Output
-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

O resultado do comando ls mostra que o tamanho da image1.jpg é de 7,4 MB, enquanto o tamanho da image1.webp é 3,9 MB. O mesmo se aplica à image2.jpg (16 MB) e image2.webp (7 MB). Estes arquivos têm quase metade do tamanho original.

Para salvar os dados das imagens completos e originais durante a compressão, você pode usar a opção -lossless no lugar de -q. Esta é a melhor opção para manter a qualidade de imagens PNG. Para converter a imagem PNG baixada do passo 1, digite:

cwebp -lossless logo.png -o logo.webp

O comando a seguir mostra que o tamanho sem perdas da imagem WebP (60 KB) é aproximadamente metade do tamanho da imagem PNG original (116 KB):

ls -lh logo.png logo.webp

Output
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

As imagens convertidas no diretório /var/www/html/webp são cerca de 50% menores do que suas equivalentes em JPEG e PNG. Na prática, as taxas de compressão podem ser diferentes, dependendo de certos fatores: a taxa de compressão da imagem original, o formato do arquivo, o tipo de conversão (com ou sem perdas), a porcentagem de qualidade e o seu sistema operacional. Conforme você for convertendo mais imagens, você poderá ver variações nas taxas de conversão relacionadas a esses fatores.

Passo 3 — Convertendo Imagens JPEG e PNG em um Diretório

Escrever um script irá simplificar o processo de conversão, eliminando o trabalho da conversão manual. Agora, vamos escrever um script de conversão que encontre arquivos JPEG e os converta para o formato WebP com 90% da qualidade, enquanto também converte arquivos PNG em imagens WeP sem perdas.

Usando o nano ou seu editor favorito, crie o script webp-convert.sh no diretório home do seu usuário.

nano ~/webp-convert.sh

A primeira linha do script se parecerá com esta:

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

Esta linha tem os seguintes componentes:

• find: este comando irá procurar por arquivos dentro de um diretório especificado.
• $1: este parâmetro posicional especifica o caminho do diretório de imagens, tirado da linha de comando. Em última análise, ele torna o local do diretório menos dependente do local do script.
• -type f: esta opção diz ao find para procurar apenas arquivos regulares.
• -iname: este teste compara os nomes dos arquivos com um padrão especificado. O teste -iname que não diferencia maiúsculas de minúsculas diz ao find para procurar qualquer nome de arquivo que termine com .jpg (*.jpg) ou .jpeg (*.jpeg).
• -o: Este operador lógico instrui o comando find para listar arquivos que correspondam ao primeiro teste -iname (-iname ".jpg"**) ou o segundo (-iname "*.jpeg"**).
• (): parênteses em volta desses testes, junto com o operador -and, garante que o primeiro teste (ou seja -type f) seja sempre executado.

A segunda linha do script irá converter as imagens para WebP usando o parâmetro -exec. A sintaxe geral deste parâmetro é -exec command {} \;. Cada arquivo substitui uma string {}; o comando faz a iteração através desses arquivos, ao passo que a string ; diz para o find onde o comando termina:

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c 'commands' {} \;

Neste caso, o parâmetro -exec irá exigir mais de um comando para procurar e converter imagens:

• bash: este comando irá executar um pequeno script que irá criar a versão .webp do arquivo se ele não existir. Este script será passado para o bash como uma string, graças à opção -c.
• 'commands': este espaço reservado é o script que irá fazer versões .webp dos seus arquivos.

O script dentro de 'commands' fará as seguintes coisas:

• Criar uma variável webp_path.
• Testar se a versão .webp do arquivo existe ou não.
• Criar o arquivo se ele não existir.

O script menor se parece com este:

...
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;

Os elementos neste script menor incluem:

• webp_path: esta variável será gerada usando o sed e o nome do arquivo correspondente do comando bash, estipulado pelo pelo parâmetro posicional $0. Uma _string here_ (​​​​​​<<<) passará este nome para o sed.
• if [ ! -f "$webp_path" ]: este teste irá determinar se um arquivo chamado "$webp_path" já existe, usando o operador lógico not (!).
• cwebp: este comando irá criar o arquivo se ele não existir, usando a opção -q para não imprimir o resultado.

Com este script menor no lugar do espaço reservado 'commands', o script completo para converter imagens JPEG se parecerá agora com este:

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

Para converter imagens PNG para WebP, vamos adotar a mesma abordagem, com duas diferenças: primeiro, o padrão -iname no comando find será "*.png". Segundo, o comando de conversão usará a opção -lossless em vez da opção de qualidade -q.

O script final se parece com este:

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

Salve o arquivo e saia do editor.

Em seguida, vamos colocar o script webp-convert.sh em prática, usando os arquivos no diretório /var/www/html/webp. Certifique-se de que o arquivo script é executável, executando o comando a seguir:

chmod a+x ~/webp-convert.sh

Execute o script no diretório de imagens:

./webp-convert.sh /var/www/html/webp

Nada aconteceu! Isso se dá porque já convertemos essas imagens no passo 2. Avançando, o script webp-convert converterá imagens quando adicionarmos novos arquivos ou removermos as versões .webp. Para ver como isso funciona, exclua os arquivos .webp que criamos no passo 2:

rm /var/www/html/webp/*.webp

Após excluir todas as imagens .webp, execute o script novamente para garantir que ele funciona:

./webp-convert.sh /var/www/html/webp

O comando ls confirmará que o script converteu as imagens com sucesso:

ls -lh /var/www/html/webp

Output
-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

O script neste passo é a base para usar imagens WebP no seu site, uma vez que você precisará de uma versão m funcionamento de todas as imagens no formato WebP para exibir aos visitantes. O próximo passo abordará como automatizar a conversão de novas imagens.

Passo 4 — Monitorando Arquivos de Imagem em um Diretório

Neste passo, criaremos um novo script para monitorar nosso diretório de imagens quanto a alterações e para converter automaticamente as imagens recém-criadas.

Criar um script que monitora nosso diretório de imagens pode resolver certos problemas com o script webp-convert.sh da forma como ele está escrito. Por exemplo, este script não identificará se renomeamos uma imagem. Se tivéssemos uma imagem chamada foo.jpg, executássemos o webp-convert.sh, renomeássemos aquele arquivo para bar.jpg e, então, executássemos o webp-convert.sh novamente, teríamos arquivos duplicados de .webp (foo.webp e bar.webp). Para resolver este problema e para evitar executar o script manualmente, adicionaremos observadores a outro script. Os observadores monitoram os arquivos ou diretórios especificados quanto às alterações e executam comandos em resposta a essas alterações.

O comando inotifywait irá configurar observadores no nosso script. Este comando faz parte do pacote inotify-tools, um conjunto de ferramentas de linha de comando que fornecem uma interface simples ao subsistema do kernel inotify. Para instalá-lo no Ubuntu 16.04 digite:

sudo apt-get install inotify-tools

Com o CentOS 7, o pacote inotify-tools está disponível no repositório EPEL. Instale o repositório EPEL e o pacote inotify-tools usando os comandos a seguir:

sudo yum install epel-release
sudo yum install inotify-tools

Em seguida, crie o script webp-watchers.sh no diretório home do seu usuário usando o nano:

nano ~/webp-watchers.sh

A primeira linha do script se parecerá com esta:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

Esta linha inclui os seguintes elementos:

• inotifywait: este comando monitora quanto às alterações em um certo diretório.
• -q: esta opção irá dizer ao inotifywait para ficar quieto e não produzir grande quantidade de resultados.
• -m: esta opção irá dizer ao inotifywait para executar indefinidamente e não sair após receber um único evento.
• -r: esta opção irá configurar observadores de maneira repetitiva, monitorando um diretório especificado e todos os seus subdiretórios.
• --format: esta opção diz ao inotifywait para monitorar alterações usando o nome do evento seguido do caminho do arquivo. Os eventos que queremos monitorar são close_write (acionado quando um arquivo é criado e completamente gravado no disco), moved_from e moved_to (acionados quando um arquivo é movido) e delete (acionado quando um arquivo é excluído).
• $1: este parâmetro posicional retém o caminho dos arquivos alterados.

Na sequência, vamos adicionar um comando grep para determinar se nossos arquivos são imagens JPEG ou PNG. A opção -i irá dizer ao grep para ignorar a diferença entre maiúsculas e minúsculas; -E irá especificar que o grep deve usar expressões regulares estendidas e a --line-buffered irá dizer ao grep para passar as linhas correspondentes para um loop while:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

A seguir, vamos construir um loop while com o comando read. O read irá processar o evento que o inotifywait detectou, atribuindo-o a uma variável chamada $operation e o caminho do arquivo processado para uma variável chamada $path:

...
| while read operation path; do
  # commands
done;

Vamos combinar este loop com o resto do nosso script:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  # commands
done;

Após o loop while verificar o evento, os comandos dentro do loop tomarão as seguintes ações, dependendo do resultado:

• Criar um novo arquivo WebP se um novo arquivo de imagem for criado ou movido para o diretório de destino.
• Excluir o arquivo WebP se o arquivo de imagem associado for excluído ou movido do diretório de destino.

Há três seções principais dentro do loop. Uma variável chamada webp_path irá reter o caminho para a versão .webp da imagem em questão:

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

A seguir, o script irá testar qual evento aconteceu:

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
  # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
  # commands to be executed if a new file is created
fi;

Se o arquivo foi movido ou excluído, o script irá verificar se a versão .webp existe. Se ela existe, o script irá removê-la usando o rm:

...
if [ -f "$webp_path" ]; then
  $(rm -f "$webp_path");
fi;

Para arquivos recém-criados, a compressão irá acontecer da seguinte forma:

• Se o arquivo correspondente for uma imagem PNG, o script irá usar a compressão sem perdas.
• Se não for, o script usará uma compressão com perdas com a opção -quality.

Vamos adicionar os comandos cwebp que irão fazer este trabalho no script:

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
  $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
  $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

Na íntegra, o arquivo webp-watchers.sh se parecerá com este:

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
  if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
    if [ -f "$webp_path" ]; then
      $(rm -f "$webp_path");
    fi;
  elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
     if [ $(grep -i '\.png$' <<< "$path") ]; then
       $(cwebp -quiet -lossless "$path" -o "$webp_path");
     else
       $(cwebp -quiet -q 90 "$path" -o "$webp_path");
     fi;
  fi;
done;

Salve e feche o arquivo. Não se esqueça de torná-lo executável:

chmod a+x ~/webp-watchers.sh

Vamos executar este script no diretório /var/www/html/webp em segundo plano, usando o &. Vamos também redirecionar os resultados padrão e os erros padrão para um ~/output.log, para armazenar os resultados em local prontamente disponível:

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

Neste ponto, você converteu os arquivos JPEG e PNG em /var/www/html/webp para o formato WebP e configurou observadores para fazer esse trabalho, usando o script webp-watchers.sh. Agora é hora de explorar opções para entregar imagens WebP aos visitantes do seu site.

Passo 5 — Exibindo Imagens WebP para Visitantes Usando Elementos HTML

Neste passo, vamos explicar como exibir imagens WebP com elementos HTML. Neste ponto, devem haver versões .webp de cada uma das imagens teste JPEG e PNG no diretório /var/www/html/webp. Agora, podemos exibi-las para os navegadores compatíveis, usando ou os elementos HTML5 (<picture>) ou o módulo Apache mod_rewrite. Vamos usar elementos HTML neste passo.

O elemento <picture> permite que você inclua imagens diretamente nas suas páginas Web e defina mais de uma fonte de imagens. Se seu navegador é compatível com o formato WebP, ele irá baixar a versão .webp do arquivo em vez da versão original, resultando em páginas Web sendo exibidas mais rapidamente. Vale dizer que o elemento <picture> é bem suportado em navegadores modernos compatíveis com o formato WebP.

O elemento <picture> é um container com elementos <source> que <image> apontam para arquivos específicos. Se usarmos <source> para apontar para uma imagem .webp, o navegador verá se ele pode lidar com ela; caso contrário, ele retrocederá para o arquivo de imagem especificado no atributo src do elemento <source>.

Vamos usar o arquivo logo.png do nosso diretório /var/www/html/webp, o qual convertemos para logo.webp, como um exemplo com <source>. Podemos usar o seguinte código HTML para exibir o logo.webp em qualquer navegador compatível com o formato WebP e o logo.png com navegadors não compatíveis com o WebP ou o elemento <picture>.

Crie um arquivo HTML localizado em /var/www/html/webp/picture.html:

nano /var/www/html/webp/picture.html

Adicione o código a seguir à página Web para exibir o logo.webp para navegadores compatíveis, usando o elemento <picture>:

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

Salve e feche o arquivo.

Para testar se tudo está funcionando, navegue até a página http://your_server_ip/webp/picture.html. Você deve ver a imagem teste PNG.

Agora que você sabe como exibir imagens .webp diretamente do código HTML, vamos ver como automatizar este processo usando o módulo mod_rewrite do Apache.

Passo 6 — Exibindo Imagens WebP Usando o mod_rewrite

Se queremos otimizar a velocidade do nosso site, mas temos um grande número de páginas ou muito pouco tempo para editar o código HTML, então o módulo mod_rewrite do Apache pode nos ajudar a automatizar o processo de exibição de imagens .webp em navegadores compatíveis.

Primeiramente, crie um arquivo .htaccess no diretório /var/www/html/webp usando o comando a seguir:

nano /var/www/html/webp/.htaccess

A diretiva ifModule irá testar se o mod_rewrite está disponível; se ele estiver, ele pode ser ativado usando o RewriteEngine On. Adicione essas diretivas ao .htaccess:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  # further directives
</IfModule>

O servidor Web fará vários testes para estabelecer quando exibir imagens .webp para o usuário. Quando um navegador faz um pedido, ele inclui um cabeçalho que indica ao servidor o que o navegador é capaz de manipular. No caso do WebP, o navegador irá enviar um cabeçalho Accept que contém image/webp. Vamos verificar se o navegador enviou aquele cabeçalho usando o RewriteCond, que especifica os critérios que devem ser correspondidos para executar o RewriteRule:

...
RewriteCond %{HTTP_ACCEPT} image/webp

Tudo deve ser filtrado, exceto as imagens JPEG e PNG. Usando o RewriteCond novamente, adicione uma expressão regular (similar ao que usamos nas seções anteriores) para corresponder ao URI solicitado:

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 

O modificador (?i) fará com que a correspondência não diferencie maiúsculas e minúsculas.

Para verificar se a versão .webp do arquivo existe, use o RewriteCond novamente do seguinte modo:

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

Finalmente, se todas as condições anteriores forem cumpridas, o RewriteRule irá redirecionar o arquivo JPEG ou PNG solicitado para seu arquivo WebP associado. Observe que isso irá redirecionar usando o sinalizador -R, em vez de reescrever o URI. A diferença entre reescrever e redirecionar é que o servidor irá exibir o URI reescrito sem contar ao navegador. Por exemplo, o URI irá mostrar que a extensão de arquivo é .png, mas ele será na realidade um arquivo .webp. Adicione o RewriteRule ao arquivo:

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 

Neste ponto, a seção mod_rewrite no arquivo .htaccess está completa. Mas o que acontecerá se houver um servidor de cache intermediário entre seu servidor e o cliente? Ele pode exibir a versão errada ao usuário final. É por isso que vale a pena verificar se o mod_headers está habilitado, para enviar o cabeçalho Vary: Accept. O cabeçalho Vary indica aos servidores de cache (como servidores proxy) que o tipo de conteúdo do documento varia dependendo das capacidades do navegador que solicita o documento. Além disso, a resposta será gerada com base no cabeçalho Accept no pedido. Um pedido com um cabeçalho Accept diferente pode obter uma resposta diferente. Este cabeçalho é importante porque ele impede que imagens WebP em cache sejam exibidas para navegadores não compatíveis:

...
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

Enfim, no final do arquivo .htaccess, configure o tipo MIME das imagens .webp como image/webp usando a diretiva AddType. Isso irá exibir as imagens usando o tipo de MIME correto:

...
AddType image/webp .webp

Esta é a versão final do nosso arquivo .htaccess:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Vamos colocar o que fizemos neste passo em prática. Se você seguiu as instruções nos passos anteriores, você deve ter as imagens logo.png e logo.webp em /var/www/html/webp. Vamos usar uma tag simples <img> para incluir a logo.png em nossa página Web. Crie um novo arquivo HTML para testar a configuração:

nano /var/www/html/webp/img.html

Digite o código HTML a seguir no arquivo:

<img src="logo.png" alt="Site Logo">

Salve e feche o arquivo.

Quando você visitar a página Web usando o Chrome visitando http://your_server_ip/webp/img.html, você irá notar que a imagem exibida é a versão .webp (tente abrir a imagem em uma nova aba). Se você usa o Firefox, você receberá uma imagem .png automaticamente.

Conclusão

Neste tutorial, abordamos técnicas básicas para trabalhar com imagens WebP. Explicamos como usar o cwebp para converter arquivos, além de duas opções para exibir essas imagens aos usuários: o elemento <picture> do HTML5 e o mod_rewrite do Apache.

Para personalizar os scripts deste tutorial, você pode consultar alguns desses recursos:

• Para aprender mais sobre as características do formato WebP e como usar as ferramentas de conversão, consulte a documentação do WebP.
• Para ver mais detalhes sobre o uso do elemento <picture>, consulte sua documentação no MDN.
• Para entender completamente como usar o mod_rewrite, consulte sua documentação.

Usar o formato WebP para suas imagens irá reduzir os tamanhos dos arquivos de maneira considerável. Isso pode reduzir o uso da largura de banda e fazer as páginas carregarem mais rapidamente, particularmente se seu site usar muitas imagens.