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

Nov 5, 2018

Appears in: Tempos de carregamento rápidos

Katie Hempenius

TwitterGitHubGlitchHomepage

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 Terminal (note: if the Terminal button does not show you may need to use the Fullscreen option).

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

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