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
Geralmente, as pessoas usam uma das seguintes abordagens para converter imagens
em 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 pequenos 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 de 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 o WebP para navegadores mais recentes e uma imagem substituta para navegadores mais antigos:
Antes:
<img src="flower.jpg" alt="">
Depois:
<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 Accept HTTP, 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 a seguir uma regra mod_rewrite do Apache que pode veicular alternativas do 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 de maneira diferente, dependendo do cabeçalho Accept:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
A regra de substituição anterior 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.