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