La herramienta de línea de comandos webp ya está instalada, por lo que 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 para editar para que el proyecto se pueda editar.
- 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.
- Escribe el siguiente comando:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
Este comando convierte al archivo images/flower1.jpg con una calidad de 50 (0 es la peor; 100 es la mejor), 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 mucho tiempo en convertir muchas imágenes. Si necesitas hacerlo, puedes usar una secuencia de comandos.
- 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 todos los archivos del directorio images/ con una calidad de 50 y los guarda como un archivo nuevo (el mismo nombre de archivo, pero con una extensión de archivo .webp) 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 la compatibilidad con los 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>
- Luego, reemplaza las etiquetas
<img>paraflower2.jpgyflower3.pngpor<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 el sitio.
Cómo verificar el uso de WebP con Lighthouse
La auditoría de rendimiento Entrega imágenes en formatos de nueva generación de Lighthouse te permite 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úsculas + J` (o `Command + Option + 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 Generate report.
- Verifica que se apruebe la auditoría Publica imágenes en formatos de nueva generación.
¡Listo! Ahora estás entregando imágenes WebP en tu sitio.