Utilizar CSS sprites para reducir el tiempo de carga de tu página

Seguro que has oído hablar de los CSS Sprites. Si es así apuesto a que los utilizas en tus páginas web, y si no, es el momento de empezar a hacerlo y te voy a dar unas cuantas razones para ello. Los CSS sprites es una técnica que se empezó a utilizar por los desarrolladores de videojuegos para disminuir el tiempo de carga y cuyo resultado es una imagen que contiene un conjunto de imágenes para ser utilizadas dentro de un sitio web. ¡Qué lío!, ¿no? 🙂 Como siempre, con un caso práctico todo resulta más sencillo.

Supongamos que estamos diseñando un sitio en cuyo pie de página vamos a crear varios enlaces a diferentes redes sociales, que serán Facebook, Twitter, Vimeo y Youtube, por ejemplo. Para ello, necesitaríamos en primer lugar los iconos de cada una de estas redes sociales y además el que lo sustituya cuando el ratón pase por encima (hover), esto conforma un total de ocho iconos en una sola imagen. ¿Para qué?

  • Se minimizan las llamadas HTTP al servidor ya que en vez de llamar a ocho imágenes para que se carguen en la página solo se hará una llamada.
  • Reducimos el tiempo de carga de nuestra página y en consecuencia mejoramos el rendimiento del sitio web.

Ahora veamos el proceso:

css-sprites

Abrimos un nuevo documento en Photoshop y colocamos todos los iconos necesarios para crear nuestro sprite. En este caso, cada uno de los iconos mide 27 x 27 píxeles. Calcula un tamaño de documento para ajustar cada uno de ellos y utiliza las guías para ayudarte recortando bien la imagen ajustándola a la esquina superior izquierda. Guardamos el documento en PNG y empezamos con lo que más nos gusta, ¡el código! 🙂

Creamos una lista desordenada para crear los enlaces.

<ul>
    <li id="facebook"><a href="#" title="#"></a></li>
    <li id="twitter"><a href="#" title="#"></a></li>
    <li id="vimeo"><a href="#" title="#"></a></li>
    <li id="youtube"><a href="#" title="#"></a></li>
</ul>

Para hacer la llamada a las imágenes utilizamos la propiedades background-image y background-position de la siguiente manera:

ul li {
	width: 35px;
	height: 35px;
	margin-right: 25px;
	background-image: url('../images/rrss.png');
	background-repeat: no-repeat;
	float: left;
}

ul li a {
	width: 27px;
	height: 27px;
	float: left;
}

ul li#facebook {
	background-position: 0 0;
}

ul li#facebook:hover {
	background-position: 0 -49px;
}

ul li#twitter {
	background-position: -50px 0;
}

ul li#twitter:hover {
	background-position: -50px -49px;
}

ul li#vimeo {
	background-position: -100px 0;
}

ul li#vimeo:hover {
	background-position: -100px -49px;
}

ul li#youtube {
	background-position: -150px 0;
}

ul li#youtube:hover {
	background-position: -150px -49px;
}

Aquí vemos que desde la etiqueta <li> ya estamos llamando al sprite como imagen, pero es en cada uno de los <li> específicos (id : #facebook, #twitter, #vimeo y #youtube) donde le damos la posición correcta, tanto a la original como al hover.

Nota: Para indicar la posición de los iconos en la imagen mide desde la esquina superior izquierda y en dirección a la derecha y hacia abajo. Como habrás observado se indica en negativo.

background-position

Así, en

ul li#vimeo:hover {
	background-position: -100px -49px;
}

Estamos asignando un valor de -100px a la derecha y -49px hacia abajo.  

Utilizar CSS Sprites es una técnica muy sencilla y solo aporta ventajas así que te animo a empezar desde ya a utilizarla. Si Google lo utiliza, ¿cómo no lo vamos a hacerlo nosotros? 🙂 Fíjate en el sprite que utiliza Google en su página de inicio, www.google.es. ¡Podemos crearlo tan complejo como queramos! Y para seguir aprendiendo, aquí te dejo algunos enlaces que no debes dejar de leer. ¡Ánimo y hasta el próximo post!

1 comentario en “Utilizar CSS sprites para reducir el tiempo de carga de tu página”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *