CSS sprites tutorial y ventajas
Vamos a hablar de los CSS Sprites, primeramente ¿que son? pues una técnica para reducir peticiones al servidor y mejorar así la velocidad de carga de nuestro sitio.
Se utiliza normalmente para agrupar imagenes pequeñas: iconos de 16×16, logos, botones, flechas… todo el material que se repite durante la navegacion y de pequeño tamaño.
Con CSS Sprites lo que haremos será agruparlos en una sola imagen y utilizar el parametro background-position para mostrar cada imagen de forma individual.
CSS Sprite de ejemplo:
El código CSS que deberíamos utilizar sería del estilo de:
#sprite {background: #fff url(‘images/sprite.png’) no-repeat;}
.imagen_1 {background-position: -9px -153px !important;}
.imagen_2 {background-position: -9px -45px !important;}
.imagen_3 {background-position: -9px -81px !important;}
Algunas herramientas que nos facilitarán generar nuestros propios CSS Sprites:
- Mi favorita: http://wearekiss.com/spritepad
- http://css-sprit.es/
- http://spriteme.org/
- http://es.spritegen.website-performance.org/
- http://css.spritegen.com/
Por supuesto puedes hacerlo por tu propia cuenta con un poco de photoshop, contando pixels y algo de paciencia :)
Los CSS sprites son muy utiles para webs que utilizan bastantes imagenes, sobre todo de tamaño pequeño que obligan al servidor a hacer más peticiones de las necesarias. No se donde lei que las peticiones no deberían sobrepasar de 50. Utilizad firebug o el debug de chrome para verlo.
Buenos recursos. Gracias por compartir esos enlaces :)
otra tecnica muy util es incluir todos los css de nuestra página en un único archivo minimizado. compass css ayuda muchisimo en esa tarea.
los css sprites, como dijeron antes, generalmente se usan para optimizar tiempos de carga en sitios grandes cuando los servidores han llegado a los limites de ancho de banda permitidos.