Como utilizar un Sprite con CSS

Esta técnica ha sido utilizada desde hace mucho tiempo, principalmente en juegos para simular movimiento a los elementos (gráficos).

Los sprites en el desarrollo de páginas web, evita que para cada icono incorporado como imagen se haga una petición y transferencia entre cliente y servidor, es decir, si mi página tiene un conjunto de iconos para cada icono se hace una petición de transferencia de imagen, entonces con esta técnica, todas las imágenes de los íconos están en una sola imagen, de manera sólo se transfiere una sola imagen al cliente (navegador), evitando así un sinnúmero de peticiones y transferencias para cada icono de la página web.

Una primera opción es crear las imagen con los íconos en una sola linea vertical, como se muestra en al siguiente imagen:
css-sprites-vertical
esta distribución vertical es la forma más sencilla de implementar porque solo nos preocupamos por el alto entre cada gráfico, el HTML se vería así:

<p id=”l1″>Las calculadores del siglo pasado</p>
<p id=”l2″>Sonido desactivado</p>
<p id=”l3″>Unidad de CD/DVD</p>
<p id=”l4″>Cara con lentes</p>

El CSS de la siguiente manera:

#l1, #l2, #l3, #l4 {
    padding-left: 32px;
    height: 32px;
    line-height: 32px;
    background-image:url(‘css-sprites-vertical.gif’);
    background-repeat: no-repeat;
}
#l1 {background-position: 0px 0px;}
#l2 {background-position: 0px -32px;}
#l3 {background-position: 0px -64px;}
#l4 {background-position: 0px -96px;}

donde se declaran algunos aspectos generales, la separación del margen izquierdo (padding), el alto específico (height), la misma imagen de fondo (con la distribución vertical de los gráficos), por último la posición del background de manera estratégica que corresponde al gráfico que se quiere mostrar.

Un inconveniente al utilizar imágenes como sprites donde tienen todas las imágenes ordenadas verticalmente, es cuando son demasiadas imágenes, entonces se propone otra alternativa, la cual establece una sola imagen que contiene gráficos (imágenes) tanto vertical como horizontalmente, como lo muestra la siguiente imagen.

css-sprites

Esto tiene implicaciones, la primera es que el código HTML tiene que cambiar, es necesario hacer uso de un elemento más que servirá para delimitar el espacio vertical y horizontal del background que se mostrará, los elementos que pueden servir para trabajar esta técnica son div, p o img.

En este caso mostraré el ejemplo usando un elemento img, el código HTML quedaría de la siguiente forma:

<p id=”l5″><img src=”pixel.png” alt=”” />Las calculadores del siglo pasado</p>
<p id=”l6″><img src=”pixel.png” alt=”” />Tecla a con acento</p>
<p id=”l7″><img src=”pixel.png” alt=”” />Signo de música</p>
<p id=”l8″><img src=”pixel.png” alt=”” />gráfico de copiar</p>

La imagen pixel.png es una imagen de 1px de alto por 1px por ancho de manera que no interfiera en tapar el background del elemento web.

Para este ejemplo el CSS quedaría así:

#l5 img, #l6 img, #l7 img, #l8 img{
    height: 32px;
    width: 32px;
    background-image: url(‘css-sprites.gif’);
    background-repeat: no-repeat;
    vertical-align: middle;
}

#l5 img{background-position: 0px 0px;}
#l6 img{background-position: -32px 0px;}
#l7 img{background-position: -32px -32px;}
#l8 img{background-position: -64px -64px;}

de igual manera se define el ancho, alto del espacio del gráfico, una única imagen de fondo para el elemento img y de manera personalizada el espacio de la imagen que se mostrará.

Ahora a probar!.

Saludos

Nota: las imágenes utilizadas no son propias, son imágenes tomadas de otros sitios en internet que también las utilizan para ejemplificar el uso de sprites.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.