Optimicemos nuestra web con CSS Sprites
Hola a todos de nuevo, esta vez os quiero hablar de los Sprites y de su uso en la programación web. No hace mucho que los conozco pero he descubierto ventajas que hacen que ya los haya utilizado más de una vez como programador web.
¿Qué son los Sprites?
Empecemos dando una definición informal de lo que son. Antiguamente, los Sprites eran utilizados para crear pequeñas animaciones en nuestros antecesores Spectrum, MSX,… Una animación estaba formada por varios fotogramas (Sprites). Estos se mostraban uno detrás de otro, provocando así el efecto de animación.
Para que os hagáis una idea, os invito a visitar esta web: http://sdb.drshnaps.com/ Contiene una base de datos de Sprites de diferentes consolas y juegos. Aquí tenéis un ejemplo:
Pues bien, en nuestro caso, aplicándolos a la web, no tienen exactamente la misma utilidad, sino que los aprovecharemos para otro tipo de funciones.
Aplicación en la web
Los Sprites CSS tienen una utilidad distinta. Consiste exactamente en agrupar varias imágenes de nuestro sitio web en una misma imagen, accediendo a ellas y mostrándolas individualmente, utilizando la propiedad background-position de CSS.
Ventajas
Utilizando esta técnica conseguimos disminuir considerablemente el número de peticiones http de nuestra web. No es lo mismo, en tiempo, hacer 5 peticiones para conseguir 5 imágenes, que en una sola petición traer una sola imagen que contiene las 5.
Para que veáis de qué hablo, podéis ver un ejemplo. Realizar cualquier búsqueda en Google, por ejemplo «n54studio» 😉 Ahora tenéis que iros a la parte inferior de la página, donde Google pagina los resultados. Pinchar con el botón derecho del ratón sobre la “G” de la palabra Google, y seleccionar “Ver Imagen de Fondo”, en Firefox. Si utilizáis IE tendréis que guardar vuestra imagen seleccionando “Guardar fondo como…”
Ahora veis a lo que me refiero, ¿verdad? Agrupamos las diferentes imágenes en una sola, ahorrando así peticiones al servidor.
Veamos un caso práctico
En nuestro caso práctico vamos a crear un menú horizontal el cual utilizara Sprites CSS para establecer nuestras imágenes de fondo.
Empecemos…
Lo primero de todo, será crear nuestra imagen, la cual contendrá todas las opciones. Vamos a crear, utilizando Photoshop, un archivo de 400x100px. Este archivo contendrá 8 imágenes de 100×50. Utilizando la propiedad background-position de CSS, mostraremos en nuestro navegador la imagen que nos interese. Aconsejamos el uso de las guías de Photoshop, ya que si no cuadramos bien las imágenes luego saldrán descentradas. Quedaría algo así…
Veamos ahora nuestro código HTML.
<div> <div id="elm1"><a href="#"></a></div> <div id="elm2"><a href="#"></a></div> <div id="elm3"><a href="#"></a></div> <div id="elm4"><a href="#"></a></div> </div>
Por último, el estilo asociado…
.elemento{
width:100px;
height:50px;
float:left;
}
.elemento a{
display:block;
width:100%;
height:100%;
background:url('logos.gif') top left no-repeat;
}
#elm1 a{background-position:0 0;}
#elm2 a{background-position:-100px 0;}
#elm3 a{background-position:-200px 0;}
#elm4 a{background-position:-300px 0;}#elm1 a:hover{background-position:0 -50px;}
#elm2 a:hover{background-position:-100px -50px;}
#elm3 a:hover{background-position:-200px -50px;}
#elm4 a:hover{background-position:-300px -50px;}
Entendiendo un poco el código, lo que hacemos es decirle donde posicionar el fondo de imagen. Mostrará el tamaño del div, en este caso 100×50. Podemos jugar con esas medidas para ajustar nuestro menú. ¿Que conseguimos? Que con una sola petición http podamos mostrar todo nuestro menú, de lo contrario, deberíamos de hacer 8 peticiones, siendo la suma de los tamaños de estas imágenes, menor que esta única imagen cargada.
Podeis utilizar complementos para Firefox como Firebug para comprobar las peticiones realizadas al servidor.
Por último, aquí os dejo el ejemplo y os animo a comentar el artículo. 😉