sábado, 3 de noviembre de 2012

Optimizar imágenes para la web con trimage y littleutils

How We Improved Page Speed By Cleaning CSS, HTML and Images es un muy interesante artículo de Lara Swanson (publicado en dyn.com) con varias sugerencias y recomendaciones que deberíamos seguir a la hora de planificar, diseñar y mantener sitios web.
Con respecto al mantenimiento, el artículo apunta a hacer una limpieza periódica del código del sitio (html y css), especialmente si el mantenimiento lo hacen más de una persona y/o si el diseño del sitio ya tiene algún tiempo en funcionamiento.
Pero, la recomendación primera, tan obvia como importante, es a estar atentos al tamaño de las imágenes y a su optimización para la web. Por ejemplo, en uno de los párrafos dice -traducción libre mediante-: "En los tests, exportar los JPGs usando el Save for Web de Photoshop al 75%, en vez del 50%, dio que aumenta el tiempo de carga de la imagen un  15%. Usar los JPGs al 50%, en vez de PNGs lo hace un 10%. Todo se resume en saber qué formato de archivo usar y hasta  qué nivel de optimización se puede exprimir cada imagen. También me gusta utilizar ImageOptim para las compresiones finales, especialmente en los archivos PNGs".
Esta última sugerencia despertó mi curiosidad y fui a ver qué era ImageOptim y supe que es un programa para Mac OS. Así que me puse a buscar alternativas al mismo para GNU/Linux y, gracias a alternativeto.com, di con Trimage.org.



Trimage

Trimage se puede instalar en LinuxMint desde el Gestor de software. Aquí va un pequeño  video subido a Youtube por lavacageek que muestra a Trimage en funcionamiento:



Así que lo instalé en mi LinuxMint y, para probarlo, desde morguefile.com descargué esta foto del Cabo Polonio, obra de luisrock62 (de 3032 x 1992 pixeles y 714 KB) y también descargué esta otra foto, obra de jeltovski (de 1024 x 768 y 168 KB).
Al procesarlas con trimage, este fue el resultado:


Como se ve, dependiendo de la imagen el porcentaje de compresión que puede alcanzar varía considerablemente.
En total, el peso sumado  de las dos imágenes originales es 882 KB y el de los resultados de procesarlas es  851 KB. O sea, que, en este ejemplo, sin que se perciba diferencias entre las imagenes originales y las procesadas, se ahorra un 3,5 %.
Otras pruebas que hice, al estilo de las pruebas hechas por Lara Swanson para su artículo en dyn.com,  fueron usar el plugin Save for web de GIMP 2.6 para guardar en formato JPG al 75 % y al 50%. Luego, al resultado de cada prueba lo pasé por el Trimage. Estos son los resultados:

original Save for web (75 %) Save for web (50 %)
imagen TRIMAGE TRIMAGE TRIMAGE
file000596767037.jpg 714 KB 704 KB 602 KB 602 KB 306 KB 306 KB
file000411265358.jpg 168 KB 147 KB 74 KB 63 KB 47 KB 38 KB

En el primer caso, el Trimage no pudo comprimir más ninguna de las dos versiones de la imagen.
En el segundo, redujo las imágenes ya reducidas con el Save for web, en un 15 % y 19 %, respectivamente.
En suma, y según el caso, se pudo reducir el peso del archivo original hasta en un ¡77%!.
Comparen ustedes mismos:

Esta es la imagen original (pesa 168 KB):



Y esta es la misma imagen luego de guardarla con el plugin Save for web de GIMP al 50 % y posteriormente pasarla por el Trimage (pesa 38 KB, algo más de 1/5 del tamaño original):



littleutils


También en la página de la Wikipidia en inglés sobre el formato PNG, hacen referencia a una alternativa de software libre para la optimización de imágenes: littleutils. Este es un completísimo set de herramientas entre las que se encuentran las de compresión de imágenes. Para instalarlo en mi LinuxMint, seguí los pasos indicados  en linuxaria para Ubuntu 11.04:
  1. Descargué littleutils (en el caso de la prueba que hice, el archivo se llamaba littleutils-1.0.26.tar.bz2 y ocupaba 196 KB).
  2. Desde una Terminal moví el archivo descargado a una mejor ubicación: sudo mv ~/Descargas/littleutils-1.0.26.tar.bz2 /usr/local/src/
  3. En la Terminal, Ingresé en modo administrador: sudo su
  4. Instalé las dependencias: apt-get install gifsicle pngcrush lzip libpng12-0 libpng12-dev libjpeg-progs p7zip-full
  5. Descomprimí littleutils: cd /usr/local/src && tar jxvf littleutils-1.0.26.tar.bz2 && cd littleutils-1.0.26
  6. Configuré e instalé littleutils: ./configure && make && make install && make install-extra
Luego de la instalación, para probar esa otra herramienta, en una terminal escribí:
opt-jpg file000411265358_original.jpg

Y mostró la siguiente salida:
file000411265358_original.jpg: 172392 vs. 146877

O sea, que redujo el tamaño del archivo un 15 %.
Con este comando:
find . -name "*.jpg" -exec opt-jpg {} \;
se pueden optimizar todas las imágenes JPG de un directorio. Para más información sobre esta herramienta, vea esta página.

No hay comentarios:

Publicar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.