Sprites CSS

Una de las formas de mejorar el rendimiento de tu sitio web es el uso de sprites, una técnica CSS que aprovecha una sola imagen para mostrar múltiples imágenes a partir de ella dentro del sitio.

Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen.

Un ejemplo de un mapa de imagen es el siguiente:

Iconos gratis obtenidos desde pictoico.

Quienes usan más los sprites CSS son aquellas webs que tienen demasiadas consultas al minuto, y que buscan reducir en lo posible el tráfico generado paraque sus servidores no colapsen. Google usa sprite, y lo usa muy bien:

Creando un Sprite CSS

Lo que haremos con el CSS será "recortar" esta imagen, como se ilustra en las siguientes figuras.

Debemos saber la coordenada de la esquina superior izquierda del icono a utilizar más su anchura y altura correspondiente para utilizarla luego en el CSS. Se puede obtener con programas gráficos como Photoshop (F8 para abrir la información) o el mismísmo Paint (en la barra de estado).

Las propiedades del CSS que utilizaremos en conjunto de un documento XHTML semántico y accesible para el sprite son:

background
display
width
height
overflow
line-height

Comenzemos con el Sprite CSS. Vamos a hacer un menú como el siguiente.

<ul id="menu">
<li><a href="/#enlace1" title="Portada, título del enlace 1">Portada</a></li>
<li><a href="/#enlace2" title="Carrito de compra, título del enlace 2">Carrito</a></li>
<li><a href="/#enlace3" title="Buscar, título del enlace 3">Buscar</a></li>
<li><a href="/#enlace4" title="Guardar, título del enlace 4">Guardar</a></li>
<li><a href="/#enlace5" title="Eliminar, título del enlace 5">Eliminar</a></li>
</ul>

En la hoja de estilo, cada enlace se convertirá en imagen teniendo como fondo el mapa de imagen, junto con su anchura y altura correspondiente. Se puede apreciar la propiedad float para hacer que cada enlace flote frente al anterior y así quede un menu horizontal. También las propiedades overflow y line-height para hacer desaparecer el texto. El menu tendrá la misma altura y color de fondo de los enlaces para hacerlo más interesante y largo.

ul#menu {
    height:63px;
    background-color:#212121;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background: url('sprite.png') no-repeat;
    display: block;
    width: 63px;
    height: 63px;
    float: left;
    overflow: hidden;
    line-height: 10em;
}

Y a continuación, viene lo que se llama sprite, el mapa de las coordenadas para cada uno de los enlaces segun su clase asignada. Algunos enlaces cambiarán según el estado :hover (cuando el mouse esta por encima del enlace) o :active (cuando se presiona). Las coordenadas deben ir en negativo porque la imagen de fondo debe retroceder para posicionarse donde se quiere (para entenderlo y acostumbrarse es mejor experimentarlo).

ul#menu li a.portada {
    background-position: 0 0;
}


ul#menu li a.carrito {
    background-position: 0 -64px;
}
ul#menu li a.carrito:hover {
    background-position: -64px -64px;
}


ul#menu li a.buscar {
    background-position: -192px 0;
}


ul#menu li a.guardar {
    background-position: -128px -128px;
}
ul#menu li a.guardar:hover {
    background-position: -64px -128px;
}
ul#menu li a.guardar:active {
    background-position: 0 -128px;
}


ul#menu li a.eliminar {
    background-position: -256px 0;
}
ul#menu li a.eliminar:hover {
    background-position: -256px -64px;
}

Podemos hacer lo que se nos ocurra. Podemos por ejemplo tener todas las imagenes del sitio en una sola y se gastarán menos recursos. Además, cargará mucho más rápido.

¿Olvidé decir que funciona para todos los navegadores?

Descarga el ejemplo.