Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

CSS Sprites

30 Dic 2010 por Jose

Comentarios: 0

Google sprite

Un factor fundamental que debemos tener en cuenta a la hora de programar una página web es la velocidad de carga. Siempre que trabajamos con el código tenemos en cuenta este factor, pero hoy comentaré una técnica que nos permitirá reducir este tiempo con el uso de CSS. Es una idea que tiene su origen en los antiguos videojuegos y en la necesidad de utilizar mejores gráficos sin que esto afectara al rendimiento, conocida como Master Grid.

La Master Grid no es más que una imagen que contiene todas las imágenes necesarias para la ejecución del juego, y para mostrar la imagen deseada sólo habría que alterar la posición del fondo; así la página web solamente necesita pedir al servidor una imagen.

Esta técnica, llamada CSS Sprites, consiste en eso, en cargar una imagen que contiene a varias imágenes mas pequeñas separadas entre si, evitando así descargarlas individualmente reduciendo el número de peticiones HTTP al servidor y por tanto la velocidad de carga de la página web.

Aunque pudiéramos pensar que es lo mismo descargar 5 imágenes de 10Kb que una de 50Kb, esto no es verdad puesto que deberemos tener en cuenta que para cada imagen necesitaremos una conexión nueva que además llevará asociadas una serie de cabeceras que también aumentarán el tamaño de las peticiones.

¿Cómo utilizarlo?

Simplemente usando las propiedades de background-image y background-position cargaremos la imagen contenedora y posteriormente nos moveremos sobre ésta para mostrar únicamente la zona deseada.

Veamos algún ejemplo: nuestra imagen base será ésta:

Imagen contenedora

Y posteriormente mostraremos cada uno de los botones que usaríamos por separado.

El código HTML sería:

<div class="edit_item"></div>
<div class="delete_item"></div>
<div class="create_item"></div>

Mientras que el CSS

.edit_item {background: transparent url(sprites_icon.png) left top no-repeat; height: 46px; width: 40px;}
.delete_item {background: transparent url(sprites_icon.png) -40px top no-repeat; height: 46px; width: 36px;}
.create_item {background: transparent url(sprites_icon.png) -76px top no-repeat; height: 46px; width: 39px;}

Otro caso donde podemos aplicar esto sería en los casos donde cambiamos la imagen de fondo al hacer un hover. Esta técnica es muy útil para evitar el parpadeo que se produce al cambiar las imágenes, mejorando así el aspecto de la página.

<a href="#" id="change_icon" class="change_icon"></a>

#change_icon {background: transparent url(sprites_icon.png) -76px top no-repeat; display: block; height: 46px; width: 39px;}
#change_icon:hover {background-position: -40px top; width: 36px;}

Páginas como XING, Amazon, Yahoo o Google, utilizan esta técnica para muchas de sus imágenes de fondo.

Generadores de sprites

Tal vez la tarea más pesada de todo esto sea la creación de la imagen contenedora, para esto existen diversas páginas web que facilitan el trabajo, tanto a la hora de juntar las imágenes como para localizar su posición. Aquí dejo algunas de ellas, aunque hay muchas más.

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?