Todavía recuerdo que la primera vez que escuché hablar sobre los sprites en las imágenes fue cuando estuve estudiando el entorno de desarrollo de DIV Games Studio (un lenguaje de programación basado enteramente en el lenguaje C, nacido en un principio para la creación de juegos en MS-DOS y cuya empresa creadora fue Hammer Tecnologies, que por cierto, es española :D).
El caso es que los sprites en CSS es una técnica efectiva que nos permitirá ahorrar ancho de banda, porque son imágenes que contienen varias imágenes más pequeñas y que pueden ser visualizadas empleando diversas técnicas.
Lo que en la programación de videojuegos ahorraba tiempo para el desarrollo de las animaciones, hoy día lo empleamos en CSS para ahorrar ancho de banda y por tanto, menor número de ficheros subidos al servidor. Con ello ahorraremos además el número de peticiones “http”, reduciendo así el tiempo de carga de nuestro blog. Su técnica es bien sencilla, pero requiere tiempo para llevarlo a cabo, pero si lo tenemos claro podemos hacer un buen uso de esta técnica.
¿Cómo aplicarlo?
Solo debemos utilizar las propiedades CSS que nos permiten alterar el alto y ancho (height y width), de este modo podemos recortar una imagen que mostraremos como background, además necesitaremos modificar las propiedades de background-position para desplazarnos por la imagen original y mostrar la zona deseada.
¿Cuándo utilizar esta técnica?
Teniendo en cuenta que cada vez que alguien accede a nuestro blog para visualizarlo, en realidad se realizan peticiones http de forma individual y que por tanto la transferencia y el tiempo de carga s
Debemos de tener en cuenta que cada vez que nuestra aplicación web llama a imágenes, hojas de estilos, archivos javascripts lo que realmente estamos haciendo son peticiones HTTP que se solicitan de manera individual y aumentan la transferencia y el tiempo de carga.
Lo más usual es emplear esta técnica cuando tenemos un número elevado de usuarios, y cuando digo elevado es ELEVADO :D, es decir, más de 5000 usuarios online al día. Eso no quiere decir, que de igual forma lo puedas emplear, no tiene ningún inconveniente el hacerlo, pero como he dicho antes, requiere trabajo y esfuerzo, además de tiempo.
El único requisito es no cargar el resultado final de la imagen sprite con imágenes que superen los 10kb, ya que de otro modo podríamos cargar las cabeceras de los ficheros, algo que no nos interesa.
¿Cómo generar un CSS Sprite?
Suele ser bastante complicado por el tiempo que requiere, pero si vamos con prisas podemos emplear CSS Sprites Generator para crearlos de forma automática.
@Roberto: perdona que haya tardado en responderte Roberto, no había leído tu comentario.
Un saludo
Gracias Vera, me ha servido para conocer un poco más sobre los sprites, tenía mis dudas al respecto sobre lo que eran ese tipo de imágenes y como se generaban.
Saludos