Aqui no The Robot usamos imagens WebP preferencialmente quando este formato é suportado pelo navegador usado pelo leitor.

Entretanto, quando o navegador não suporta o formato webp então é servido as imagens em seus formatos originais, mas, com otimizações equilibradas em tamanho e qualidade.

As imagens em formato WebP são geralmente muito menores em tamanho que os arquivos JPG / PNG, pode ser até 80% menor, permitindo que as páginas da web carreguem mais rapidamente.

Desde 2019, o webp é suportado em todos os principais navegadores web:

Neste artigo, vou mostrar como configurar seu servidor web a exibir imagens no formato webp quando detectar suporte pelo navegador, caso contrario, exibir o formato jpeg ou png quando detectado um navegador incompatível.

Escolha o seu servidor http para prosseguir:

Configurando o Webp com Apache

Configurando Webp com Nginx


Configurando Webp com Nginx

Este método só funciona para imagens servidas diretamente do seu VPS. Cache do Cloudflare e outros CDNs não exibirão as imagens em webp.

A primeira etapa é inserir o parâmetro a seguir dentro do arquivo nginx.conf.

A localização deste arquivo irá variar dependendo de como você instalou o software em seu servidor. 

Para muitas distribuições linux, o arquivo estará localizado em um dos seguintes caminhos:

  • /etc/nginx/nginx.conf 
  • /usr/local/nginx/conf/nginx.conf 
  • /usr/local/etc/nginx/nginx.conf

Após encontrar o arquivo nginx.conf, insira o código a seguir em algum lugar dentro do contexto http{}.

map $http_accept $img_suffix {
  "~*webp"  ".webp";
}

O Próximo passo é inserir o código de condição ao arquivo vhost do seu site.

Mais uma vez, a localização do arquivo dependerá de como a instalação do Nginx foi feita em seu servidor.

Como exemplo, seu vhost poderá estar localizado em um dos seguintes caminhos:

  • /usr/local/nginx/conf/conf.d/seusite.conf
  • /usr/local/etc/nginx/conf.d/seusite.conf
  • /etc/nginx/conf.d/seusite.conf
  • /etc/nginx/sites-available/seusite.conf 
  • /usr/local/etc/nginx/sites-available/seusite.conf 
  • /etc/nginx/sites-available/seusite.conf 

Após encontrar o arquivo seusite.conf insira o código a seguir em algum lugar dentro do contexto server{}.

location ~* \.(?:png|jpe?g|gif|webp)$ {
    expires 30d;
    add_header Vary "Accept-Encoding";
    add_header Cache-Control "public, no-transform";
    try_files $uri$img_suffix $uri =404;
  }

Pronto, agora com as duas instruções inseridas nos lugares corretos, reinicie o nginx com o comando:

sudo service nginx reload && sudo service nginx restart

Convertendo suas imagens para formato .webp

Confirmando o funcionamento da condição.


Configurando o Webp com Apache

Com o apache é relativamente fácil implantar suporte a imagens webp em seu site.

Existem muitas maneiras de servir imagens WebP com Apache para visitantes com navegadores suportados.

A maneira mais simples é utilizando uma instrução mod_rewrite e mod_ headers dentro do arquivo .htaccess.

Se utiliza especificamente WordPress com Apache, o plugin EWWW Image Optimizer faz todo trabalho automaticamente e não precisa seguir os passos a seguir. 

Insira o código a seguir dentro do arquivo .htaccess localizado na raiz da instalação do seu site. Se ainda não existe, crie um arquivo com este nome.

<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

Configuração pronta.


Convertendo suas imagens para formato .webp

Podemos converter imagens JPG e PNG para Webp em diversas maneiras.

Para quem usa WordPress ou CMS semelhantes pode querer usar plugins especializados na conversão para webp, que converte todas as imagens automaticamente e facilita muito o processo. 

Se não utiliza nenhum CMS, uma boa maneira de converter suas imagens é utilizando um script de automação em seu servidor.

O script optimise-images do projeto centminmod é o nosso preferido nestes caso.

Para converter manualmente, recomendo utilizar a plataforma squoosh, lançada pelo time de especialistas do Google.


Confirmando o funcionamento da condição.

Por ultimo e o mais importante é saber se tudo está funcionando.

Com as instruções inseridas corretamente no Nginx ou Apache e as imagens já convertidas, limpe todos os caches aplicados em seu site.

Utilizando um navegador que suporte o webp (vai de Chrome), abra seu site em alguma página que tenha imagem e que possua versão convertida para webp.

Pressione em seu teclado CRTL + SHIFT +i e o Dev-tools será aberto. Aqui vamos analisar a guia Network.

Clique na aba Network e, em seguida, recarregue a página do seu site pressionando a tecla F5.

Um relatório de tudo que o navegador carregou de seu site será exibido.

Atente-se na coluna Type e confira se as imagens foram carregadas no formato webp ou se continuam em seus formatos originais.

Se apareceu webp na coluna type então está tudo funcionando perfeitamente.

Author

Sou um entusiasta da Ciência da Computação. No The/Robot eu blogo sobre infraestrutura web, ecommerce, wordpress e assuntos relacionados ao empreendedorismo digital.

Write A Comment