Qué son los sprites CSS ?
En palabras simples se refiere a una técnica que combina tecnologías HTML-CSS y que nos permite optimizar el tiempo de carga de nuestro sitio web mejorando la fluidez de nuestra pagina.
Cuando tenemos conciencia de que cada imagen requiere de una conexión independiente de tipo cliente-servidor y que cada conexión demora un tiempo en establecerse, entonces entendemos que debemos minimizar el numero de conexiones dentro de lo posible.
Con estas imágenes se requieren 3 conexiones independientes una de la otra.
imagen 1
imagen 2
imagen 3
En cambio con esta imagen solo necesitamos de una conexión.
Como implementarlos ?
Usando código CSS mostramos la sección correspondiente a la imagen deseada.
Entonces Creamos una etiqueta Div en este caso de un tamaño de 22x22 px.
code: cssbackground:url(result.png);
width:22px;
height:22px;
Ahora jugamos con la posición para aislar las imágenes.
code: cssbackground-position: 0px 0px;
code: cssbackground-position: -22px 0px;
code: cssbackground-position: -44px 0px;
Esta técnica resulta muy útil para trabajar con imágenes pequeñas que se repiten continuamente en nuestro sitio.