La herramienta de línea de comandos de WebP ya está instalada, por lo que ya está todo listo para comenzar. Esta herramienta convierte imágenes JPG, PNG y TIFF a WebP.
Cómo convertir imágenes a WebP
- Haz clic en Remix to Edit para que el proyecto sea editable.
- Haz clic en Terminal. (Nota: Si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
- Escribe el siguiente comando:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
Este comando convierte, con una calidad de 50 (0 es la peor, 100 es la
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 llevaría 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 comillas simples):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
Esta secuencia de comandos convierte, con una calidad de 50, todos los archivos en el directorio images/ y los guarda como un archivo nuevo (el mismo nombre de archivo, pero con una extensión de archivo .webp) en el mismo directorio.
✔︎ Revisión
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.
Cómo agregar imágenes WebP con la etiqueta <picture>
La etiqueta <picture> te permite entregar WebP a navegadores más nuevos y mantener la compatibilidad con navegadores anteriores.
- En
index.html, reemplaza<img src="images/flower1.jpg"/>por el siguiente código HTML:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- A continuación, reemplaza las etiquetas
<img>por las etiquetasflower2.jpgyflower3.pngpor<picture>.
✔︎ Revisión
Una vez que se complete, las etiquetas <picture> en 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 el sitio.
Verifica el uso de WebP con Lighthouse
La auditoría de rendimiento de Entrega de imágenes en formatos de nueva generación de Lighthouse puede hacerte saber si todas las imágenes de tu sitio usan formatos de nueva generación, como WebP.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generar informe.
- Verifica que se apruebe la auditoría de Entrega imágenes en formatos de nueva generación.
¡Listo! Ahora estás entregando imágenes WebP en tu sitio.