Por que isso é importante para você?
Imagens WebP são menores do que as equivalentes nos formatos JPEG e PNG, geralmente magnitude de uma redução de 25 a 35% no tamanho do arquivo. Isso diminui o tamanho da página e melhora o desempenho.
- O YouTube descobriu que mudar para miniaturas WebP resultou em 10% carregamentos de página mais rápidos.
- Facebook tenhou uma Uma economia de 25% a 35% no tamanho de arquivo para JPEGs e uma economia de 80% no tamanho de arquivo para PNGs quando eles passaram a usar o WebP.
O WebP é um excelente substituto para imagens JPEG, PNG e GIF. Além disso, O WebP oferece compactação com e sem perda. Na compressão sem perdas, não há dados for perdida. A compressão com perdas reduz o tamanho do arquivo, mas às custas da possível reduzindo a qualidade da imagem.
Converter imagens para WebP
Em geral, as pessoas usam uma das seguintes abordagens para converter imagens para WebP: o Ferramenta de linha de comando cwebp ou o plug-in Imagemin WebP (npm ). O plug-in Imagemin WebP geralmente é a melhor escolha se o projeto usar build scripts ou ferramentas de build (por exemplo, Webpack ou Gulp), enquanto a CLI é uma boa opção para projetos simples ou se você só precisar converter imagens uma vez.
Ao converter imagens para WebP, você tem a opção de definir uma ampla variedade de de compactação de arquivos, mas, para a maioria das pessoas, você só precisará mais importantes é a definição de qualidade. É possível especificar um nível de qualidade de 0 (pior) a 100 (melhor). Vale a pena testar isso, encontrar qual nível é a escolha certa entre qualidade de imagem e tamanho de arquivo para seu 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 de 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 ou o arquivo de configuração da sua ferramenta de build. Confira exemplos de como fazer isso Webpack, Gulp e Grunt.
Se você não estiver usando uma dessas ferramentas de criação, poderá usar o Imagemin sozinho como
um script de nó. O script vai converter os arquivos no diretório images e
salve-as 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 seu site só for compatível com WebP navegadores, poderá parar de ler. Caso contrário, disponibilizar 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>
A
<picture>,
<source>,
e <img>, incluindo como são ordenadas em relação umas às outras, todas
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 está em um formato compatível. Se o navegador não for compatível com nenhum dos formatos listados nas tags <source>, ele voltará ao carregamento da imagem especificada pela tag <img>.
<img>
A tag <img> é o que faz esse código funcionar nos navegadores
que não são compatíveis com a tag <picture>.
Se um navegador não for compatível com a tag <picture>, ele
ignorar as tags incompatíveis. Assim, ele só "vê" as
<img src="flower.jpg" alt=""> e carrega essa imagem.
Como ler o cabeçalho HTTP Accept
Se você tiver um back-end de aplicativo ou servidor da Web que permita regravar solicitações, leia o valor do cabeçalho HTTP Accept, que vai divulgar quais formatos de imagem alternativos são compatíveis:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Ler esse cabeçalho de solicitação e reescrever a resposta com base em seu conteúdo tem a vantagem de simplificar sua marcação de imagem. A marcação <picture> pode ficar muito longa com muitas fontes. Confira abaixo uma regra mod_rewrite do Apache que pode disponibilizar 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ê fizer isso, será preciso 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 procurará uma versão WebP de qualquer imagem JPEG ou PNG solicitada. Se uma alternativa do WebP for encontrada, ela será veiculada com o cabeçalho Content-Type adequado. Isso permitirá que você use marcação de imagem semelhante à seguinte com suporte automático a 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 do seu site estão sendo exibidas usando WebP. Execute a Auditoria de desempenho do Lighthouse (Lighthouse > Opções > desempenho) e procure os resultados do teste Veicule imagens em de desempenho. O Lighthouse lista as imagens que não são exibidas WebP