Universal AJAX Live Search

Boost de velocidad para tus páginas web: CSS Sprites

Un sitio web con gran cantidad de imágenes resulta llamativo y dinámico, pero para que los visitantes puedan tener una experiencia óptima al visitarlo, es importante que el tiempo de carga del mismo no exceda de unos cuantos segundos, y a su vez de la paciencia de las personas, lo cual nos lleva al uso de técnicas de optimización web y una de ellas es el uso de CSS sprites.

La técnica de CSS Sprites consiste en agrupar varias o incluso todas las imágenes o iconos que nuestro sitio usa como base de su diseño en un solo archivo de imagen para después, mediante la propiedad background-position de CSS, mostrar en cada parte del sitio sólo la imagen concreta que nos interese de ese archivo.

De esta forma se reducen dramáticamente las solicitudes que se hacen al servidor, ya que con descargar una sola imagen tendremos todos los elementos gráficos necesarios en nuestro sitio, y no como normalmente sucede, cuando cada imagen es solicitada por separado en una numerosa cadena de descargas simultáneas, esto se traduce en velocidad de carga y menor consumo de recursos de la red.

El uso de CSS sprites es muy sencillo, y para demostrarlo haremos un sencillo Menú con iconos, todo se trata de manejar las clases y los identificadores adecuados en donde necesitemos utilizar nuestras imágenes.

Menú con CSS sprites

Los sprites se pueden general principalmente de dos maneras:

a) Usando un programa de diseño gráfico (como Photoshop, Gimp, etc.).

b) Usando herramientas on-line (sprite generators) que a través de páginas web nos permiten subir las imágenes y nos devuelven el sprite creado.

Puedes visitar:

Entre otros, o usar el programa de tu preferencia.

El archivo Sprite que usaremos tiene la siguiente estructura, en cada espacio cuadrado se ubicará una imagen:

Exportaremos este rectángulo como una imagen png para ser usado como se ve a continuación:

Paso 1

Este será nuestro menú en HTML, en el que <span> será el espacio donde se muestre el icono, adicionalmente cada <span> tiene un ID especifico que nos servirá mas adelante:

<ul id="nav">
<li><span id="icon-1"></span><a href="index.html">Home</a></li>
<li><span id="icon-2"></span><a href="#">Privacidad</a></li>
<li><span id="icon-3"></span><a href="#">Ubicaciones</a></li>
<li><span id="icon-4"></span><a href="#">Favoritos</a></li>
</ul> 

 

En primer lugar tendremos que asignar un estilo general al contenedor de nuestro menú, en la que indiquemos la imagen de fondo (sprite) que contiene todos los iconos a mostrar.

#nav li span {

background-image: url('img/MenuSprites.png');
float:left;
width: 35px;
height: 35px;

}

 

Una vez hecho esto necesitaremos crear una regla CSS para cada elemento que tenga un icono y al que le asignaremos un identificador único o una clase para indicarle la posición del icono que queremos mostrar, de este modo le estaremos asignando algo asi como las coordenadas del icono que necesitamos tomando como referencia nuestro archivo de sprites.

La propiedad background-position se basa en coordenadas x y, en cada icono este valor va a variar para coincidir con la posición de la siguiente imagen, en este ejemplo a cada una le sumaremos los 30 px de ancho del icono + los 5px de separación entre cada uno al valor de x y el de y se deja en ceros pues todos tienen la misma separación respecto al alto de la imagen.

/*Estilos para cada icono*/

#nav li span #icon-1 {
  background-position: 0px 0px;
}

#nav li span#icon-2 {
background-position: 40px 0px;
}

#nav li span#icon-3 {
  background-position: 75px 0px;
}

#nav li span#icon-4 {
  background-position: 110px 0px;
}

 

De esta forma tendremos una clase que contendrá la referencia al archivo de imagen con todos los iconos como imagen de fondo y un identificador para cada uno que definirá qué porción de esta imagen de fondo vamos a mostrar.

 

Como has visto, el uso de CSS sprites puede ahorrar una gran cantidad de recursos al optimizar la velocidad de carga de tu página y una vez comprendido como funciona es muy fácil aplicarlo a cualquier cantidad y tamaño de imágenes.

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega