Una única imagen (sprite) para todo un menú interactivo en CSS

Si uno desea crear un menú con varios botones que cambien su imagen al pasar el mouse por encima, normalmente crea varias imágenes, dos por cada estado de cada botón. Esto ralentiza el sitio y genera muchas peticiones al servidor (HTTP Requests).

Sabías que Google, por ejemplo, extrae todas las imágenes de su sitio de un único archivo? Esto es posible gracias a los sprites, una especie de grilla de imágenes que nació con los videojuegos. Conoce cómo aplicar sprites en tu sitio para ganar velocidad de descarga, espacio y peticiones en el servidor y mucho más.

Usando Sprites con CSS en tu sitio web

¿Qué es un sprite exactamente?

Los Sprites nacieron con los viejos videojuegos como los de Nintendo. Como había que ahorrar memoria, en vez de usar muchas imágenes por cada movimiento o personaje del juego, se cargaba una única vez una grilla compuesta por todas las imágenes y luego, mediante el programa, se llamaba a cada sector de la grilla por separado.

Las ventajas de esto son muchas, pero todas tienen que ver con ganar velocidad y ahorrar memoria. Los Sprites se cargan una sóla vez, se ahorra peso porque varias imágenes pequeñas ocupan más que una sóla conformada por ellas, se evita repetir los datos incrustados en cada archivo (ej: la cabecera de un png será igual en cada archivo separado, bien se puede unificar en un único elemento), etc.

Imagina la cantidad de peticiones que realiza el sitio de Google a su servidor. Google utiliza un sólo sprite para todas las imágenes de su sitio. Fíjate:

¿Increíble, no? Pero tú también puedes usar esto en tu sitio, gracias a CSS:

Generando un sprite para tu sitio

Primero que nada debes crear una barra para tu menú. Como ejemplo puedes ver esta:

Luego de tenerla terminada guárdala como nav.jpg y crea una copia con los cambios que deseas para cuando el mouse pase por encima. Por ejemplo:

El siguiente paso es unir ambas imágenes debiendo estar nav.jpg arriba y su copia debajo. Es importante que estén bien alineadas y posean el mismo tamaño ambas.  El resultado debería verse similar a esto:

Y con esta única imagen ya podremos realizar todo el menú. Ahora lo que queda es aplicar el código.

El CSS

Primero debemos crear una lista con HTML siendo cada elemento de esta una de las secciones de la imagen. En nuestro ejemplo seria así:

<ul id=”nav-example”>
<li id=”nav-example-01″><a href=”#”><span>Blog</span></a></li>
<li id=”nav-example-02″><a href=”#”><span>Portfolio</span></a></li>
<li id=”nav-example-03″><a href=”#”><span>Resume</span></a></li>
<li id=”nav-example-04″><a href=”#”><span>Contact</span></a></li>
</ul>

El span con texto dentro de él es tan sólo para que los buscadores puedan leerlo y tenerlo en cuenta a la hora de listar tu sitio. Obviamente debes cambiar el # dentro de la etiqueta <a> por la dirección web a la que ese botón hace referencia.

Por último utilizaremos el siguiente código CSS:

#nav-example {
background:url(”nav.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}

En esta regla debes cambiar nav.jpg por la ruta donde se encuentra tu imagen. Y ajustar el ancho y la altura según tu imagen. La altura debe ser la del archivo nav.jpg original, no el que contiene las dos barras.

#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:40px;
display:block;
}

Aquí también debes colocar la altura igual a la que utilizaste antes:

#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-01 {
width: 98px;
}

Aquí se ajusta el ancho del primero de los botones, en nuestro ejemplo el ancho de Blog es de 98 píxeles. Lo mismo se debe realizar con los siguientes tres. Si esto no lo tienes bien calculado desde antes puedes jugar un poco hasta encontrar los tamaños que más te gusten.

#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}
#nav-example-01 a:hover {background:url(”nav.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(”nav jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(”nav.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(”nav.jpg”) -352px -40px no-repeat; }

En estas cuatro líneas debes ajustar los dos números que se encuentran en cada una de las mismas  El segundo es muy simple, se trata de nuevo de la misma altura que ya hemos ajustado antes. Sin embargo el primero es un poco más complicado. Se obtiene de la suma de todos los anchos de los botones anteriores.
Así al no haber nada antes del primero irá 0px, en el segundo obviamente irá el ancho del primero ya que es el único anterior, luego 229 es 98 más 131 y 352 es 229 más 123.

Luego de esto ya habremos terminado. El trabajo puede ser muy engorroso la primera vez, pero luego de hacerlo una vez descubrirás que es bastante fácil y como ya dije antes tiene grandes ventajas.

Fuente: Style Meltdown