La técnica conocida como CSS Sprites consiste en aunar varias imágenes en una sola y mediante CSS mostrar una u otra parte de dicha imagen según nos convenga. Con esto reducimos las peticiones al servidor ya que la imagen se descarga solo una vez y se reutiliza en varios sitios de la web. Es muy fácil de aplicar y los beneficios son evidentes.

Seguramente os suene la palabra sprite al mundo de los vídeojuegos, donde se utilizan para almacenar en una misma imagen todas las partes y posibles movimientos de, por ejemplo, un personaje para después mostrarlos por separado.

sprite_ryu

Veamos un ejemplo práctico de CSS Sprites.

 

1- Creamos el sprite con varias imágenes

En este caso vamos a utilizar la siguiente “tira” de iconos sociales de la web amiga Bienvenidos a Lilliput.

socialmedia_bal

2- Definimos la estructura HTML

El código HTML podría quedar como sigue:

3- Definimos el background en CSS

En este caso definiremos la misma imagen background a todos los enlaces:

Con esto obtenemos el siguiente resultado

css_sprites_1

Como no hemos especificado una posición del background, todos los enlaces han tomado por defecto top left y, por lo tanto, nos muestran todos el mismo icono.

4- Establecemos la posición del fondo para cada clase

A cada enlace le hemos asignado una clase diferente, solo tenemos que definir una posición del fondo diferente para cada una de modo que el icono que se vea sea el que corresponde.

Si os fijáis solo cambia la componente horizontal de la posición del fondo, mientras que la vertical permanece a 0px. Esto es porque el sprite que hemos utilizado solo tenía una fila, pero podíamos haberlo configurado como hubiésemos querido, por ejemplo:

socialmedia_bal-2

En ese caso sí que habríamos tenido que jugar también con la posición del eje y:

 

Suscríbete
Lista de correo

A través de mi lista de correo te mantendré informado/a de las novedades del blog, noticias y promociones exclusivas. 100% libre de SPAM.

¡OJO! Si no has recibido el mensaje de confirmación en unos minutos, es muy probable que haya sido etiquetado como SPAM. Por favor, revisa la carpeta de correo no deseado para rescatarlo ¡Gracias!