En algunas entradas anteriores hemos hablado sobre las imágenes en sprites y lo ventajoso que resulta tener estas imágenes en una Web, sea del tipo que sea.
Recordemos que los Sprites CSS son una forma de optimizar el uso de imágenes en nuestro sitio Web, una técnica que requiere de un archivo en el cual se va a contener todas las imágenes que mayormente se visualizan en nuestro sitio. De esta forma, las llamadas al servidor (queries) en lugar de ser varias, se resumen a tan solo una. Recordemos también que al disponer de una imagen conteniendo el resto de imágenes, para indicar y mostrar una de ellas, es necesario hacerlo con el atributo background-position.
Bien es cierto, que el empleo de esta técnica requiere de bastante práctica, por medio de la cual se irá cogiendo experiencia, pues su empleo necesita desarrollar algunos cálculos que determinen la posición de cada imagen.
Siendo este el punto más fuerte a tratar, hemos localizado una herramienta online denominada CSS Sprites Generator que nos facilitará la tarea para estilizar lo mejor posible nuestro sitio.
Solo se requieren unos sencillos pasos:
- Subir las imágenes que se necesitan para crear el sprite.
- Descargar el fichero PNG generado.
- Seguir las instrucciones dadas por CSS Sprites Generator.
Como se puede apreciar, solo hay que seleccionar los ficheros, en caso de necesitar subir más, solo debemos hacer clic en “Need More?”.
A continuación, sin requerir modificar opciones, pulsamos el botón “Generate” y el resultado será el siguiente:
La imagen generada sprite, podrá ser descargada para luego alojarla en nuestro servidor. Según el resultado obtenido en el ejemplo, CSS Sprites Generator nos genera de forma automática el CSS que debemos copiar en nuestro fichero de estilos de nuestra platilla.
Lo más práctico de todo es que ya no tendremos que estar contando los píxeles para saber desde que punto hasta que punto llega cada imagen, de este modo, por ejemplo si quisiéramos visualizar el botón facebook de la imagen, solo tendríamos que incluir el atributo background-position: 0px –160px; en el identificador correspondiente de nuestro fichero CSS y desde el cual será visualizado, sin olvidarnos de indicar el background:url(“ruta-de-la-imagen-srpite”).
