Para utilizar todas las funcionalidades que ofrece este sitio, es necesario tener JavaScript habilitado.

En mi computador personal uso exclusivamente linux (slackware para ser exactos). Todas mis actividades las hago en este sistema operativo. En el area de programación, hay una variedad inmensa de editores y utilidades que se pueden usar para desarrollar, pero algo que me hacía mucha falta era una utilidad que creara sprites de imagenes para usarlas en combinación con CSS.

Por que usar sprites en páginas web? La respuesta es muy sencilla, para reducir el número de pedidos HTTP al servidor. Eso se traduce en una mejora en los tiempos de carga y se podría argumentar que en algunos casos tambien se reduce un poco el peso de la página. Básicamente todas las páginas con una cantidad grande de visitas deberían usar Sprites.

Yo estuve buscando por una aplicación para linux que me ayudara a crear sprites fácilmente pero no encontre muchas opciones, así que escribí un script en bash bastante sencillo que coge todas las imagenes en un directorio, las une y crea un archivo css con las coordenadas necesarias para cada imagen.

La base del script es el comando montage que viene con Imagemagick. Su forma de uso es muy sencilla, digamos que tenemos un directorio con las siguientes imagenes:

Si corres el comando:

[pratt@localhost ~]$ ./spritefy -o sprite.jpg

El script va a tomar todas las imágenes (jpg, gif o png) y las va a concatenar horizontalmente en un archivo nuevo llamado sprite.jpg junto con el archivo sprite.html y sprite.css.

El resultado sería esta imagen:

Este no siempre es el resultado que uno busca, quizás queremos que se haga un sprite que sea de 2 imagenes de largo y 4 de alto:

[pratt@localhost ~]$ ./spritefy -t 2x4 -o sprite.jpg

El resultado sería:

También puedes especificar el color del fondo de la imagén

[pratt@localhost ~]$ ./spritefy -t 2x4 -b red -o sprite.jpg

Y obtendriamos:

Hay otro par de opciones con las que puedes jugar! para mas información usa el comando spritefy sin ningun atributo.

Disfrútalo! - Click aquí para descargar Spritefy

Comentarios