Cómo crear Sprites CSS de forma rápida y muy sencilla

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:

Seleccionar imágenes

En nuestro ejemplo usaremos las siguientes imágenes:

Iconos

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:

Opciones

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:

Código CSS y HTML

¿Mejor verlo con un ejemplo completo, no?:

Ejemplo con sprites CSS

Al cargar la página en nuestro navegador web veremos que las imágenes quedan una debajo de la otra:

Página con sprites

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:

Otro ejemplo

Una vez guardados los cambios, al recargar la página los veríamos distribuidos del siguiente modo:

Página con sprites

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.

> SUSCRÍBETE <

Acepto la Política de Privacidad

Los datos recopilados tienen como finalidad el envío de novedades sobre contenidos formativos propios (tanto en modalidad gratuita como de pago) y de terceros en calidad de afiliado, así como también noticias, información y otros contenidos relacionados con la informática y las nuevas tecnologías, siendo responsable de dicha información Francisco Javier Medina Medina (propietario de InformaticaPC.com).
Al obtener tu consentimiento los datos serán almacenados en el proveedor de E-Mail marketing MailRelay. Por supuesto, en cualquier momento podrás hacer uso de tus derechos para acceder, rectificar, limitar y suprimir dichos datos.