El uso de sprites CSS permite reducir el tiempo de carga de páginas web que contengan varias imágenes, ya que mediante esta técnica es posible agrupar las correspondientes a iconos de redes sociales, botones, elementos decorativos, etc. en una sola imagen que será la única que deba ser descargada, evitándose con ello la necesidad de realizar una petición al servidor web por cada una de ellas.
Sin embargo, la creación manual de estos sprites suele requerir de una cierta cantidad de tiempo y su elaboración resulta algo engorrosa.
Por suerte existen varias herramientas que nos facilitan esta tarea, si bien de entre las que he probado la que más me ha convencido debido a su simplicidad ha sido la pequeña aplicación web de Instant Sprite, la cual no requiere de registro previo para ser utilizada.
Su uso es bien sencillo, debiendo primeramente seleccionar las imágenes que deseamos agrupar haciendo clic en Select multiple image files:
En nuestro ejemplo usaremos las siguientes imágenes:
Una vez cargadas indicaremos el número de píxels de separación entre ellas, así como si deben agruparse en horizontal o vertical (lo más común) o bien en diagonal, además del tipo de archivo de imagen final que deseamos obtener:
Tras seleccionar dichas opciones haremos clic con el botón derecho sobre la imagen de la sección Sprite (que en este punto es una sola) y la guardaremos con el nombre de sprite.png.
A continuación copiaremos el código CSS y el HTML necesario para visualizar las imágenes individuales y lo pegaremos en nuestra página:
¿Mejor verlo con un ejemplo completo, no?:
Al cargar la página en nuestro navegador web veremos que las imágenes quedan una debajo de la otra:
Por supuesto, será posible colocar cada una de estas imágenes en la posición que deseemos de la página. En el siguiente ejemplo hemos modificado un poco el código CSS de dos de ellas para posicionarlas de forma absoluta:
Una vez guardados los cambios, al recargar la página los veríamos distribuidos del siguiente modo:
Como puedes ver, utilizando esta herramienta podrás ahorrar bastante tiempo en la generación de sprites CSS y en su inserción en nuestras páginas web.
Si necesitas aprender más sobre CSS quizás te resulte de interés nuestro tutorial.
