UTILIZACIÓN DE SPRITES

En esta oportunidad vamos a hablar de 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; SPRITES.

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 en una sola imagen, tomando como premisa que para cargar una imagen en la página web el tiempo empleado es de 0.2 segundos, si se cargaran las 3 imágenes por separado el tiempo de carga de la web se 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.

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

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:

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

Y eso es todo, de ahora en adelante al usar varios iconos personalizados para nuestra web, ya sabemos como incluirlos en sprites.

IT&FEEL, C.A.
www.itandfeel.com
@itandfeel
Maracay, Aragua, 2110, Venezuela