Css sprites para mejorar el rendimiento de la web
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
No comments yet.