Los "sprites" CSS no son nuevos. De hecho, son una sólida técnica que ha logrado llegar a ser de uso común en el desarrollo web. Desde luego, los sprites CSS no son siempre necesarios, pero en alguna situación pueden aportar ventajas y mejoras significativas – especialmente si quiere reducir la carga de su servidor. Y si no había oído antes respecto a sprites CSS, es buen tiempo para aprender lo son (sprites = objeto móvil, mapa de bits que representa a algún objeto), cómo trabajan, qué instrumentos pueden ayudar a crearlos y como utilizar la técnica en sus proyectos.

¿Qué son los sprites CSS?

El término “sprite” (similar al “espíritu,” “goblin,” o “duende”) tiene sus orígenes en los gráficos de computadora, en los cuales se describía un objeto gráfico mezclado con una escena de bidimensional o tridimensional a través de una tarjeta gráfica. Debido al incremento en la complejidad de los juegos video, surgió la necesidad de encontrar técnicas inteligentes que permitieran ocuparse de detallar los objetos gráficos de un juego sin quitarle fluidez. Una de las técnicas desarrolladas utilizó sprites incrustados en una rejilla maestra (véase la imagen de abajo), que posteriormente se obtenía según lo necesitado a través de código que mapeaba la posición de cada gráfico individual y selectivamente lo pintaba en la pantalla.



El tiempo pasó y a principios del 2000, cuando los diseñadores web progresistas comenzaron a buscar alternativas a los menús basados en Javascript con efectos (onMouseOver y onMouseOut), los sprites se vieron renacer en el desarrollo web. Con CSS, la implementación simple de sprites era posible, y mucho más fácil y clara que con su precursor Javascript.

En 2004, Dave Shea sugirió una aproximación basada en CSS para los sprites CSSbasada en la práctica de esa legendaria técnica de video juegos. En este caso, múltiples imágenes usadas a través de un sitio web serían combinadas en la (así llamada) imagen maestra. Para mostrar una sola imagen de la imagen maestra, era necesario utilizar la propiedad background-position de CSS, definiendo la posición exacta de la imagen a mostrar. Cualquier efecto hover, active o focus sería puesto en ejecución usando la propiedad background-position de CSS para el elemento mostrado.

Cuando se carga la página, no imágenes individuales una por una (ni imágenes individuales para el estado "hover"), sino carga inmediatamente la imagen maestra entera. Esto no parecía una mejora significativa pero lo era: la principal desventaja del efecto onMouse implementado con Javascript es la doble petición HTTP (uno para cada imagem), que toma tiempo y crea un efecto desagradable de oscilación en las imágenes. Por otro lado, ya que la imagen principal se carga con la página entera (solamente una vez) con los sprites CSS, no se necesitan peticiones adicionales HTTP para realizar efectos hover, active o focus (porque la imagen ya está cargada), y no hay efectos de oscilación.

En consecuencia: Los sprites CSS reducen peticiones HTTP el tiempo de carga de las páginas. Ésta es la razón principal por la que los sprites CSS son de uso común en los sitios web con la alto tráfico, donde millones de impresiones de una página necesitarían “solamente” una minúscula fracción de lo que de otra manera serían 30.000.000. De ahí que, los sprites CSS sean de uso común, particularmente para navegación (en efectos Hover), iconos y botones.

¿Dónde se utiliza el CSS Sprites?

Los sprites CSS se pueden utilizar en varias formas. Los sitios web grandes pueden combinar múltiples imágenes independientes en una sola, creando “pedazos" claramente separados de las imágenes maestras - el propósito sería conservar el diseño mantenible y fácil de actualizar. El gran espacio vacío que se deja frecuentemente entre las imágenes es para cerciorarse de que el redimensionamiento del texto en el navegador no causa a efectos secundarios tales como el despliegue de imágenes múltiples en el fondo. De hecho, los sprites trabajan bien generalmente bajo un diseño basado en pixeles, pero son difíciles de utilizar en diseños basados en em's (1px = 0.0625em) debido a la restricción de la propiedad background-position. Esencialmente, la estructura que toman los sprites depende de la compensación entre la capacidad de mantenimiento y reducicción de carga en el servidor; así que, varía dependiendo del proyecto en que usted trabaje.

En la nota original podrán verse algunos inspiradores ejemplos (y otros no tanto).

Fuente: digg / smashingmagazine

Ver nota original en inglés.

Notas relacionadas:

Sprites CSS. Mejora el rendimiento de tu web. tomado de Pixelovers