Criação de imagens WebP com a linha de comando

A ferramenta de linha de comando webp já foi instalada para você, então você está pronto para começar. Esta ferramenta converte imagens JPG, PNG e TIFF em WebP.

Converta imagens para WebP #

  1. Click Remix to Edit to make the project editable. 1. Click Tools.

  2. Click Logs.

  3. Click Console.

  4. Digite o seguinte comando:

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

Este 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 de fazer isso, você deve ver algo assim 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 com sucesso a imagem para WebP.

No entanto, executar o cwebp uma imagem por vez como este demoraria muito para converter muitas imagens. Se precisar fazer isso, você pode usar um script.

  • Execute este script no console (não se esqueça dos crases):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

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

✔︎ Check-in #

Agora você deve ter 6 arquivos em seu diretório images/:

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

Em seguida, atualize este Glitch para servir imagens WebP aos navegadores que o suportam.

Adicione imagens WebP usando a tag <picture> #

Uma tag <picture> permite que você veicule WebP para navegadores mais novos ao mesmo tempo em que mantém 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 pelas tags <picture>

✔︎ Check-in #

Depois de concluídas, as tags <picture> em
index.html devem ter a seguinte aparência:

<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.

Verifique o uso do WebP com o Lighthouse #

A auditoria de desempenho do Lighthouse Servir imagens em formatos de última geração permite que você saiba se todas as imagens em seu site estão usando formatos de próxima geração, como o WebP.

  1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. Make sure the Performance checkbox is selected in the Categories list.

  4. Click the Generate report button.

  5. Verifique se a auditoria Servir imagens em formatos de próxima geração foi aprovada.

Aprovação da auditoria 'Servir imagens em formatos de última geração' no Lighthouse

Sucesso! Agora você está servindo imagens WebP em seu site.

Last updated: Improve article