Usar imagens WebP

Katie Hempenius
Katie Hempenius
X

Por que isso é importante?

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

O formato WebP é uma excelente substituição para imagens JPEG, PNG e GIF. Além disso, o WebP oferece compactação com e sem perda. Na compressão sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas às custas de uma possível redução da qualidade da imagem.

Converter imagens para WebP

As pessoas geralmente usam uma das seguintes abordagens para converter as imagens para WebP: a ferramenta de linha de comando cwebp ou o plug-in Imagemin WebP (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 com que você precisará se preocupar é a configuração de qualidade. É possível especificar um nível de qualidade de 0 (pior) a 100 (melhor). Vale a pena testar isso, descobrir qual nível é o equilíbrio certo entre qualidade da imagem e 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 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 Imagemin

O plug-in Imagemin WebP pode ser usado sozinho ou com sua ferramenta de build favorita (Webpack/Gulp/Grunt/etc.). Isso geralmente envolve a adição de aproximadamente 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 usa uma dessas ferramentas de build, pode usar a Imagemin sozinha como um script do Node. Esse script converterá os arquivos no diretório images e os salvará 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 oferecer suporte apenas a navegadores compatíveis com WebP, você pode parar de ler. Caso contrário, veicule o 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 como são ordenadas em relação umas às outras, 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 fonte listada que estiver em um formato compatível. Se o navegador não oferecer suporte a nenhum dos formatos listados nas tags <source>, ele voltará a carregar a imagem especificada pela tag <img>.

<img>

A tag <img> é o que faz esse código funcionar em navegadores que não oferecem suporte à tag <picture>. Se um navegador não oferecer suporte à tag <picture>, as tags incompatíveis serão ignoradas. Assim, ele só "vê" a tag <img src="flower.jpg" alt=""> e carrega essa imagem.

Como ler o cabeçalho HTTP Accept

Se você tem um back-end de aplicativo ou servidor da Web que permite reescrever solicitações, leia o valor do cabeçalho HTTP Accept, que anunciará os formatos de imagem alternativos compatíveis:

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

Ler o cabeçalho dessa solicitação e reescrever a resposta com base no conteúdo dela facilita a marcação de imagem. A marcação <picture> pode ficar bastante longa com muitas fontes. Veja abaixo uma regra mod_rewrite do Apache que pode disponibilizar 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 vários 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 um WebP alternativo for encontrado, ele será veiculado com o cabeçalho Content-Type adequado. Com isso, você poderá usar marcações de imagem semelhantes às seguintes com suporte a WebP automático:

<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 exibidas usando o WebP. Execute a auditoria de desempenho do Lighthouse (Lighthouse > Options > Performance) e procure os resultados da auditoria Veicular imagens em formatos de última geração. O Lighthouse listará todas as imagens que não estiverem sendo exibidas no WebP.