Echemos un vistazo más de cerca a una herramienta tan interesante como los sprites CSS. Muchos maquetadores y webmasters experimentados conocen bien las ventajas de esta sencilla técnica. El lado positivo del uso de sprites es que el tiempo de carga de la página se reduce significativamente al reducir la cantidad de imágenes individuales. En los estándares de diseño modernos, se acostumbra agrupar pequeños íconos e imágenes temáticas en una colección especial de imágenes. En pocas palabras, un sprite es una imagen que incluye un conjunto de imágenes pequeñas de un tema.

De esta forma, cuando agrupamos imágenes pequeñas, reducimos el número de solicitudes al servidor. Nuestra página carga solo una imagen en lugar de 30 pequeñas. Esto proporciona una ganancia significativa en la velocidad de carga.

En pocas palabras: CSS Sprites es una herramienta para combinar varias imágenes en un solo archivo para usar en un sitio web y mejorar significativamente el rendimiento. El concepto de Sprite puede parecer un poco engañoso considerando que estás creando una imagen grande en lugar de trabajar con imágenes pequeñas.

Para resumir: el término "sprites" proviene de una técnica de gráficos por computadora que se usa con mayor frecuencia en los videojuegos. La idea era almacenar una imagen en la memoria y luego mostrar sólo una parte de esa imagen, lo que era más rápido que buscar nuevas imágenes.

CSS Sprites es más o menos la teoría exacta: obtiene la imagen una vez, mueve el fondo y solo muestra partes de ella. Esto reduce la sobrecarga al recuperar varias imágenes.

Existe una gran cantidad de servicios en Internet para crear sprites. Sólo necesita escribir la consulta apropiada en un motor de búsqueda. Si le da pereza buscar, aquí tiene algunos recursos populares sobre este tema. generador de sprites superior, generador de sprites inettools. Digamos que cortaste tu plantilla, seleccionaste todos los pequeños íconos, creaste un objeto a partir de ella, ¿qué sigue?

Cómo usar iconos de un sprite

Ahora veamos el procedimiento para trabajar con un sprite.

• Creemos una clase general, por ejemplo, llamémosla .sprite, cuyo fondo es esta imagen, que se creó usando el generador sprite.png. A la misma clase le estableceremos el alto y el ancho, que serán el alto y ancho de los íconos de sprites si son del mismo tamaño.
• Para los bloques en los que necesita usar este ícono, establezca el desplazamiento del fondo en la cantidad deseada usando la propiedad CSS posición de fondo. Más sobre fondos en el artículo anterior.

Ejemplo:

.sprite {
 ancho: 30px;
 alto: 30px;
 fondo: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 posición-fondo: 0 -80px;
}

Buen trabajo