La ventaja de utilizar sprites para nuestros efectos con imágenes, es que no tenemos que esperar a que las imágenes se carguen individualmente, ya que solo tendremos una imagen principal para obtener el mismo efecto.

Piensa la cantidad de descargas que tiene que efectuar el navegador para cada una de las pequeñas imágenes que normalmente utilizamos en nuestras webs. Si todas estas pequeñas descargas la disminuimos en una principal reduciremos el tiempo de descarga de la página de una manera considerable.

El ejemplo más utilizado sería los tres estados de un ratón “normal, al pasar por encima con el ratón y al presionar”. Si utilizas tres imágenes independientes el usuario l pasar el ratón por encima del botón puede experimentar un retardo al mostrar la nueva imagen porque el navegador la tiene que descargar. Pero si utilizamos sprite con CSS este efecto indeseado desaparece a la vez que optimizamos la descarga. Sigue leyendo →