
Optimiza tus imagenes para la web
Aprende a utilizar una libreria de google para convertir a .webp tus imagenes
Introducción
Cuándo estamos construyendo aplicaciones o blogs para la WEB hay que tener en cuenta que cualquier archivo que no sea texto tendrá un peso asociado elevado, y esto para la WEB significa más tiempo de carga al momento de solicitar ese recurso al servidor que lo aloja. Para evitar esto y tener un buen rendimiento en nuestra web debemos buscar como optimizar nuestras imagenes.
Google desarrolló un formato de imagen que permite comprimir con y sin perdida de calidad disminuir el peso equivalente de una imagen y que así sea optimizada para la web. Este formato tiene por extensión .webp
Hay muchas herramientas online que permiten la transformación a este formato, pero si no quieres subir tus imagenes a estas herramientas online, o simplemente no tienes acceso a internet veremos una forma de generar este formato de manera local, o sea en nuestro computador y sin necesidad de una herramienta externa.
Descargar el convertidor
Primero debemos descargar el convertidor, es una libreria que provee google que puedes instalar o usar la version precompilada. En esta oportunidad nos enfocaremos en la versión precompilada ya que es más fácil de configurar.
Luego de descargar procedemos a ubicarla en un directorio apropiado.
⚠️ Para windows, puedes extraer los ficheros descargados con winrar en
C:\libwebp
. Es importante resaltar que para la conversión deberás dirigirte a este directorioC:\libwebp\bin
y aquí llamar a la herramienta que necesites.
⚠️ Para linux, deberás construir la libreria ya que no logré hacerlo funcionar con los precompilados. te diriges a esta página y sigue las instrucciones de instalación y deberías tener los binarios instalados.
Conversión de la imagen
Para la conversión sólo necesitas dos cosas, completar el paso anterior y tener la imagen que quieras convertir.
Nos ubicamos en el directorio de la imagen y procedemos con la conversión.
Windows
C:\libwebp\bin\cwebp.exe -q 80 prueba.png -o prueba.webp
Linux
cwebp -q 100 prueba.png -o prueba.webp
el flag -q
indica a que porcentaje de calidad la queremos de la original. por defecto es 75% y el flag -o
indica como se llamará el archivo de salida.
Al presionar enter obtendremos un nuevo archivo listo con el formato .webp que pesa mucho menos que el original y está adaptado para la web.
Espero que esto te haya servido y con esto mejores el rendimientode tu web, sigue divirtiendote y recuerda que con esta libreria puedes decodificar también imagenes que están en formato .webp
a cualquier formato que quieras (usando el comando dwebp), también puede convertir GIFs en su versión en .webp
. Si quieres saber qué cosas se pueden hacer con cada comando puedes escribir cwebp -help