Cómo usar CSS sprites para acelerar el rendimiento del blog

Los CSS sprites son imágenes las cuales se encuentran almacenadas en una sóla, con esta técnica podemos usar una imagen de fondo para varios segmentos sin la necesidad de recurrir a usar varias imágenes, lo cual afecta positivamente la carga del blog.

Para explicarlo mejor, he creado un sprite el cual contiene 6 imágenes dentro de una:

Con esta única imagen lograré crear 6 fondos para distintas cosas, veamos un ejemplo con los sprites funcionando:

Como es posible apreciar, he usado una sóla imagen para crear varios fondos.

¿Cómo usar CSS sprites?

Para ello, es necesario definir una imagen que contenga varias dentro de la misma, además necesitaremos definir las coordenadas, todo esto lo podemos hacer con el siguiente código:

background:url(URL-IMAGEN) -10px -20px no-repeat;

Explicación del código anterior:

• El valor -10px corresponde a la alineación horizontal.


• El valor -20px corresponde a la alineación vertical.


• El atributo no-repeat define si la imagen se repetirá o no.

Importante: Los sprites trabajan con valores negativos.

Ahora que vimos el código procederé a mostrar un ejemplo, para ello utilizaré la imagen de Dribbble:

Ahora corresponde tomar las coordenadas de la imagen en píxeles:

background:url(URL-IMAGEN) -48px -48px no-repeat;

La imagen está a -48px en ambos sentidos, ya que tanto el espacio superior como de la izquierda son de 48px.

El resultado:

Ejercitando:

Usaremos algún elemento al que deseemos asignarle un sprite, en mi caso crearé un contenedor con el nombre ''social-icon'':

<div id="social-icon">
</div>

Ahora crearé la síntaxis correspondiente a la hoja de estilos:

#social-icon {
width:48px; /*ancho del contenedor*/
height:48px; /*altura del contenedor*/
background:url(IMAGEN) -74px -28px no-repeat;
}

Este codigo deberá ser pegado antes de la siguiente sección en la plantilla:

]]></b:skin>

Importante:

• No es necesario usar los sprites en la declaración background, también se puede hacer en otra línea de la siguiente forma:

background-position: -74px -28px;

• Recuerda que puedes hacer lo mismo que con backgrounds normales (Los mismos atributos, posiciones, efectos, etc.), lo único que difiere es que usamos sólo una imagen.