Desde hace ya un tiempo me convencí a mi mismo de que los sprites en CSS son mas que útiles.
Primero veamos que es un Sprite en CSS:

Según la Wikipedia (http://en.wikipedia.org/wiki/Sprites_(computer_graphics)):

..[Sprites] es una imagen o animación 2D o 3D integradas en una sola escena. Fueron inventados como un método para rápidamente componer imágenes juntas para juegos 2D usando Hardware especial [Hablando de maquinas de poco rendimiento y velocidad]. Dado a que la performance de las computadoras mejoraron, esta optimización se volvió innecesaria y el termino evoluciono a referirse específicamente a las imágenes 2D integradas en una sola escena. Es decir, figuras generadas por hardware especifico o solo software fueron todas referidas como Sprites. Como los gráficos 3D se volvieron mas predominante, el termino fue usado para describir la técnica por la cual imágenes planas son discretamente integradas dentro de complicadas escenas 3d….

Bien, ahora, Que tiene que ver esto con CSS? Bueno, teniendo en cuenta que en cuestiones de optimización de paginas web, el tamaño importa, y la cantidad de recursos que se usan se deben minimizar, podríamos decir que estamos en la fase de las maquinas de poco rendimiento. Porque digo esto? Porque ahorrarle al usuario que visite nuestro sitio algunos segundos es mas que importante. Y también el ahorrarnos ancho de banda en nuestros servidores.

Un ejemplo mas gráfico:

Aquí alguna data sobre ahorros en este blog, Empece con iconos optimizados y pequeños:

Las imágenes originales:

La nueva imagen combinada:

Comparación:

Entonces, que ahorre?

Ancho de banda ahorrada: 318 bytes
Ahorro en HTTP server requests (por pagina vista): 4

Multiplicá ese numero por el numero de visitantes por día, por semana, por mes, por año, y esto da como resultado en un ahorro importante, plus, la pagina carga mas rápido.

He ahí el para que.

Veamoslo así: Tenes 20 imágenes pequeñas, todas en una carpeta especial, supongamos que son iconos. Es mas simple ponerlos todos juntos, y luego jugar con el CSS para ordenarlos.
Ok, jugar no es la palabra. Es mucho mas simple!
De hecho, para aquellos que piensan que ponerse con el Fireworks o similar a pegar imagen por imagen es tedioso, les tengo una aplicación online que les puede servir. Simple y eficaz:

http://www.csssprites.com/

Hasta aquí bien, pero como lo hacemos?

1) Tenemos la imagen combinada:

2) Creamos una imagen transparente:
Una ves que tenemos el sprite, hacemos una imagen transparente de 1px por 1px. Esta imagen mas tarde nos ayudara a mostrar las imagenes del sprite.

3) Ahora vamos al CSS. Hay quienes usan otros métodos, yo por lo pronto sugiero este.
Generamos la clase con el Sprite:

.sprite { background-image: url(img/icons.gif); }
    //ahora acomodamos lo que sigue: Los tamaños; Para eso, otra clase.
	.icono {
			height: 20px;
			width: 20px;
		}
		//ahora si, los iconos;
			.avi {background-position: 0px 0px; }
			.doc {background-position: 0px -20px; }
			.txt {background-position: 0px -40px; }
			//etc;

Que es lo que hice:
Primero declaro el background. Después le doy el tamaño de la imagen. Y por ultimo lo mas “complicado”. En si lo que se hace es elegir en que posición se mostrara el background. Entonces, si cada icono es 20px por 20px, movemos el background de a -20px. Porque negativo? Porque la imagen empezará a mostrando los primeros 20px del sprite, entonces iremos “subiendo” el sprite hasta que se ubique en el lugar que queremos. A ver, aclaro, debido a la disposición del sprite que usamos como ejemplo, hablo de subir y de bajar. De estar los iconos en una disposición horizontal, nos moveremos hacia los costados, y en el caso que nuestra plantilla de sprites tenga varias columnas, nos moveremos de ambas formas, cambiando ambos parámetros del background-position.

4) Ahora el HTML:

	<img class="sprite icono avi" src="img/transparent.gif" alt="Icono Avi" />
	<img class="sprite icono doc" src="img/transparent.gif" alt="Icono Doc" />

Bien, explico esta parte: Lo que hice fue “unir” las clases dentro del tag img. Y de esta forma combinarlas para mostrar lo que deseamos.

Limitaciones de este método:

Para que un sprite CSS funcione, debe tener un alto (height), ancho (width) y un background-position. Si no se define el alto y el ancho del elemento, se vera todo el sprite en esa imagen. Casi obvio pero es bueno mencionarlo por si algún desprevenido.

Sprites y las grandes compañias

Compañías mundialmente conocidas como AOL, AMAZON, GOOGLE, YAHOO, y muchas otras, conscientes de su trafico diario también optaron por esta técnica en sus portales. Algunos a grandes rasgos, es decir con muchos sprites, otros con algunas cosas mas especificas.

Google.com

Yahoo.com

Como se puede ver, Yahoo usa un sprite mas grande que comprende casi todos los layouts. Por otro lado Google usa un sprite mas pequeño. Cave decir que el diseño de Google es sabido mucho mas liviano, menos cargado de imágenes, por lo que se podría decir que en ese solo sprite tiene todas las imágenes del sitio entero.

Además con sprites…

Los sprites no solo te permiten ahorrar tiempo de proceso en el servidor y descarga mas rápidas. Sino que además te permite utilizar los rollovers en botones, divs, etc. Como? Bueno, mas adelante haré un post con algunos trucos, pero para no dejarlos con la intriga les muestro un ejemplo simple:

Para el menú de este blog, utilize un sprite horizontal para toda la barra que abre el menú.

Y para hacerlo andar utilize algunas “pseudo-clases” (también saldrá post sobre pseudo-clases mas adelante) de CSS:

Gráficamente este es el código html:

<div id="menu_huge">
<div id="menu_content">
 
</div>
 
</div>

Y ahora con el código CSS hice lo siguiente:

//aqui configuro la posicion normal del div
#menu_button{
          position: relative;
          height: 30px;
          background: url(img/menu.png) no-repeat 0px top;
          cursor: pointer;
}
/* aqui el evento/pseudo-clase HOVER;
exactamente como en los links*/
#menu_button:hover{
            background: url(img/menu.png) no-repeat -800px top;
}

Y así de simple ya esta funcionando el botón con un rollover simple.

Luego veremos que usando JQUERY estos efectos también pueden quedar mas vistosos.
Espero le sirva a alguien.

Este ultimo ejemplo pertenece al viejo diseño de este blog.