CSSprites vs. SpriteGen

Primero comenzaré con una breve reseña de las aplicaciones on-line que generan tiras de imágenes en Sprites fácilmente. Si en este punto alguien se encuentra perdido, puede leer el artículo de A list apart que mencioné en el post anterior o bien leer este otro artículo con un enfoque más práctico en WebSite Optimization. Esperaba encontrar infinidad de aplicaciones javascript para calcular las coordenadas internas necesarias para situar las imágenes, pero sólo encontré dos aplicaciones citadas una y otra vez en infinidad de páginas web:

Spritegen
CSS Sprites Alfa

Así que como veis, amigos, más que encontrar información diversa muchas veces encontramos meros loros repetidores en la red de redes.

Para evitar ser un loro yo también, a continuación haré una comparativa entre ambas aplicaciones, puesto que después de probar las dos tuve que verme forzada a quedarme sólo con una.

La primera aplicación de la que hablaré será Spritegen, que como podéis ver en la captura de pantalla que os muestro a continuación parece muy útil por la cantidad de opciones de configuración que tiene:



En comparación con ella tras un examen preliminar, CSS Sprites Alfa saldría claramente perdiendo:



Pues bien amigos, esto no es así. SpriteGen tiene una serie de bugs importantes que a su creador le convendría mejorar. Por ejemplo, si a la hora de meter una serie de imágenes png le pedimos que nos las cambie a gif, les añadirá alrededor un borde sólido negro de 1px que aumentará el tamaño de vuestra imagen. Y si usáis como yo la técnica de sprites para optimizar el peso de los pequeños iconos de menú de vuestro sitio, 1px extra es importante y os hará sentiros realmente desorientados a la hora de intentar ubicar de nuevo vuestros iconos en la página, teniendo que recalcular de nuevo las coordenadas que el programa os dio. Por no mencionar el borde en sí mismo, que podría romper completamente la coherencia estética de vuestra página.

Por lo demás, si no cambiáis el formato nativo de PNG a GIF, no tendréis problemas mayores y podréis aprovechar las fantásticas opciones de configuración que ofrece este programa. Os recomiendo que juguéis con ellas. Podéis por ejemplo utilizar los iconos de www.freeiconsweb.com para hacer estas pruebas. Yo tomé unos GIF's como ejemplo y se veían bastante bien al pasarlos a PNG.

Ambos programan disponen las imágenes por orden alfabético en la tira, por lo que sería conveniente que ya tuvierais previamente ordenadas las imágenes por orden alfabético en vuestra hoja de estilo para evitar liaros. Spritegen nos dispone la información sin ayudas gráficas, dándonos el nombre del archivo original y a continuación sus coordenadas. En cambio, Sprites Alfa prescinde del nombre del archivo original, pero nos lo representa gráficamente. Eso ya va en gustos. Personalmente creo que si vas a manejar sesenta o setenta iconos es mejor tener la referencia del nombre, pero la solución que nos presenta Sprites Alfa puede ser más amigable e intuitiva cuando tenemos menos imágenes. Puedes ver la interfaz de ambos aquí:




Como podéis ver, cada aplicación tiene sus ventajas y sus inconvenientes. Cada uno puede utilizarlas como más le convenga. Yo he intentado exponer aquí las características de cada una. En la entrega siguiente hablaré de algunos aspectos que hay que tener en cuenta a la hora de posicionar un sprite en CSS.

Saludos