Utilización de Sprites

En esta oportunidad vamos a hablar de la utilización de sprites, una técnica que aunque no es muy nueva, resulta bastante útil a la hora de reducir el número de peticiones y el tiempo de carga de nuestra página web.

Estos son definidos en CSS, como un conjunto de imágenes diferentes agrupadas todas ellas en una misma imagen. Un ejemplo de ello sería:

Como es posible observar, en la imagen mostrada tenemos 3 iconos, tomando como premisa que para cargar una imagen en la página web el tiempo empleado es de 0.2 segundos, si se cargaran los 3 íconos por separado el tiempo de carga de la web incrementaría 3 veces ese valor. Es por ello, que los sprites resultan tan útiles.

Para crear un sprite se puede hacer uso de algún programa de diseño como Gimp o Photoshop, o simplemente utilizar alguna herramienta online, existen varias que proporcionan este servicio. Una vez generado el Sprite, la manera de usarlo en nuestra web sería la siguiente:

1. Crear la clase CSS, que haga referencia a la imagen que constituye nuestro sprite. En la misma, valiéndonos de los atributos de posición, indicaremos que elemento mostrar. Además también podemos definir el ancho y alto del mismo.

.icn-web{
  width:50px;
  height:40px;
  background: url(../img/services-icons.png) 0 0 no-repeat; 
}

2. Hacer uso de nuestra clase justo en el lugar dónde deseamos mostrar el icono.

<div class=&quot;services-group&quot;>
   <i class=&quot;icn-web&quot;></i>
   <h4>Servicios Web</h4>
</div>

Una forma eficiente de definir todos los iconos, sin necesidad de repetir código CSS para cada uno sería de esta manera:

1. Se define una clase global haciendo uso del selector *, dónde se indica que todos los elementos que empiecen con nuestro prefijo seleccionado tengan como fondo nuestro sprite. Conjuntamente, podemos definir otros estilos que se deseen agregar como márgenes o paddings, y suponiendo que todos los iconos tengan el mismo tamaño, también podemos definir ancho y alto por ejemplo:

[class*="icn-"]{
  width:50px;
  height:40px;
  margin-top: 10px;
  background: url(../img/services-icons.png) no-repeat; 
}

2. Posteriormente se definen clases que posean el prefijo anterior, donde en cada una se indica la posición del icono a mostrar.

.icn-web{
  background-position: 0 0; 
}
.icn-app{ 
   background-position: -50px 0;
}
.icn-design{ 
   background-position: -100px 0;
}

Y eso es todo, de ahora en adelante al usar varios iconos personalizados en un sitio web, ya es posible incluirlos en una única imagen, haciendo uso de sprites.