Como yo ¿Usas Sprites y no lo sabías? por lo menos con ese nombre

Sprites es una técnica front de optimización de sitios basada en la fusión de imágenes en una sola para posteriormente ser separadas mediante CSS.

• Reduce principalmente el peso de las páginas
• Disminuye de manera considerable las peticiones HTTP
• Minimiza sustancialmente la cantidad de imágenes y
• Optimiza el peso total de los archivos externos al HTML consumiendo menos ancho de banda.

Dejo la presentación de la charla

Escribo un poco de:

• Contexto de la charla
• Origen del término Sprites
• Sprites en la Web
• Mejor buscar por Sprites CSS
• Links de las principales referencias, artículos, tutoriales, screencast y generadores de Sprites

Un poco de contexto

Cuando Juan Carlos me invitó a dar una charla me comentó que se trataba de Sprites y francamente no me sonó para nada el término ¿Sprites? como la bebida, pero cuando me dijo más menos de que se trataba me di cuenta que hace años venía aplicándolo y luego recordé que hace una par de años conocí el término Sprites, el que claramente olvidé. Finalmente armando la clase me di cuenta que tuve la suerte de conocer esta técnica desde que la web la heredó.

Origen de Sprites

Es una técnica que surge con los video juegos, hasta el término suena rancio, estoy hablando de 1980, de la mano de los Atari800 y llega a su máxima expresión en 1992 con Mortal Combat. Juego que revoluciona con una gráfica basada en fotos de actores reales, digitalizadas y aplicadas con esta técnica. Realmente revolucionó lo conocido hasta entonces. Entonces aparece la tecnología 3D que deja la técnica Sprites obsoleta, por lo menos  en lo que a Video Juegos se refiere.

Formalmente son agrupaciones de imágenes generalmente sobre fondo transparente que se muestran por partes de forma enmascarada y pueden llegar a representar movimientos, mediante reemplazos de otras secciones de la máscara.

Sprites en la WEB

La web hereda Sprites por el afán de optimización del Checo Petr Stanicek [1] quien buscando una alternativa a los botones implementados con reemplazo de imágenes mediante Javascript aplica, sin referenciar el término sprites, la técnica utilizando CSS. Disminuyendo considerablemente el peso de las páginas, la cantidad de archivos y por consiguiente los HTTP request y el consumo de ancho de banda.

Solo un año después Dave Shea [2] publica un post bajo el título de CSS Sprites – Image Slicing’s Kiss of Death. Hace referencia a Petr y se convierte en la mayor referencia en la web sobre Sprites con ejemplos muy bien explicados y disponibles para su estudio.

Se encuentra más directamente por Sprites CSS

Bajo estos términos “CSS Sprites” encuentras información relacionada a la Web específicamente al Front (HTML/CSS/Imagenes) pues si buscas solo Sprites llegarás principalmente a los VideoJuegos.

Pero acá están los links que considero relevantes

Principales referentes

[1] http://wellstyled.com/css-nopreload-rollovers.html
[2] http://www.alistapart.com/articles/sprites/

Artículos/Tutoriales/Listas/ScreenCast

http://www.tufuncion.com/css-sprites/
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites2/
http://www.csslessons.com/
http://adamducker.com/blog/7/use-css-sprites/
http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/
http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://www.romancortes.com/blog/la-tecnica-de-sprites-css/
http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://borkweb.com/story/faster-page-loads-with-image-concatenation/
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/
http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Generadores de Sprites/CSS/Imagenes

http://spriteme.org/
http://css-sprit.es/
http://printf.ru/spritr/
http://www.floweringmind.com/sprite-creator/index.php
http://drupal.org/project/sprites
http://www.csssprites.com/
http://es.spritegen.website-performance.org/
http://csssprites.org/

Otros

http://es.wikipedia.org/wiki/Sprite_(videojuegos)