Cómo crear imágenes WebP con la línea de comandos

Katie Hempenius

El WebP herramienta de línea de comandos ya se instaló para ti, así que está todo listo para comenzar. Esta herramienta convierte imágenes JPG, PNG y TIFF a WebP.

Cómo convertir imágenes a WebP

1. Haz clic en Remix to Edit para que el proyecto sea editable.
2. Haz clic en Terminal. Nota: Si no ves el botón de la terminal, es posible que debas usar la opción de pantalla completa.
3. Escribe el siguiente comando:

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

Este comando convierte, con una calidad de 50 (0 es el peor; 100 es el valor mejor), el archivo images/flower1.jpg y lo guarda como images/flower1.webp.

Después de hacer esto, deberías ver algo como esto en la consola:

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 |

Acabas de convertir correctamente la imagen a WebP.

Sin embargo, ejecutar el comando cwebp de a una imagen a la vez de esta manera tardaría un mucho tiempo para convertir muchas imágenes. Si necesitas hacer esto, puedes usar una secuencia de comandos en su lugar.

• Ejecuta esta secuencia de comandos en la consola (no olvides las acentos graves):

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

Esta secuencia de comandos convierte todos los archivos de images/ con una calidad de 50. y los guarda como un archivo nuevo (el mismo nombre de archivo, pero con un archivo .webp). extensión) en el mismo directorio.

✔︎ Registro

Ahora, deberías tener 6 archivos en el directorio images/:

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

A continuación, actualiza esta Glitch para publicar imágenes WebP en navegadores compatibles.

Agrega imágenes WebP con la etiqueta <picture>

La etiqueta <picture> te permite publicar WebP en navegadores más nuevos y, al mismo tiempo, mantener compatibilidad con navegadores anteriores.

• En index.html, reemplaza <img src="images/flower1.jpg"/> por lo siguiente: HTML:

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

• Luego, reemplaza las etiquetas <img> para flower2.jpg y flower3.png por <picture>.

✔︎ Registro

Cuando termines, las etiquetas <picture> de index.html deberían verse de la siguiente manera:

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

A continuación, usa Lighthouse para verificar si implementaste correctamente las imágenes WebP en la .

Verifica el uso de WebP con Lighthouse

Con la auditoría de rendimiento Publica imágenes en formatos de nueva generación de Lighthouse, puedes saber si todas las imágenes de tu sitio usan formatos de nueva generación, como WebP.

1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
2. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
3. Haz clic en la pestaña Lighthouse.
4. Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
5. Haz clic en el botón Generate report.
6. Verifica que se apruebe la auditoría Public images in next-gen formats.

¡Listo! Ahora estás entregando imágenes WebP en tu sitio.