Los sprites es una forma de mejorar el rendimiento de nuestra pagina web hasta un 80%,
creando una solo imagen con todos los iconos asi nuestra pagina no carga tanto,
muchas de las paginas profesionales como youtube, google, yahoo o habbo utilizan sprites,
aqui un ejemplo del sprite de google.
Ahora con el ejemplo que aprenderemos es con el siguiente.
La forma mas sencilla de la que nosotros hariamos el ejemplo anterior seria:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1"><img src="imagenes/sol.png" /> Localidad 1: soleado, máx: 35º, mín:
23º</p>
<p id="localidad2"><img src="imagenes/sol_nubes.png" /> Localidad 2: nublado, máx: 25º,
mín: 13º</p>
<p id="localidad3"><img src="imagenes/nubes.png" /> Localidad 3: muy nublado, máx: 22º,
mín: 10º</p>
<p id="localidad4"><img src="imagenes/tormentas.png" /> Localidad 4: tormentas, máx:
23º, mín: 11º</p>
Esta es una solucion muy sencilla y que funciona bien pero el navegador debera descargar
4 imagenes diferentes para mostrar la pagina por lo que debe realizar 4 peticiones al servidor.
Entonces lo que nosotros queremos lograr es lograr el efecto anterior sin que nuestra web carge
tantas veces utilizando la tecnica sprite.
El primer paso consiste en crear una imagen grande que incluya las cuatro imágenes
individuales. Como los iconos son cuadrados de tamaño 32px, se crea una imagen de 32px x
128px:
Para facilitar el uso de esta técnica, todas las imágenes individuales ocupan el mismo sitio dentro
de la imagen grande. De esta forma, los cálculos necesarios para desplazar la imagen de fondo se
simplifican al máximo.
El siguiente paso consiste en simplificar el código HTML:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1">Localidad 1: soleado, máx: 35º, mín: 23º</p>
<p id="localidad2">Localidad 2: nublado, máx: 25º, mín: 13º</p>
<p id="localidad3">Localidad 3: muy nublado, máx: 22º, mín: 10º</p>
<p id="localidad4">Localidad 4: tormentas, máx: 23º, mín: 11º</p>
La clave de la tecnica de los sprites css consiste en mostrar las imagenes mediante la propiedad
background-image. Para mostrar cada vez una imagen diferente, se utiliza la propiedad background-position
que desplaza la imagen de fondo teniendo en cuenta la posicion de cada imagen individual dentro de la grande:
#localidad1, #localidad2, #localidad3, #localidad4 {
padding-left: 38px;
height: 32px;
line-height: 32px;
background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
}
#localidad1 {
background-position: 0 0;
}
#localidad2 {
background-position: 0 -32px;
}
#localidad3 {
background-position: 0 -64px;
}
#localidad4 {
background-position: 0 -96px;
}
La siguiente imagen muestra lo que sucede con el segundo parrafo:
El parrafo tiene establecida una altura de 32px, identica al tamaño de los iconos.
Despues de añadir un padding-left al parrafo se añade la imagen de fondo mediante
background-image. Para cambiar de una imagen a la otra solo es necesario desplazar de forma
ascendente o descendente la imagen grande.
Si se quiere mostrar la segunda imagen se desplaza de forma ascendente la imagen grande. Para
desplazarla en ese sentido, se utilizan valores negativos en el valor indicado en la propiedad
background-position. Por ultimo como la imagen grande ha sido especialmente preparada, se sabe que el
desplazamiento necesario son 32 pixeles, por lo que la regla css de este segundo elemento resulta en:
#localidad2 {
padding-left: 38px;
height: 32px;
line-height: 32px;
background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
background-position: 0 -32px;
}
La solución original utilizaba cuatro imágenes y realizaba cuatro peticiones al servidor. La
solución basada en sprites CSS sólo realiza una conexión para descargar una sola imagen.
Los sprites que incluyen todas sus imagenes verticalmente son los mas faciles de manejar. Pero claro
tambien ahi una solucion para los que tienen sus imagenes horizontales pero claro si las pones en vertical
asi pondras poner un texto a su lado y sera una mejor imagen para su web.
Despues posteare la manera para agrear sprites de manera horizontal.
Nota: Este tutorial lo modifique yo desde un manual de css, las imagenes son las mismas utilizadas, solo
transferi el aporte y agrege mis propios aportes.
