Usar imagens WebP

Katie Hempenius
Katie Hempenius

Por que isso é importante para você?

As imagens WebP são menores do que as JPEG e PNG, geralmente com uma redução de 25% a 35% no tamanho do arquivo. Isso diminui o tamanho das páginas e melhora a performance.

  • O YouTube descobriu que a mudança para miniaturas WebP resultou em 10% de carregamento de página mais rápido.
  • O Facebook teve uma economia de 25 a 35% no tamanho de arquivos JPEG e de 80% no tamanho de arquivos PNG quando passou a usar o WebP.

O WebP é uma ótima alternativa para imagens JPEG, PNG e GIF. Além disso, o WebP oferece compactação sem perda e com perda. Na compactação sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas pode reduzir a qualidade da imagem.

Converter imagens para WebP

As pessoas geralmente usam uma das seguintes abordagens para converter imagens em WebP: a ferramenta de linha de comando cwebp ou o plug-in WebP do Imagemin (pacote npm). O plug-in Imagemin WebP geralmente é a melhor escolha se o projeto usa scripts ou ferramentas de build (por exemplo, Webpack ou Gulp), enquanto a CLI é uma boa opção para projetos simples ou se você só precisa converter imagens uma vez.

Ao converter imagens para WebP, você tem a opção de definir uma ampla variedade de configurações de compactação. No entanto, para a maioria das pessoas, a única coisa que você precisa se preocupar é a configuração de qualidade. É possível especificar um nível de qualidade de 0 (pior) a 100 (melhor). Vale a pena brincar com isso, descobrir qual nível é o compromisso certo entre a qualidade da imagem e o tamanho do arquivo para suas necessidades.

Usar cwebp

Converta um único arquivo usando as configurações de compactação padrão do cwebp:

cwebp images/flower.jpg -o images/flower.webp

Converta um único arquivo usando um nível de qualidade de 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Converta todos os arquivos em um diretório:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Usar o Imagemin

O plug-in Imagemin WebP pode ser usado sozinho ou com sua ferramenta de build favorita (Webpack/Gulp/Grunt/etc.). Isso geralmente envolve adicionar cerca de 10 linhas de código a um script de build ou ao arquivo de configuração da ferramenta de build. Confira exemplos de como fazer isso para o Webpack, Gulp e Grunt.

Se você não estiver usando uma dessas ferramentas de build, use o Imagemin como um script do Node. Esse script vai converter os arquivos no diretório images e salvá-los no diretório compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Exibir imagens WebP

Se o site só oferece suporte a navegadores compatíveis com WebP, você pode parar de ler. Caso contrário, exiba WebP para navegadores mais recentes e uma imagem substituta para navegadores mais antigos:

Antes:html <img src="flower.jpg" alt="">

Depois:html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

As tags <picture>, <source> e <img>, incluindo a ordem em que são organizadas, interagem para alcançar esse resultado final.

<picture>

A tag <picture> fornece um wrapper para zero ou mais tags <source> e uma tag <img>.

<source>

A tag <source> especifica um recurso de mídia.

O navegador usa a primeira origem listada em um formato compatível. Se o navegador não oferecer suporte a nenhum dos formatos listados nas tags <source>, ele vai carregar a imagem especificada pela tag <img>.

<img>

A tag <img> é o que faz com que esse código funcione em navegadores que não oferecem suporte à tag <picture>. Se um navegador não for compatível com a tag <picture>, ele vai ignorar as tags que não são compatíveis. Assim, ele só "encontra" a tag <img src="flower.jpg" alt=""> e carrega essa imagem.

Leitura do cabeçalho HTTP Accept

Se você tiver um back-end de aplicativo ou um servidor da Web que permita reescrever solicitações, poderá ler o valor do cabeçalho HTTP Accept, que vai anunciar quais formatos de imagem alternativos são aceitos:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Ler esse cabeçalho de solicitação e reescrever a resposta com base no conteúdo tem a vantagem de simplificar a marcação da imagem. A marcação <picture> pode ficar bastante longa com muitas fontes. Confira abaixo uma regra mod_rewrite do Apache que pode exibir alternativas WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

Se você seguir esse caminho, vai precisar definir o cabeçalho de resposta HTTP Vary para garantir que os caches entendam que a imagem pode ser veiculada com diferentes tipos de conteúdo:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

A regra de substituição acima vai procurar uma versão WebP de qualquer imagem JPEG ou PNG solicitada. Se uma alternativa WebP for encontrada, ela será veiculada com o cabeçalho Content-Type adequado. Isso permite usar a marcação de imagem semelhante a esta com suporte automático para WebP:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Verificar o uso do WebP

O Lighthouse pode ser usado para verificar se todas as imagens no seu site estão sendo veiculadas usando WebP. Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Performance) e procure os resultados da auditoria Servir imagens em formatos de última geração. O Lighthouse vai listar todas as imagens que não estão sendo veiculadas em WebP.