Esta herramienta te permite automatizar el proceso de generación de sprites CSS. Simplemente dale un fichero ZIP que contenga 2 o más imágenes (GIF, PNG o JPG) y se generará una imagen sprite con las correspondientes reglas CSS para localizar y mostrar cada imagen que lo compone.

Opciones

La herramienta tiene muchas opciones que puedes configurar para modificar las características de la imagen sprite y CSS generados para que se adapten mejor a las especificaciones de tu sitio web. Estas opciones se detallan a continuación:

Redimensionar imágenes originales

Ancho y Alto
Si el ancho o el alto se informan por debajo del 100% de las imágenes originales, se reducirán en ese tamaño antes de ser copiadas en la imagen destino. La herramienta no te dejará especificar un valor mayor de 100% como incremento porque daría como resultado una reducción en la calidad de la imagen. El valor por defecto de ancho y alto es 100% (no redimensionar).

Imágenes duplicadas

Ignorar imágenes duplicadas
Las imágenes duplicadas se copian en la imagen sprite y se crean reglas CSS independientes para cada duplicado.
Quitar imágenes duplicadas pero combinar las clases en una sola
La herramienta compara un MD5 de los contenidos de cada imagen para determinar con precisión cuáles son duplicados exactos de otras que están en el ZIP. Estos duplicados son descartados y las reglas CSS de estos duplicados se combinan en una única regla CSS.

Opciones del Sprite generado

Desplazamiento horizontal
Determina el espacio horizontal entre filas de imágenes en la imagen generada. Este valor necesita ser lo bastante grande como para solucionar el bug de repetición de fondo de Safari. Sugerimos dejar el valor predeterminado.
Desplazamiento vertical
Determina el espacio vertical entre imágenes consecutivas. Debe ser lo bastante grande para tener en cuenta el incremento del tamaño de la fuente de letra del usuario. Generalmente recomendamos que diseñes tu sitio de manera que los visitantes puedan incrementar el doble su fuente de letra antes de que la siguiente imagen de fondo en la secuencia se haga visible.
Color de fondo
Establece el color del fondo para la imagen generada. Este campo necesita un valor de color de 6 dígitos hexadecimales. Si se deja en blanco and el formato de salida esta puesto como GIF o PNG, el color de fondo será transparente.
Formato del fichero Sprite
Soporta GIF, PNG y JPG. GIF y PNG pueden tener fondos transparentes. El valor por defecto es PNG.

Opciones del CSS generado

Prefijo CSS
Se le asigna un prefijo con el texto indicado a cada regla de posición CSS generada. Se permite anteponer ID y selectores de clase. Se permiten los siguientes caracteres - a-z, 0-9, _, -, # y .
Plantilla de nombre de fichero
Se puede utilizar cualquier expresión regular válida. Indica paréntesis alrededor de la sección de la plantilla en el punto que deseas que sea extraído de cada nombre de fichero de las imágenes. Estos serán usados como base para los nombres de las clases que indican el posicionamiento.
Prefijo de Clase
El texto indicado será puesto antes de cada nombre de clase generado. Es particularmente importante especificarlo cuando los nombres de clase generados pueden empezar con un número como resultado de un selector no válido (recomendación definida por W3C). Son permitidos los caracteres - a-z, 0-9, _ and -. El prefijo indicado no puede empezar por un número.
Sufijo CSS
El texto indicado será añadido al final de cada regla CSS. El "Sufijo CSS" permite los mismos caracteres que el "Prefijo de Clase".