El uso de sprites es una tecnica muy util para acelerar el tiempo de carga de nuestra web.
Consiste en juntar varias imagenes (normalmente del mismo tamaño) en una, que cargaremos y mostraremos individualmente.
Con esto evitamos tener que llamar muchas imagenes, que necesitan cabeceras con información que retardan mucho la carga.
Un ejemplo seria algo asi (normalmente se usan más imagenes... y sobre las imagenes no hagamos comentarios xD):
Yo muestro las imagenes asi:
<tr>
<td class="td1"></td>
<td class="td2"></td>
</tr>
Ahora mostraremos las imagenes, usando CSS:
.td1 {
width: 50px;
height: 50px;
background: url(urlsprite.png) 0 0 no-repeat;
}
.td2 {
width: 50px;
height: 50px;
background: url(urlsprite.png) -50 0 no-repeat;
}
El truco consiste en "mover" el fondo. Al poner 0 0 coge la imagen normal, y como tiene width:50px, coge el ancho de la primera imagen.
Sin embargo, en la segunda uso -50, lo que mueve la imagen 50px a la izquierda, y "coge" la segunda imagen.
Es una tecnica bastante sencilla, y muy util cuando cargas muchas imagenes...
Cualquier duda, aquí estoy, salu2
