Como criar imagens WebP com a linha de comando

Katie Hempenius

A ferramenta de linha de comando do Webp já foi instalada. Portanto, você já pode começar. Esta ferramenta converte imagens JPG, PNG e TIFF para WebP.

Converter imagens para WebP

1. Clique em Remixar para editar para tornar o projeto editável.
2. Clique em Terminal. Observação: se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".
3. Digite o seguinte comando:

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

Esse comando converte, com uma qualidade de 50 (0 é a pior; 100 é a melhor), o arquivo images/flower1.jpg e o salva como images/flower1.webp.

Depois disso, você verá algo parecido com isto no console:

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

Você acabou de converter a imagem para WebP.

No entanto, executar o comando cwebp uma imagem por vez, assim, levaria uma muito tempo para converter muitas imagens. Se precisar fazer isso, use um script como alternativa.

• Execute este script no console (não se esqueça das chaves):

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

Esse script converte, com uma qualidade de 50, todos os arquivos no diretório images/ e os salva como um novo arquivo (mesmo nome de arquivo, mas com uma extensão de arquivo .webp) no mesmo diretório.

✔︎ check-in

Agora você deve ter seis arquivos no diretório images/:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Em seguida, atualize o Glitch para disponibilizar imagens WebP para navegadores compatíveis.

Adicionar imagens WebP usando a tag <picture>

A tag <picture> permite que você ofereça WebP para navegadores mais recentes, mantendo o suporte para navegadores mais antigos.

• Em index.html, substitua <img src="images/flower1.jpg"/> pelo seguinte HTML:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>

• Em seguida, substitua as tags <img> para flower2.jpg e flower3.png por <picture>.

✔︎ check-in

Depois de concluídas, as tags <picture> em index.html ficarão assim:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

Em seguida, use o Lighthouse para verificar se você implementou corretamente as imagens WebP no arquivo site.

Verificar o uso do WebP com o Lighthouse

A auditoria de desempenho Veicule imagens em formatos de última geração do Lighthouse: se todas as imagens do seu site estão usando formatos de última geração, como WebP.

1. Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
3. Clique na guia Lighthouse.
4. Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
5. Clique no botão Gerar relatório.
6. Verifique se a auditoria Exibir imagens em formatos de última geração foi aprovada.

Pronto. Agora você está veiculando imagens WebP no seu site.