Buscando siempre formas de optimizar al máximo nuestras soluciones de diseño web, me tropece con un tópico bastante interesante, que aunque es una técnica antigua, nos puede ayudar a acelerar la carga de nuestro sitio web en un 10-20% cuando se trata de un sitio web que tiene que descargar muchas imagenes desde el servidor. Como un caso puntual, si un sitio web en la pagina de inicio cuenta con 8 imagenes, mas 1 hoja de estilo(.css), más un archivo externo de javascript, serian aparte de la carga del código HTML 10 conexiones adicionales al servidor web que repercutirían en la transferencia y carga del sitio web.

Al final de éste artículo nos daremos cuenta cuanto puede reducir la transferencia y carga de una página web si utilizamos la técnica de la que vamos hablar. Anteriormente mencioné que era una técnica antigua, y es porque era utilizada por los desarrolladores de juegos 2D para realizar las animaciones.

Como nos podemos dar cuenta para recrear la animación se utilizaba solo una imagen que contenia una serie de etapas que juntas formaban el movimiento. Este mismo concepto es el que vamos aplicar para la técnica de css sprite, vamos a realizar una lista con tres items y utilizaremos una imagen grande que contenga los 3 diferentes iconos que van a formar parte de cada item de la lista.

Nuestra lista desordenada(ul) sería algo como:

<ul>

  <li class="item1"></li>

  <li class="item2"></li>

  <li class="item3"></li>

</ul>

Nuestra imagen SPRITE:

Implementación de la técnica CSS Sprite

Es muy fácil poner en práctica ésta tecnica, lo que debemos utilizar es la propiedad background-position:x y;  de CSS, y seleccionar la posicion horizontal(x) y vertical(y) del sprite de acuerdo al icono que queremos llamar en nuestro item de la lista, como lo mostramos en el siguiente ejemplo del estilo a aplicar a la lista anterior:

<style type="text/css">

      <!--

      .item1, .item2, .item3 {

display: block;

height: 48px;

width: 48px;

margin: 5px;

}

li.item1 {

background-image: url(items.jpg);

background-repeat: no-repeat;

background-position: 2px 0px;

}

li.item2 {

background-image: url(items.jpg);

background-repeat: no-repeat;

background-position: -48px 0px;

}

li.item3 {

background-image: url(items.jpg);

background-repeat: no-repeat;

background-position: -95px 0px;

}

-->

</style>

Como se puede ver en el ejemplo anterior en nuestras líneas css hemos jugado con el posicionamiento horizontal del sprite para seleccionar solo la porcion del icono que necesitamos poner en el item de la lista(li).

Esta técnica es muy efectiva y podemos calcular el ahorro que podemos tener solo utilizando una imagen grande para luego partirla en porciones mas pequeña a nuestra conveniencia. Los css sprite se pueden utilizar para manejar backgrounds, iconos y cualquier otro elemento gráfico que se pueda utilizar con interfaces web.

Esperamos que le haya servido mucho este tema para ponerlo en práctica en sus proyectos y agradecemos que hagan cualquier comentario constructivo sobre el tema.