Tutorial básico sobre CSS Sprite
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.
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.
¿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.
Y el código HTML que no cambiara en ninguno de los dos casos y que se podía hacer con listas 
Utilizando Firebug a continuación muestro lo que ocurría y como se desempeñaba ese código al ser descargado en el navegador.
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.
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.
-
#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;}
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.
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.
Tags: CSS
Septiembre 17th, 2009 a las 5:04
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.
Septiembre 17th, 2009 a las 5:19
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.
Septiembre 17th, 2009 a las 8:07
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
Septiembre 17th, 2009 a las 8:49
Muy bueno el tutorial. Era justo la explicación que andaba buscando.
Saludos!
Septiembre 17th, 2009 a las 22:21
Interesante, me servirá para mis tareas de “Programación Web” y próximos proyectos.
Gracias por la info.
Septiembre 18th, 2009 a las 4:10
[...] Tutorial básico sobre CSS Sprite | Kabyteswww.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/ por fmj hace pocos segundos [...]
Septiembre 18th, 2009 a las 8:26
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.
Septiembre 20th, 2009 a las 4:03
Gracias por toda la información de tu blog. Casi que no hace ni falta comprarse revistas de informática!
Octubre 14th, 2009 a las 16:14
[...] que finalicen con este tutorial el resultado es el siguiente, obviamente voy a excluir la parte del CSS sprite que ya explique [...]
Octubre 23rd, 2009 a las 7:43
[...] Read the original: Tutorial básico sobre CSS Sprite | Kabytes [...]
Noviembre 10th, 2009 a las 12:47
[...] unos meses les contaba como crear manualmente sus propios CSS Sprites, hoy y buscando otra cosa llego de casualidad al sitio SpriteMe, que como se imaginaran sirve para [...]
Noviembre 16th, 2009 a las 13:25
[...] y sobre todo la carga de las imágenes del sitio. Para esto ultimo existe una técnica llamada “CSS sprite” que intenta mediante CSS, mostrar todas la imágenes del sitio en una sola imagen unificada, de [...]
Enero 7th, 2010 a las 10:26
[...] práctica que facilita enormemente la tarea de optimización de páginas web mediante la técnica CSS sprite. La herramienta detecta todas las imágenes de fondo asignadas con CSS mediante la propiedad [...]
Enero 28th, 2010 a las 21:37
[...] Tutorial básico de CSS Sprites: un tutorial para iniciarse en el uso de esta técnica y empezar a ver sus ventajas, muy sencillo. [...]
Enero 30th, 2010 a las 12:11
[...] Tutorial básico de CSS Sprites: un tutorial para iniciarse en el uso de esta técnica y empezar a ver sus ventajas, muy sencillo. [...]
Febrero 19th, 2010 a las 10:09
[...] 1º las pequeñas imágenes que se usan repetidamente en la web deberían estar juntas en un sólo archivo de imagen y mostrarlas usando la técnica de css sprites. He buscado con G y este artículo creo que te puede ayudar a implementarlo sin muchas complicaciones. http://www.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/ [...]