Como criar imagens WebP com a linha de comando

Katie Hempenius

A ferramenta de linha de comando webp já foi instalada, então você está pronto para começar. Essa ferramenta converte imagens JPG, PNG e TIFF em 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 o arquivo images/flower1.jpg com uma qualidade de 50 (0 é a pior, e 100 é a melhor) 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 levaria muito tempo para converter muitas imagens. Se precisar fazer isso, use um script.

• Execute este script no console (não se esqueça dos acentos graves):

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

Esse script converte, com qualidade 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 exibir imagens WebP para navegadores compatíveis.

Adicionar imagens WebP usando a tag <picture>

A tag <picture> permite que você veicule o WebP para navegadores mais recentes, mantendo o suporte para os 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 pelas tags <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 site.

Verificar o uso do WebP com o Lighthouse

A auditoria de desempenho Exibir imagens em formatos de última geração do Lighthouse pode informar se todas as imagens no site estão usando formatos de última geração, como WebP.

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
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á disponibilizando imagens WebP no seu site.