Que es CSS Sprite y las mejores herramientas online para generarlos

El concepto de w3schools:

Un sprite de imagen es una colección de imágenes puestas en una sola imagen. Una pagina web con muchas imágenes puede tardar mucho tiempo en cargar y generar varias solicitudes de servidor. 

El uso de Sprites de imagen reducirá el numero de solicitudes de servidor y ahorrara ancho de banda.

Un ejemplo en imágenes:

Como el concepto anterior lo indica consiste en una colección de imágenes agrupadas en una sola, y que a través de código CSS podemos hacer ir recorriendo cada una de esas imagenes y hacer uso de las que necesites.

Un ejemplo real:

Imagen Sprite:

Código CSS:

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-Arrow {
    width: 19px;
    height: 20px;
    background-position: -5px -5px;
}

.sprite-ArrowWhite_Next {
    width: 24px;
    height: 39px;
    background-position: -34px -5px;
}

.sprite-ArrowWhite_Prev {
    width: 24px;
    height: 39px;
    background-position: -68px -5px;
}

.sprite-Arrow_Black {
    width: 26px;
    height: 22px;
    background-position: -102px -5px;
}

.sprite-Arrow_MenuUser {
    width: 35px;
    height: 12px;
    background-position: -5px -54px;
}

.sprite-Arrow_Next {
    width: 23px;
    height: 37px;
    background-position: -102px -37px;
}

.sprite-Arrow_Prev {
    width: 23px;
    height: 37px;
    background-position: -5px -84px;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -38px -84px;
}

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -78px -84px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -138px -5px;
}

.sprite-stackoverflow {
    width: 30px;
    height: 30px;
    background-position: -135px -45px;
}

.sprite-tumblr {
    width: 30px;
    height: 30px;
    background-position: -118px -85px;
}

.sprite-twitter {
    width: 30px;
    height: 30px;
    background-position: -38px -125px;
}

HTML:

<i class="sprite sprite-Arrow"></i>

<i class="sprite sprite-ArrowWhite_Next"></i>

<i class="sprite sprite-ArrowWhite_Prev"></i>

<i class="sprite sprite-Arrow_Black"></i>

<i class="sprite sprite-Arrow_MenuUser"></i>

<i class="sprite sprite-Arrow_Next"></i>

<i class="sprite sprite-Arrow_Prev"></i>

<i class="sprite sprite-github"></i>

<i class="sprite sprite-gmail"></i>

<i class="sprite sprite-linkedin"></i>

<i class="sprite sprite-stackoverflow"></i>

<i class="sprite sprite-tumblr"></i>

<i class="sprite sprite-twitter"></i>

Salida:

Herramientas para Generar Sprite:

Link: http://www.es.spritegen.website-performance.org/

La mejor herramienta que conozco para generar Imagenes Sprite, este permite que subas varias imágenes y el luego las une todas en una sola, ademas de esto el fondo es transparente y no blanco como hacen algunas otras herramientas similares, también genera CSS, HTML.

De verdad que la recomiendo ampliamente.

Link: http://instantsprite.com/

• Muy similar a la herramienta anterior, este te permite:
• Eligir el forma de la imagen a descargar PNG o GIF.
• permite descargar la imagen en los formatos mencionados o copiar el Base64.
• permite seleccionar si la secuencia de imagen es en vertical, horizontal o diagonal.