Los sprites son muy usados hoy en día en el diseño web, en este post explicaremos lo básico sobre ellos .

Sprites

Los sprites son imágenes destinadas a ahorrarte tiempo de carga a la hora de llamar las imágenes en tu sitio web. Cada sprite está compuesto por un conjunto de pequeñas imágenes.
Tomemos como ejemplo el portal de videos Youtube, el cual tiene muchos iconos e imágenes(más de 20).
En lugar de llamar a cada uno, se llama una única imagen que contenga todas esas pequeñas imágenes.

La imagen completa que usa Youtube es mucho más grande y vertical, si quieren hacerse una idea este es la imagen.

Como usar un sprite

Ahora que ya vimos de que se trata, veamos como usarlos. Para ello tomaremos la misma imagen que coloqué arriba.
Una forma muy común de usar iconos es que estos cambien después de realizada una acción. Para el ejemplo, haremos que ese cambio sea al colocar el ratón sobre la imagen.

Estas dos imágenes son el resultado de usar el sprite de arriba como imagen única pero utilizando algo de magia CSS.
El código en su forma más simple, quedaría así:
HTML

CSS

Explicando el CSS

Como habrán podido notar en el código, solamente llamamos una imagen: el sprite y la utilizamos en los enlaces. Pero cambiando la posición de la imagen, para esto debemos conocer la posición inicial de cada “icono” o imagen a mostrar.
Para mostrar cada imagen, tenemos en cuenta:

• Posicion “X” “Y” donde empieza la imagen(background-position).
• Si los números son negativos en X, nos dirigimos hacia la derecha del sprite, si son positivos; hacia la izquierda.
• Si los números son negativos en Y, nos dirigimos hacia la abajo en el sprite, si son positivos; hacia arriba.
• Por regla general, los números se toman negativos y se empieza desde la esquina superior izquierda del sprite.
• Debemos darle un tamaño con width y height para que sólo se muestre la imagen deseada.

Como crear un Sprite

Para crear un sprite se puede usar un editor de imágenes para unir todos los iconos en una sola imagen. Pero deben de anotar la posición y tamaño de cada imagen para usarlos después en el CSS.
Sin embargo existen herramientas para crear sprites online, como CssSprites.

Con esta herramienta sólo tienes que seleccionar las imágenes desde tu computador y luego darle a “Generate” para crear el sprite.

• Recuerda usar imágenes pequeñas y ligeras.
• Usa hasta 19 imágenes.
• Si quieres usar más de 19, crear otro grupo de 19 y luego únelos.

Como resultado te dará la imagen e incluso te indicará la posición(background-position) donde empieza cada imagen. Realmente es una gran ayuda.

Porqué es bueno usar sprites?

Usar sprites es mayormente recomendado para sitios con muchas visitas donde tengas muchas imágenes o iconos y los uses repetidamente por todo tu sitio web.
El tener todas tus imágenes en sprites hace que llamen un conjunto de imágenes en un sólo archivo(una sola imagen). Si por ejemplo tienes 10 iconos, para cargarlos necesitas hacer 10 peticiones al servidor y cada una demora un tiempo, lo cual hace esperar más tiempo al visitante.
Si tienes más de 10 es peor. Con un sprite acortas a una sola petición y reduces el tiempo de carga .

Finalmente

Espero les sirva a los que necesiten y lo usen cuando sea necesario. Tampoco es una obligación usarlos en toda web y recuerden que no sirve de mucho si las imágenes que quieren convertir en un sprite son muy grandes o pesadas.

Términos relacionados:

que son los sprites que es un sprite imagen usar sprites css como usar sprites css sprites youtube que son los sprites? colocar sprite css que es un sprite en diseño web posicionar sprites css recomendable usar sprite css