Así que gracias por el A2A.
Las imágenes de Sprite son básicamente trucos de CSS.
¿Qué son los CSS Sprites?
- Rastreadores web: ¿Cuáles son las leyes de copyright específicas para los sitios web de rastreo?
- ¿El Node.js / io.js se divide bueno o malo para las personas que aman JavaScript en el backend?
- ¿Cuáles son las principales diferencias entre un desarrollador web (o un programador) y un programador 'real'?
- ¿Por qué no más sitios web usan HTTPS?
- ¿Cuál es la mejor manera de agregar un script PHP a JavaScript?
Los CSS Sprites son un medio de combinar múltiples imágenes en un solo archivo de imagen para usar en un sitio web, para ayudar con el rendimiento.
Sprite puede parecer un poco inapropiado teniendo en cuenta que está creando una imagen grande en lugar de trabajar con muchas imágenes pequeñas, pero el http://en.wikipedia.org/wiki/Spr…, que data de 1975, debería Ayuda a aclarar las cosas.
Para resumir: el término ” sprites ” proviene de una técnica en gráficos por computadora, que se usa con mayor frecuencia en videojuegos. La idea era que la computadora pudiera recuperar un gráfico en la memoria y luego mostrar solo partes de esa imagen a la vez, lo que era más rápido que tener que buscar continuamente nuevas imágenes. El sprite fue el gran gráfico combinado.
CSS Sprites es más o menos la misma teoría: obtener la imagen una vez, cambiarla y solo mostrar partes de ella. Esto reduce la sobrecarga de tener que buscar varias imágenes.
¿Por qué usar CSS Sprites?
Puede parecer contradictorio incluir imágenes más pequeñas en una imagen más grande. ¿No tardarían más en cargar las imágenes más grandes?
Si bien el tamaño total de la imagen (a veces) aumenta con sprites, varias imágenes se cargan con una sola solicitud HTTP . Los navegadores limitan el número de solicitudes simultáneas que puede hacer un sitio y las solicitudes HTTP requieren un poco de apretón de manos.
Pequeño ejemplo: –
Esta es tu imagen 
Establece la misma imagen de fondo en varias clases de CSS y establece la posición de fondo y las dimensiones de las clases individuales para mostrar una sola porción del sprite.
.flags-canada, .flags-mexico, .flags-usa {
background-image: url (‘../ images / flags.png’);
background-repeat: no-repeat;}
.flags-canada {
altura: 128 px;
posición de fondo: -5px -5px;}
.flags-usa {
altura: 135px;
posición de fondo: -5px -143px;}
.flags-mexico {
altura: 147px;
posición de fondo: -5px -288px;}
No debe hacer esto manualmente cada vez.
Para automatizarlo: –
Generar Sprites con Grunt / Gulp / Node
css-sprite es un paquete de nodos que crea sprites a partir de un globo de imágenes. css-sprite tiene una gran cantidad de excelentes características que incluyen formato de salida como PNG, JPG y generación de hojas de estilo en CSS, LESS, Sass y Stylus.
Para compilar sprites a través de la línea de comandos, instale css-sprite globalmente con:
$ npm install -g css-sprite
Luego, para generar sprites y la hoja de estilo correspondiente, ejecute:
$ css-sprite ./output-directory/ ./input-directory/
Puede leer muchos tutoriales disponibles en la red para estos.
Espero que esto ayude 🙂
