Hoy os traigo una forma muy útil de trabajar con imágenes en proyectos web usando sprites y  un poco de css.

A la hora de diseñar y desarrollar una web, hay que tener en cuenta muchas cuestiones (la resolución, el dispositivo, el navegador …) y debemos ser capaces de adaptarnos a todas ellas.

Si diseñamos una web con una gran carga de imágenes, es posible que un usuario sentado en su casa con un ancho de banda grande y una pantalla con buena resolución, llegue a visualizar correctamente la web, pero … ¿qué pasa si nuestro usuario está accediendo con 3G desde un movil o tableta?.  Seguramente se aburrirá de esperar y  se nos marchará.

Vamos a usar sprites para que esto no nos vuelva a pasar.

Qué es un sprite ?

Un sprite es una colección de imagenes colocadas una detrás de otra en un único fichero.  Seguro que habéis visto sprites en el desarrollo de algun juego.  La gente que desarrolla videojuegos está muy acostumbrada a usarlos

Por ejemplo, un sprite de  Mario Bros

¿Por qué debemos usar sprites?

El uso de sprites en nuestras webs resuelve 2 problemas

• reduce el consumo de peticiones al servidor

Conseguimos reducir el número de peticiones Http al servidor ya que tenemos agrupadas todas las imágenes en un único fichero.

Imaginaos una pagina web con 15 imágenes independientes, cada una en un fichero. Para que un usuario pueda verlas correctamente, se estarán haciendo 15 peticiones al servidor. El uso de sprites nos permite realizar una única petición al servidor.

• mejora la velocidad de carga de la web

Al realizar menos peticiones al servidor, la velocidad de carga será mayor.

Podemos ver un ejemplo, de las peticiones que realiza  la web del Ayuntamiento de Santander  y el coste que esto supone.

¿Cómo lo usamos?

Vamos a crear un pequeño sprite para cargar las imágenes de un menú

<ul class="menu">
	<li class="firefox"><a href="#">Firefox</a></li>
	<li class="chrome"><a href="#">Chrome</a></li>
	<li class="explorer"><a href="#">Explorer</a></li>
	<li class="opera"><a href="#">Opera</a></li>
	<li class="safari"><a href="#">Safari</a></li>
</ul>

Asignamos la imagen a nuestro menu con la propiedad background

ul.menu li a
{ height: 50px;
  line-height: 50px;
  display: inline-block;
  padding-left: 60px;
  color: #3E789F;
  background: url("mySprite.png") no-repeat; }

Calculamos dentro de nuestro sprite a que imagen queremos acceder y se lo asignamos a los elementos de nuestra lista con la propiedad background-position

  ul.menu li.firefox a {background-position: 0 0;}
   ul.menu li.chrome a {background-position: 0 -100px;}
   ul.menu li.explorer a {background-position: 0 -200px;}
   ul.menu li.safari a {background-position: 0 -300px;}
   ul.menu li.opera a {background-position: 0 -400px;}
   ul.menu li.firefox a:hover {background-position: 0 -50px;}
   ul.menu li.chrome a:hover {background-position: 0 -150px;}
   ul.menu li.explorer a:hover {background-position: 0 -250px;}
   ul.menu li.safari a:hover {background-position: 0 -350px;}
   ul.menu li.opera a:hover {background-position: 0 -450px;}

Este sería el resultado. A partir de un sprite que agrupa 10 imágenes, hemos generado un menú con una sola petición al servidor y no 10 peticiones

Teneis el código fuente funcionando en este enlace

Demo :   Uso de sprites

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect

Buenas Prácticas, Diseño Web