Tutorial básico sobre CSS Sprite

Pablo

La primera vez en mi vida que escuche hablar sobre las CSS Sprite fue hace casi 5 años cuando Dave Shea escribió un interesante articulo en Alistapart, desde ese momento siempre quise hacer una serie de simples pruebas para publicar en este blog mostrando las ventajas de utilizar esta practica, además de mostrar lo sencillo que es aplicarla.

¿Que son los CSS Sprites?

Simplemente se trata de una antigua técnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma individual.

¿No se entiendo muy bien? No hay problema, vamos con una empresa que seguramente conoces y que los utiliza desde hace mucho  tiempo, Google. Si realizas cualquier búsqueda en Google veras que se muestran varias imágenes, por ejemplo en la paginación de resultados, lo que muchos no se dan cuenta es que detrás de todas estas imágenes se encuentra SOLO UN ARCHIVO y no un archivo por imagen.

Sprite Google

Esto acelera significativamente la descarga, y todos sabemos lo rápido que es Google 😀

En la imagen remarco al menos dos imágenes para que vean donde se ubican en el archivo.

ejemplo google

¿Y las ventajas?

La utilización de la técnica de los CSS Sprites tiene principalmente dos ventajas: por un lado tendremos más velocidad en la descarga y renderizado de nuestro sitio web por parte de los navegadores y por otro lado tendremos una significativa reducción de consumo de recursos del servidor.

Dos claras ventajas y que son mas que suficientes para que amerite aprender un poquito mas sobre esta técnica.

Me convenciste, ¿Como empezamos?

Empecemos con un ejemplo practico. Al final de este articulo podrán ver una lista de enlaces para enviar este post a los distintos sitios sociales, antes de hacer este articulo estaba cargando una imagen distinta por cada enlace, de la siguiente forma.

Imagenes sin css sprites

Y el código HTML que  no cambiara en ninguno de los dos casos y que se podía hacer con listas 😛

[HTML]

[/HTML]

Utilizando Firebug a continuación muestro lo que ocurría y como se desempeñaba ese código al ser descargado en el navegador.

rendimiento sin sprites

Como podrán ver en los resultados cada imagen realiza una nueva petición al servidor, por lo que mostrar ese bloque de enlaces termina siendo un pedido de ni más ni menos que 5 solicitudes al server.

Ahora utilizando la técnica de los CSS Sprites

Lo primero que necesitamos es generar un único archivo que contenga las 5 imágenes, en este caso los iconos sociales, y aunque lo podemos hacer de forma manual yo para estos casos lo que recomiendo es utilizar el sitio csssprites que por un lado nos pide que subamos las imágenes y por otro lado nos genera la imagen resultado junto con el código CSS necesario para mostrarlas de forma individual. En mi caso el archivo que me genero es el siguiente.

sprite social

En mi caso elegí PNG pero el sitio además de esta extensión también nos permite descargar el archivo en formato GIF. En la imagen se puede ver que todas las imágenes quedan con cierto orden, esto esta diseñado principalmente para que luego su posicionamiento con la propiedad background-position sea mas simple.

Ahora solo falta colocar el nuevo CSS, el código HTML es idéntico y no tiene absolutamente ninguna diferencia con el anterior que no utilizaba los sprites.

[CSS]
#social a, #social a:hover { padding: 2px 2px 2px 25px; margin-left:15px; background: #fff url(‘images/sprite-social.png’) no-repeat}
.twitter {background-position: -9px -153px !important;}
.facebook {background-position: -9px -45px !important;}
.meneame {background-position: -9px -81px !important;}
.delicious {background-position: -9px -9px !important;}
.stumbleupon {background-position: -9px -117px !important;}
[/CSS]

En el código CSS esta todo el asunto, al utilizar una sola  imagen lo único que tenemos que hacer es ir jugando con la posición de fondo para mostrar cada imagen de forma individual. Es bastante fácil de aplicar, quizás comprenderlo lleva un poquito de mas tiempo al principio pero cuando lo hagan la primera vez entenderán de inmediato como funciona.

Ahora lo mejor los resultados de Firebug con la versión que utiliza los sprites.

rendimiento con sprites

Una sola petición al servidor y menos de la mitad del tiempo. Vale la pena utilizar esta técnica 😀

Obviamente en mi caso solo hice esto con solo una parte del diseño del blog, pero se puede hacer algo mucho mas avanzado, hay casos como el de Google que todo el esquema de un sitio puede estar prácticamente en una sola imagen. Las posibilidades son casi infinitas, me gusto mucho por ejemplo los botones con rollover que hizo Manz.

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios

  1. Gabriel Cuesta Responder

    Esta técnica a mí con Internet Explorer 6 me ha dado a veces problemas, especialmente cuando tengo que utilizar PNGs con transparencia y usar algún script para parchearlos.

    Pero para el resto de navegadores va ha ido siempre genial.

  2. alsanan Responder

    El SpriteMe de Steve Souders es genial. Permite automatizar los sprites y generar las imágenes y el CSS a partir de cualquier página existente ahorrando una cantidad de tiempo ingente.

  3. Nico Responder

    Muy buen post Pablo. Conocía la técnica pero siempre me dió pereza usarla 😀 Lo tendré en cuenta para la próxima.

    IE 6 da problemas con los pngs transparentes, pero en mi caso ya no diseño para esa versión ya que IE está en la versión 8. Igual hay formas de hacerlo, como se ve en este post:

    http://vagabundia.blogspot.com/2008/01/los-png-en-internet-explorer.html

    Saludos

  4. Carlos Responder

    Muy bueno el tutorial. Era justo la explicación que andaba buscando.

    Saludos!

  5. Jonateo Responder

    Interesante, me servirá para mis tareas de “Programación Web” y próximos proyectos.
    Gracias por la info.

  6. dannyfilth Responder

    gracias, estoy diseñando un sitio web donde utilice el jquery Cycle Plugin y en todos, TODOS! (a execcion de IEx) las imágenes se cargan de inmediato, en el mencionado IEx se ven primero la lista de imágenes grandes y cuando se cargan todas se acoplan a la funcionalidad del plugin, que raro k ocurra esto en tan buen navegador!!!, fui sarcástico! Lool, en fin, hoy mismo me pongo a pasar las imágenes a una sola, a ver como me va.
    saludos desde caracas Venezuela.

  7. Paloma Responder

    Gracias por toda la información de tu blog. Casi que no hace ni falta comprarse revistas de informática!

  8. Jose Tapia Responder

    Muchisimas gracias por el post esta dema claro y directo asi da gusto aprender 😛

  9. Diego Brunt Responder

    gracias muy util

  10. nudier mena Responder

    muchas gracias por la informacion ,me sirvio mucho

  11. certificados_de_seguridad Responder

    estoy iniciando con el tema de los sprites, son muy útiles cuando manejas una web con muchos íconos y estilos gráficos. sólo lleva un tiempo acostumbrarse al background-position y correr muchas pruebas para comprobar el resultado. gracias por la guía.

  12. VANE Responder

    QUE INTERESANTE

  13. sebastian Responder

    Genial, me sonaba bastante el nombre de los sprites, pero hoy me ha quedado mas claro, gracias, seguire profundizando!!

  14. Polat Olu Responder

    puede utilizar Web Master Sprite para generar CSS sprites de forma automática y sencilla.

    Disponible en la Mac App Store: http://itunes.apple.com/us/app/sprite-master-web/id496684718

    Detalles: http://www.mobinodo.com / spritemasterweb

  15. Isabel Responder

    Debo reemplazar el css generado por el que usaba anteriormente para esas imágenes? o solo hay que agregarlo?

  16. Yarinca Responder

    Muy bueno el tutorial al verdad aunque por lo que veo ahora estas usando el addthis que los js que usan hacen una de peticiones increibles y hasta 550kb ocupan algunos …

  17. Javier Responder

    Hola, ¿se puede hacer de alguna manera sin css?
    Es que tengo una web en joomla y no se como hacerlo en el menú de arriba.

    • Pablo Responder

      Solamente utilizando CSS. No es complicado, debes editar al menos una de las hojas de estilo de tu joomla y agregar las clases necesarias. Animo que no es difícil! 😀

  18. Andrés Responder

    Saludos
    Tengo la misma pregunta de Isabel, ¿se agrega el css? y ya o ¿hay que quitar el código que antes tenían las imágenes?

  19. Israel Responder

    Hay otra gran ventaja a parte de la velocidad de descarga de la página (menos peticiones al servidor) y renderizado de la imagen (con la primera impresión ya se carga en caché) y es el peso del archivo en (kb) sobretodo en archivos GIF donde el tamaño del archivo viene determinado sobretodo por la paleta de colores.

    Si tenemos 10 imágenes y las guardamos de manera independiente, la suma total de todas estas imágenes en Kb, será mayor que si las ponemos todas juntas en un mismo ‘sprite’. Todas las imágenes juntas en un mismo marco, muy posiblemente muchas de estas imágenes van a compartir colores de la paleta por lo que se reduce el tamaño.

  20. Francisco Javier Responder

    Muy interesante, lo usare para mejorar partes de mi blog

  21. Daniel Moscol Responder

    Tengo demasiadas peticiones en mi sitio web, es hora de deshacerme de muchas !. Gracias voy a probarlo !, también tengo un blog wordpress

Realizar un comentario