Desde ya hace tiempo la optimización de una página web no es única y exclusivamente para los programadores. En la parte del diseño también las imágenes juegan un papel extremadamente importante a la hora de marcar la velocidad de carga de una página. Tanto es así que Google tiene en cuenta la calidad de optimización de nuestras imágenes y también nos puntúa dependiendo de como sea. Por eso vamos a ver como comprimir imágenes con smush.it desde consola de comandos en linux y windows.
Google page insights es el que fuerza a todos los webmasters a optimizar cada vez sus páginas, algo que viene de perlas a los usuarios ya que disfrutan de unos tiempos de carga relativamente bajos incluso con conexiones lentas. Esto en parte es bueno, pero no deja de ser un dolor de cabeza para todos los que disponen de servidores web y sube imágenes a ellos.
Smush.it es una utilidad de Yahoo! que se dedica en exclusiva a comprimir las imágenes que subamos (o demos url) para eliminar ese espacio innecesario que ocupan sin perder absolutamente nada de calidad. Algo ideal para nuestro propósito, pero que desde luego no usaría para comprimir las fotos que voy guardando si es lo que estás pensando.
El motivo es por que los algoritmos que utiliza son para no perder calidad, pero eso no significa que no se pierda información de las imágenes. Además otro de los inconvenientes que tendremos es que algunas imágenes que subamos puede que nos las devuelva en formato .png (si el resultante es más pequeño en png que en el formato original que solicitamos).
Aparte de esto, también tenemos plugins para diversas plataformas como wordpress que nos permitirán comprimir todas las imágenes que subamos a nuestro servidor de forma automática, por lo que este pequeño script java que usa el api de smush.it nos puede servir cuando no podemos echar mano de ninguno de ellos.
Como optimizar imágenes para Google Pagespeed con smush.it y la consola de comandos
Lo primero que haremos, yo desde luego, es agradecer a los desarrolladores este script que usa el api de yahoo para reducir las imágenes. Podemos descargarlo desde su página de ghitub. Vamos a ver paso a paso todo el proceso desde la descarga hasta el uso.
- Instalar java
Si no tenemos java instalado en nuestro servidor, usaremos el comando de instalación correspondiente para ello.
En CentOSyum -y install java
En Deian/Ubuntu
apt-get install java
- Guardar el script
Ahora tendremos que descargar y descomprimir el script de abhirama para comprimir archivos con smush.it. Para ello nos crearemos una carpeta donde lo queramos tener guardado para su posterior uso, por ejemplo /var/apps/mkdir /var/apps
descargaremos y descomprimiremos el fichero
cd /var/apps wget https://github.com/downloads/abhirama/smushit/smushit-v0.3.zip unzip smushit-v0.3.zip
- Usar el compresor
Veremos que nos ha dejado en la carpeta un archivo smushit.jar, que para utilizar tendremos que hacer una llamada a java indicándole la carpeta que queremos comprimir recursivamente y los formatos de imagen a comprimir con el siguiente comando:java -jar /var/apps/smushit.jar -imageDir=/var/images/ -verbose=true -imgExtensions=gif,png,jpeg
El funcionamiento del comando es el siguiente
- en la primera parte con java buscamos la ejecución del archivo
- luego indicamos donde tenemos el script, en este caso /var/apps/smushit.jar
- En tercer lugar le indicamos el directorio a comprimir -imageDir=/mi/carpeta
- -verbose=true hará que veamos en tiempo real el progreso en la consola, podemos ponerle false si no queremos mostrar la salida (para ejecutar con cron por ejemplo)
- imgExtensions= será la lista de extensiones que queremos buscar y comprimir, si queremos comprimir más de una simplemente separamos las extensiones con comas
Las imágenes comprimidas sustituirán a las originales de forma automática y recorrerá todas las subcarpetas de forma recursiva para ahorrarnos trabajo, ya que la idea es tener optimizadas todas las imágenes.
Optimizar imágenes con smush.it desde la consola de windows
Para la parte de realizar la optimización desde la consola de windows tendremos que seguir unos pasos similares. Una vez instalado el java en nuestro equipo descargaremos el mismo archivo y lo guardaremos en la carpeta que mejor nos convenga.
Ahora en esa carpeta crearemos un archivo .bat con el siguiente contenido:
java -jar "C:\SmushIt\smushit.jar" -imageDir=%1 -verbose=true -dryRun=false -imgExtensions=gif,png,jpeg,jpg >"C:\SmushIt\results.txt" 2>&1
El archivo bat lo podemos crear con el bloc de notas y guardarlo con extensión .bat seleccionando todos los archivos al guardar.
En este caso tenemos guardado el script en la carpeta c:\smushit\smushit.jar y hacemos la llamada siempre a esa carpeta desde un bat (o consola de comandos), pero también podemos guardarlo en la misma carpeta que el script.bat y ejecutarlo así:
java -jar smushit.jar -imageDir=%1 -verbose=true -dryRun=false -imgExtensions=gif,png,jpeg,jpg >"C:\SmushIt\results.txt" 2>&1
Cuando le damos al script la carpeta que queremos comprimir el solo realizará el proceso y nos dejará un log de todo lo que ha hecho en el archivo C:\SmushIt\results.txt
Con esto conseguiremos ganar unos puntos en google page insights y mejorar la experiencia de nustros usuarios con una carga más rápida de las páginas.
¿Optimizas tus imágenes? ¿Qué software utilizas?