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.
[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="services-group">
<i class="icn-web"></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*="icn-"]{
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.
