articulos css

La técnica de los sprites, consiste en sustituir el mayor número de imagenes posibles de una página web, por una sola. La idea, es unir todas las imágenes que aparecen en un web condensadas en una sola, para aumentar la velocidad de carga de un web. No parece lógico que cinco imágenes pequeñas, tarden (por ejemplo) más en cargar que una sola imagen grande que las contenga a todas ellas, pero es así.

¿Por qué? por las solicitudes al servidor (HTTP requests), lo que sucede, es que para cargar cinco imágenes, la web necesita hacer cinco peticiones al servidor, y obtener la respuesta de las cinco. Mientras que si usamos una sola imagen, solo realizamos una solicitud, y con ello, disminuimos el tiempo de carga del web.

Esta técnica es utilizada por una gran mayoría de webs, incluida esta misma, a continuación os muestro uno de los sprites que se usa en este web:

Como podeis ver en la imagen de la izquierda, los edificios, las nubes y la luna, están todos en una sola imagen.

El truco, consiste en utilizar CSS para mostrar solo las partes de la imagen que nos interesa.

Para hacer esto, utilizaremos la propiedad background de CSS. En este caso, vamos a mostrar la luna, para ello usaremos el siguiente código:

background: url(imagenes/pack-skyline.png) 0 -301px no-repeat;

 Lo que estamos haciendo es cargar la imagen de la izquierda, y decirle que ponga el puntero en la coordenada X con valor 0, y la coordenada Y con valor -301px.

La coordenada 0,0 de nuestra imagen estaría en el borde superior izquierdo, por lo que si vemos la ubicación de la luna, veremos que está pegada a la izquierda (coordenada 0) y por debajo del eje Y, es decir, a 301px por debajo de la coordenada 0.

Pero haciendo esto solo, no conseguimos nada, ya que lo único que hemos hecho ha sido colocar el puntero en una coordenada concreta.

Lo que tenemos que hacer es crear un contenedor DIV, con las dimensiones que debería tener la imagen de la luna:

.moon{
   width: 135px;
   height: 138px;
}

Acto seguido, una vez que hemos delimitado el marco donde vamos a cargar la imagen, le indicamos donde tiene que poner el puntero en la imagen:

.moon{
   width: 135px;
   height: 138px;
   background: url(imagenes/pack-skyline.png) 0 -301px no-repeat;
}

Y ahora, si que nos dibujará, solamente la luna. Obviamente, esto sería lo básico del código CSS, luego habría que poner su correspondiente etiqueta HTML, por ejemplo:

<div class="moon"></div>

Y entonces nos dibujaría un div, donde se mostraría la luna, y luego ya sería cuestión de usar CSS para ubicar la luna correctamente, por ejemplo:

 .moon{
   width: 135px;
   height: 138px;
   background: url(imagenes/pack-skyline.png) 0 -301px no-repeat;
   
   position: absolute;
   margin: 0px auto 0px 370px;
}