Infraestrutura

Como servir imagens Webp com Nginx ou Apache

Otimize suas imagens para melhor performace com o formato webp e impulsione seu SEO.
Google+ Pinterest LinkedIn Tumblr

Aqui no The Robot usamos imagens WebP preferencialmente quando este formato é suportado pelo navegador que o leitor está usando.

Quando o navegador não suporta 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.

O webp é suportador pelos navegadores:

  • Google Chrome.
  • Ópera.
  • Navegadores baseado no Chromium.
  • Microsoft Edge – A partir da versão Windows 10 1809 October 2018 Update.
  • Firefox 65 ou superior

Configurando o Webp com Apache

Configurando Webp com Nginx


Antes de configurar o servidor Nginx

Este tutorial é recomendado para pessoas com conhecimentos básicos em linux. 

Como pré requisito é necessário saber se conectar ao servidor via SSH e edição e manipulação de arquivos de textos via terminal linux.

Faça backup de todos seu VPS antes de realizar qualquer modificação.

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.

Qualquer dúvida, utilize os comentários para solicitar ajuda.

Configurando Webp com Nginx

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.

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

Do NOT follow this link or you will be banned from the site!