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:

Sprite example | Blog itandfeel

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.

[css classname=»txt-size»]
.icn-web{
width:50px;
height:40px;
background: url(../img/services-icons.png) 0 0 no-repeat;
}
[/css]

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

[html classname=»txt-size»]
<div class=&quot;services-group&quot;>
<i class=&quot;icn-web&quot;></i>
<h4>Servicios Web</h4>
</div>
[/html]

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:

[css classname=»txt-size»]
[class*=&quot;icn-&quot;]{
width:50px;
height:40px;
margin-top: 10px;
background: url(../img/services-icons.png) no-repeat;
}
[/css]

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

[css classname=»txt-size»]
.icn-web{
background-position: 0 0;
}
.icn-app{
background-position: -50px 0;
}
.icn-design{
background-position: -100px 0;
}
[/css]

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.