Sprites CSS

Noticias - Diseño

Ésta técnica, que fue originalmente utilizada por los creadores de videojuegos, básicamente consiste en utilizar una sóla imagen que contenga varias imágenes y haciendo uso de la propiedad CSS background-position se muestre cada imagen individualmente. Es una sencilla y efectiva forma de ahorrar ancho de banda, reduciendo las peticiones HTTP al servidor, el peso de la página y el tiempo de carga.

 

 

Aplicación

En lugar de guardar cada imagen por separado todas las imágenes comunes al sitio se compondrán en un único archivo, por ejemplo botones, iconos, fondos, etc.

Un ejemplo de CSS Sprite lo encontramos en la web de Google.

Google sprite

Lo primero que hemos de hacer es generar el archivo de imagen que contenga todas nuestras imagenes a usar. Se puede hacer forma manual con un editor gráfico o bien usar herramientas online como CSS Sprite Generator. Lo recomendable es usar el formato PNG para estos archivos aunque también podemos usar GIF para ganar compatibilidad a costa de la calidad.

Acto seguido deberemos definir que elementos usaran las imágenes mediante CSS y la propiedad background y el parámetro url(), por ejemplo:

.ok,
.save,
.error {
background: url('../images/icons.png') no-repeat;
}

De este modo la imagen se aplica a diferentes clases. Ahora, suponiendo que cada una usará una imagen representativa, moveremos la imagen global usando la propiedad background-position.

.ok {
background-position: 0 0;
}
.save {
background-position: 0 -20px;
}
.error {
background-position: 0 -40px;
}

Con el código mencionado la imagen se desplaza 20px verticalmente para cada elemento y así muestra su imagen representativa. Otro ejemplo muy usado es para botones con rollhover:

.boton{
background: url('../images/boton.png') no-repeat;
}
.boton:hover{
background-position: 0 20px;
}

Con estas nociones básicas la utilidad del Sprite solo estará limitada por la imaginación del diseñador.

Aparte de los editores gráficos para crear un sprite o la herramienta mencionada anteriormente, existe una herramienta web muy completa que nos ayudará a optimizar webs ya existentes de manera seniclla: SpriteMe.

Ambas herramientas mencionadas en este artículo nos darán como resultado una imagen sprite para nuestro sitio así como el código CSS para usarlas correctamente.




Comentarios permitidos sólo a usuarios registrados
Acceso
Registro

Noticias ISIT Diseño
*/ ?>