Una introducción a los Sprites de imagen CSS: son fáciles de aprender y muy buenos de conocer

Los sprites de imágenes han estado aquí desde la década de 1970. Se utilizaron para las primeras animaciones de computadora en Atari y otras consolas. A medida que pasaba el tiempo, los desarrolladores front-end los usaban cada vez menos y querían gráficos más avanzados (léase: realistas) para 3D y realidad virtual.

En los últimos años, sin embargo, han regresado.

Sprite es un término de gráficos por computadora para un mapa de bits bidimensional que se integra en una escena más grande.

En los últimos años, Facebook, Twitter, Instagram y muchas otras plataformas de redes sociales crecieron como locas. Con el crecimiento surgió la necesidad de optimizar siempre que fuera posible y reducir el tamaño de las solicitudes del servidor. Fue entonces cuando los sprites de imágenes CSS volvieron a la corriente principal.

Para una plataforma como Facebook, que tiene más de mil millones de usuarios, mostrar iconos, imágenes y contenido similar requiere múltiples solicitudes de servidor. Las solicitudes sobrecargan innecesariamente el tráfico.

Entonces, ¿qué haces para reducir las solicitudes del servidor y el ancho de banda? Vaya a los sprites de imágenes CSS.

En lugar de realizar una solicitud para la imagen de su perfil, la imagen de perfil de su amigo, las miniaturas de su álbum, etc., los sprites le permiten usar una imagen, lo que significa solo una solicitud. Puede manipular esa imagen para mostrar esas imágenes como partes de una imagen más grande.

Veamos un ejemplo que involucra banderas:

Ahora veamos cómo funciona:

Como puede ver en el código anterior, hemos configurado la base que consta de tres divs, donde cada div será un portador de sprites.

En primer lugar, elegimos el div con el ID de first. Nuestro div tendrá un tamaño de alto y ancho que se mostrará en nuestra página. Como fondo, cargaremos una imagen con URL (“//i.postimg.cc/R0N7nkH9/flags.png") .

Lo siguiente es reducir o aumentar nuestra imagen de fondo con un tamaño de fondo: 1400px. (Podemos usar el tamaño de píxel real, porcentaje, em o rem.) Este parámetro nos permitirá “acercar” una imagen hasta el punto en que solo se mostrará una cierta parte de la imagen.

Por último, los dos parámetros que vienen después del fondo:

URL ("// i.postimg.cc/R0N7nkH9/flags.png"), moverá la parte de la imagen principal, que será visible a lo largo de los ejes X e Y. Lo que significa que en este caso el fondo:

URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; mostraremos la parte que está desplazada desde la parte superior de la imagen por 87 píxeles desde la parte superior y 86 píxeles desde la izquierda .

El primer número ( -86px ) representa el eje X, donde negativo significa moverse de izquierda a derecha y positivo significa ir de derecha a izquierda. Los segundos números (-87px) se utilizan para desplazarse de arriba hacia abajo, donde se aplican las reglas invertidas, un número positivo significa ir de abajo hacia arriba y, por supuesto, negativo ir de arriba a abajo.

Como puede ver en la imagen original, la bandera que obtuvimos (Bosnia) es de hecho la segunda desde arriba y la segunda desde la izquierda.

¿Suficientemente bueno? OK continuemos.

Ahora llenemos el div con un ID de segundo. Se aplicarán las mismas reglas de configuración y el único cambio será que, en este caso, nos mantendremos en el eje X original (0px), y la dirección Y irá desde la parte inferior hacia la superior (89px). Nuevamente, si revisa la imagen original, puede ver que (Uzbekistán) es primero desde abajo y primero desde la izquierda.

Y por último pero no menos importante…

Sí, por último, estamos llenando el último div con un ID de tercero. Las reglas son las mismas, y si adivinaste que nos movimos de abajo hacia arriba, bueno, eso es cierto.

Ahora, el momento de la verdad ….

En el caso anterior, nos movíamos a lo largo de los ejes X e Y para mostrar ciertas partes de la imagen con banderas. Yendo de derecha a izquierda y hacia abajo tenemos a Bosnia (eje X), yendo de abajo a izquierda (eje Y) tenemos a Tailandia y Uzbekistán. Como ha visto, estamos usando solo una imagen, y eso significa solo una solicitud para una imagen.

Es importante saber que cuando está construyendo los sprites, esa imagen base debe tener las mismas porciones de imágenes dentro, para su propia conveniencia. Como en este caso donde nos estamos moviendo hacia la izquierda y la derecha, arriba y abajo, por el tamaño de la porción más el espacio en blanco. Uzbekistán (89 px) y Tailandia (178 px) tienen una diferencia de 89 px, que es su tamaño real (87 px) más espacios en blanco (1 px + 1 px).

Sí, también puedes hacer animaciones.

Para hacer este estilo de animaciones dulces y geniales de la vieja escuela, solo necesitamos propiedades de animación CSS. En este caso, estábamos moviendo la imagen original a lo largo del eje X y obtenemos esta animación de estilo antiguo. Créame con los sprites, no hay límites.

Es tan fácil como eso :)

Espero que hayas disfrutado leyendo este artículo.

Mantente sintonizado para más …