Hace un par de semanas quería convertir las imágenes de mi ecommerce de jpg a webp. Normalmente para modificar imágenes en GNU/Linux uso GIMP o imageMagick, pero ninguno de estos dos tienen soporte nativo para webp, o si lo tienen soy tan despistado que no me he dado cuenta.
¿Y por qué no usar conversión en linea? Pues es una buena opción para un par de imágenes, pero cuando conviertes muchas pues... se vuelve algo tedioso, además ¿por qué no hacerlo directo en nuestro SO?
¿Por qué debería usar webp?
El formato JPG ha estado algo de tiempo pero han surgido nuevos formatos que prometen la misma calidad con un menor tamaño de archivo. Uno de ellos es webp, desarrollado por google.
Menor peso en nuestras imágenes significa mejor rendimiento. Un sitio web que cargue más rápido tendrá mejores indicadores en Lighthouse y un menor consumo de datos para el usuario.
Descargando webp
El primer paso para transformar nuestras imágenes a formato webp es descargar las librerías apropiadas. El paquete que necesitamos para transformar nuestras imágenes se llama webp y se encuentra en los repositorios de las distribuciones populares de GNU/Linux. Instalémoslo.
Si el siguiente comando no te suena o quieres repasar los comandos básicos de GNU/Linux por favor visita mis entradas donde hablo de los comandos más usuales.
sudo apt install webp
Para esta entrada utilizaré una imagen gratuita, en resolución 1920 x 1280, que descargué desde este enlace de pexels, tu puedes usar la que quieras, hasta la foto de tu perro.
El tamaño mi imagen es de 476 Kb.
$ du -h pexels-artem-beliaikin-1120963.jpg
476K pexels-artem-beliaikin-1120963.jpg
Convertir de jpg a webp
Tras haber instalado webp, el comando cwebp estará disponible, sí, con la letra "c" al principio; yo también me he confundido y he querido usarlo como webp a secas al principio.
El comando cwebp nos servirá para convertir nuestra imagen y además es muy sencillo de usar; solo colocamos la imagen que queremos convertir y especificamos el nombre de nuestro archivo de salida con la opción -o.
cwebp pexels-artem-beliaikin-1120963.jpg -o imagen_procesada.webp
Saving file 'imagen_procesada.webp'
File: pexels-artem-beliaikin-1120963.jpg
Dimension: 1920 x 1280
Output: 226348 bytes Y-U-V-All-PSNR 38.69 45.41 46.33 40.05 dB
block count: intra4: 7027
intra16: 2573 (-> 26.80%)
skipped block: 454 (4.73%)
bytes used: header: 276 (0.1%)
mode-partition: 32578 (14.4%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 5%| 15%| 27%| 51%| 9600
quantizer: | 36 | 33 | 27 | 21 |
filter level: | 11 | 7 | 30 | 33 |
Listo, ahora debemos tener un archivo con extensión webp en nuestra misma carpeta.
¿Cuál es más ligero webp o jpg?
Si ahora comparamos los tamaños de ambos archivos notaremos que nuestra nueva imagen tiene cerca de la mitad de tamaño que su versión en jpg.
La calidad del archivo webp resultante te toca juzgarla a ti mismo. A mi me ha parecido prácticamente la misma, con leves diferencias mínimas; quizás una perdida muy leve de contraste, pero casi imperceptible.
du -h *
224K imagen_procesada.webp
476K pexels-artem-beliaikin-1120963.jpg
¿Cómo convertir muchas imágenes jpg a webp?
Convertir muchas imágenes a formato webp es más una solución a nivel de terminal que del programa cwebp en si mismo. De cualquiera manera te dejo el código necesario para convertir todas imágenes jpg en la carpeta donde lo ejecutes a su equivalente en formato webp.
for image in *.jpg; do cwebp $image -o `basename ${image%.jpg}`.webp; done
¿Y qué hago si Safari no tiene soporte para webp?
A la fecha de publicación de este artículo solo hay dos navegadores web que no tienen soporte para webp; Safari y KaiOS Browser, según caniuse. Aunque he leído que los desarrolladores de Safari planean otorgarle soporte completo para webp para finales del 2020.
Pero, si no puedes esperar, la solución es usar las etiquetas figure y source. La etiqueta picture se encargará de envolver fuentes de imágenes que le especifiquemos. El navegador elegirá descargar o ignorar cada una basándose en los formatos que soporte. Es decir, si el navegador tiene soporte para webp descargará la imagen webp, si no lo tiene descargará la imagen en jpg.
No necesito decirte que para que esto funcione debes tener una imagen en formato jpg y otra imagen en formato webp, y ambas deben estar accesibles para el navegador, ¿cierto?
<picture>
<source srcset="https://turuta.com/imagen.webp" type="image/webp">
<source srcset="https://turuta.com/imagen.jpg" type="image/jpeg">
<img src="https://turuta.com/imagen_.webp" alt="" class="img-class">
</picture>
¿Quieres más información relacionada al desarrollo web? ¿Y si te aviso de más entradas como estas? ¿Qué tal memes?
¡Entra aquí y sígueme en Twitter!
Top comments (0)