Como criar imagens WebP com a linha de comando

Katie Hempenius

A ferramenta de linha de comando webp já foi instalada, então está tudo pronto para você 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 for exibido, 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 de fazer isso, você vai 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 de cada 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 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 .webp) no mesmo diretório.

✔✔ Acompanhamento

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 esse Glitch para disponibilizar imagens WebP para navegadores compatíveis com ele.

Adicionar imagens WebP usando a tag <picture>

A tag <picture> permite disponibilizar o 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> de flower2.jpg e flower3.png por tags <picture>.

✔✔ Acompanhamento

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 Veicular imagens em formatos de última geração do Lighthouse pode informar se todas as imagens no 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á disponibilizando imagens WebP no seu site.