En este serie de tutoriales sobre CSS (un total de 2 partes) conoceremos los orígenes de la técnica de sprites para CSS “CSS Sprites” y comentaremos las ventajas de su utilización. Finalmente abordaremos su uso con un ejemplo práctico, en el cual recrearemos el funcionamiento del menú superior horizontal de la web oficial de Apple.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Este tutorial forma parte de una serie

¿Qué son y de dónde vienen los CSS Sprites?

Origen de los Sprites

Los orígenes del término “sprite” están ligados a los videojuegos de ordenador, fueron popularizados por Jay Miner y se trataba de imágenes (mapa de bits en concreto) dibujados en la pantalla de ordenador por hardware gráfico especializado.

A medida que los juegos iban creciendo tanto en complejidad de cálculo como de gráficos, los desarrolladores necesitaban nuevas técnicas para aprovechar la potencia finita de las máquinas existentes para impedir que el fluir del juego se ralentizase. Es entonces cuando surge una gran solución para el apartado gráfico: la Master Grid (red principal). Aquí tenéis un ejemplo (del videojuego Paper Mario):

Paper Mario Sprites

La Master Grid no era más que una gran imagen de fondo que contenía todos los sprites que se utilizarían en el juego. De esta forma, alterando la posición de fondo en la imagen mostraban las imágenes deseadas en todo momento, habiendo cargado únicamente una única imagen.

Uso y aparición de los Sprites en la Web: CSS Sprites

El tiempo ha ido pasando y no es hasta principios del año 2000 cuando los sprites “vuelven a la vida” y se presentan como una alternativa a los menús engorrosos hechos a base de javascript. Todo esto se debe a que el uso del CSS se empieza a popularizar y resultaba perfecto para su implementación.

Ya en el año 2004, Dave Shea sugiere en este artículo una simple aproximación a los CSS Sprites basados en las mismas técnicas que habían empleado los videojuegos antiguos, basado en una Master Grid (única imagen contenedora de todas las imágenes).

La aparición y popularización del CSS han favorecido al aumento del uso de los CSS-Sprites. Mediante el uso de una imagen “Master Grid” podemos agrupar todas las imágenes en una sóla.

Utilizando la propiedad CSS background-position se podría alterar la posición de la imagen principal con el fin de mostrar la región deseada, exactamente igual que pasaba en los videojuegos.

Aquí tenéis varias muestras de cómo páginas web importantes utilizan los CSS Sprites:

Youtube CSS Sprites

XING CSS Sprites

Google CSS Sprites

Como podéis ver, sean grandes o pequeñas en dimensión, todas van en una misma imagen. Veamos por qué prefieren usar una imagen grande en dimensión y en tamaño en lugar de múltiples imágenes pequeñas.

Comprendiendo las ventajas que nos aportan los CSS Sprites en una web

Como ya comentamos anteriormente en la introducción, una de las principales ventajas del uso de los CSS Sprites es el hecho de tener todas las imágenes de nuestro diseño web en una única imagen.

Esto a priori puede no decirnos mucho, incluso habrá gente que piense que es más complicado maquetar utilizando el background-position que con imágenes independientes, pero en realidad, son muchas las ventajas que nos aportan, tanto en rendimiento como en estética.

Favorecer al aspecto visual de nuestras aplicaciones web

¿Qué tendrá que ver el tener imágenes agrupadas en una imagen respecto a tenerlas de forma independiente en el aspecto visual? Pues mucho: Evitamos el tiempo de espera que se genera cuando una imagen está siendo sustituída por otra en el CSS.

Un claro ejemplo de esto son los menús de navegación de muchas webs, en los que se carga una imagen distinta al pasar por encima el cursor del ratón. Al no estar previamente cargada, se produce un tiempo de espera y el usuario no nota el efecto al pasar el cursor por encima.

Aquí tenéis una muestra de las imágenes utilizadas para el menú de la web Dragon Interactive:

Menu Dragon Interactive CSS Sprites

Este problema que os comento ocurrirá siempre y cuando el usuario no haya visitado la web anteriormente, ya que en ese caso tendría la imagen en caché, por lo que realmente no se estaría cargando de nuevo y no notaría dicho efecto. Podréis comprobarlo vosotros mismos con este ejemplo sacado de css-tricks.

Mejorar el rendimiento de nuestras aplicaciones web

Para todos aquellos que no estéis muy familiarizados con la optimización entorno a las aplicaciones web, es importante que recordéis siempre una cosa: cuantas menos HTTP requests (peticiones HTTP) se generen en la carga de una página, mayor será la velocidad de carga de la misma.

Quizás empecéis a intuír por donde van los tiros… pero sino, lo vemos rápidamente. Recordemos:

  • Los CSS Sprites permiten agrupar múltiples imágenes en una sóla.
  • Cuantas menos consultas HTTP requiera una página, menor será el tiempo de carga.

Por lo tanto, utilizando los CSS Sprites estaremos reduciendo el número de imágenes a cargar, es decir, estaremos reduciendo el número de peticiones HTTP (HTTP requests), por lo que nuestras páginas cargarán mucho más rápido, además de ofrecernos ventajas a nivel visual (recordad el ejemplo anterior del menú).

Reduciendo el número de peticiones HTTP al servidor reduciremos drásticamente los tiempos de carga de nuestra web. Esto lo podemos conseguir reduciendo el número de imágenes, mediante el uso de los CSS Sprites.

Comprobemos todo lo aprendido con un caso práctico…

Demostrando con ejemplos la teoría aprendida

Como ocurre con la mayoría de explicaciones, es importante tener ejemplos “del mundo real” donde se demuestren todas estas ventajas mencionadas. Para el aspecto visual habíamos comentado el efecto extraño al pasar el ratón por encima en los menús, pero… ¿qué pasa con la optimización?

Veamos el ejemplo que comenta Chris Coyier en su blog css-tricks.

Inicialmente tiene un menú con 5 elementos, cada cual con su imagen de “efecto al pasar el cursor por encima”, por tanto son un total de 10 imágenes independientes, es decir 10 peticiones HTTP (click en la imagen para acceder al ejemplo):

Ejemplo sin utilizar CSS Sprites

Todas estas imágenes hacen un total de: 10 HTTP requests y 20.5 KB en tamaño.

Veamos qué ocurre si utilizásemos CSS Sprites (click en la imagen para acceder al ejemplo):

Ejemplo utilizando CSS Sprites

Pasaríamos de tener 10 peticiones HTTP a tener 1 sóla petición HTTP, y el tamaño total de la imagen sería de 13 KB, los números cantan por sí solos, ¿no? Más rapidez de carga, mejor aspecto visual y menor carga para el servidor.

Si bien en este ejemplo se ha dado el caso de que hemos reducido el total del tamaño al agrupar todas las imágenes en una sóla, también es cierto que la imagen final resultante puede llegar a ser bastante grande, por lo que tendremos que encontrar un punto intermedio y no tratar de generar una única imagen que esté fuera de lo común. Son casos aislados, pero está bien tenerlo en cuenta :) .

¿Qué haremos en la segunda parte?

Una vez entendido el origen y las ventajas que nos pueden aportar los CSS Sprites, abordaremos un ejemplo práctico en el cual recrearemos el menú de navegación de la web oficial de Apple para aprender a trabajar con la propiedad background-position y los CSS Sprites.

¡Nos vemos en la segunda parte!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (13 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Espero que no haya quedado demasiado pesada la introducción… pero he visto interesante el conocer un poco la esencia y origen de la técnica antes de ponernos a usarla :)

Buen comienzo. Conocida técnica, pero a veces no me gusta demasiado. Eso de tener una “super-imagen” con todas, a veces, no es del todo recomendable.

@Dani Gracias por el comentario! Qué es lo que no te gusta o en qué situaciones no la ves recomendable?

Mariajo

Pues yo llevo tiempo queriendo aprender esto pero nunca me pongo, con el tuto seguro que me animo que tenerlo explicado siempre ayuda.

Aiiii….que sería de nosotros, o mejor dicho, de vosotros (los maquetadores) sin CSS :D

Supongo que Dani Salgueiro se refiere a que no es recomendable durante el DESARROLLO de una aplicación, porque el spritesheet está supeditado a muchos posibles cambios constantes. Es una técnica más de optimización a posteriori, cuando ya está la aplicación rulando un tiempo y estás seguro de que no vas a usar más o menos sprites.

Recuerdo la pereza que te daba a ti Adri, cambiar el símbolo de prohíbido por el de la X en algunas secciones, que de hecho en Editar Perfil > Redes aún lo tenemos :D

@Javi Para nada, si se plantea y utiliza desde el inicio es cuando realmente es fácil de acomodar y utilizar. El problema es cuando tratas de modificar toda una plantilla que previamente estaba basada en sprites independientes ;)

La verdad es que tengo ganas de ver la segunda parte del tutorial, yo ya estoy manejando sprites pero a un nivel más pequeño, solo para los roll over de los enlaces y de los menús, nunca me he animado a unirlos todos en una gran “red”.

Un saludo

jens

Hey exelente la primera parte mejor la segunda parte como logran en la pagina de Dragon Interactive el desvaneciemiento de la imagen claro si lo puedes decir jejeje no sea secreto de mago gracias de verdad por la ayuda

@jens Me temo que eso va con javascript :)

Excelente artículo y muy buena explicación de la aparición de los sprittes.

increible me parecio r bacano me gusta que las personas se interesen en este tema muchas gracias me sirvio mucho

Añade Tu Comentario