En este artículo, conoceremos los beneficios de CSS Sprites, además de comprender su implementación a través de los ejemplos.
Los CSS Sprites son una colección o conjunto de archivos de imagen combinados en un solo archivo al que puede acceder un documento HTML. Luego, estas imágenes se utilizan dentro del código HTML que se mostrará en el sitio web. Una página web que trabaja con muchas imágenes puede tardar una gran cantidad de tiempo en cargarse y generar múltiples requests de servidor. El beneficio principal de utilizar el sprite de imagen es reducir la cantidad de requests HTTP que hacen que el tiempo de almacenamiento dinámico del sitio web sea más rápido. Además, las imágenes se cargan más rápido, lo que facilita el cambio de una imagen a la siguiente.
Ejemplo de CSS Sprites ayuda en el desarrollo web:
Por lo general, al diseñar páginas web, las imágenes se utilizan como documentos individuales. Así, cuando un cliente abre una página web, el programa necesita realizar una solicitud HTTP para cada uno de estos documentos, descargarlos de forma independiente y mostrarlos. Esto provoca tiempos de carga de página más altos, ya que una página web específica puede tener innumerables imágenes más modestas como botones, símbolos, logotipos. Los sprites de imagen CSS ayudan a los desarrolladores web a unir y mezclar estas imágenes pequeñas de uso frecuente en una imagen grande. Luego, el navegador tiene que trabajar con un solo archivo que luego se muestra en las secciones requeridas.
Trabajar con sprites CSS: con imágenes individuales, el desarrollador puede simplemente usar la etiqueta HTML <img> y aplicarle estilo en CSS según sea necesario. Pero mientras trabaja con CSS Sprites, un desarrollador tiene que hacer 2 cosas específicas:
- Creación de la hoja de sprites: para usar sprites CSS, primero debemos crear la hoja de sprites fusionando todos los elementos deseados como botones, imágenes, íconos, etc. en un patrón similar a una cuadrícula. Esto se puede hacer usando cualquier software de edición de imágenes como Photoshop o Gimp. También hay muchas otras herramientas en línea disponibles que ayudan a hacer una hoja de sprites.
- Acceder a un elemento particular de la grilla usando la propiedad background-position: Tenemos que usar atributos CSS para acceder a diferentes partes de la hoja:
- ancho : Ancho de la imagen del sprite.
- altura : Altura de la imagen del sprite.
- background : Crea una referencia a la hoja de sprites.
- Posición de fondo : valores de compensación (en píxeles) para las partes requeridas.
Consulte el artículo CSS Image Sprites para obtener descripciones más detalladas.
Aquí, entenderemos el uso de CSS Sprites a través de los ejemplos. Hay varias áreas en las que es beneficioso usar CSS Sprite, algunas de ellas se analizan a continuación:
Obteniendo la imagen de la hoja de Sprite:
Enfoque: Hemos creado una hoja de sprites con las dimensiones de 200px*100px. Cuando compartimos hojas de sprites, compartimos todas las imágenes bajo una. Entonces, para recuperar nuestras imágenes, configuramos nuestra hoja de sprites como fondo y con una posición de fondo conocida que se conoce al crear la hoja de sprites. Por lo tanto, de esta manera, podemos recuperar las imágenes deseadas de las hojas de pesar. Considere un grupo de imágenes que va solicitando el usuario.
Nota : para obtener una imagen de la cuadrícula, simplemente configure el tamaño de la imagen en ancho y alto, cambie la posición de fondo a la posición deseada. Por ejemplo, para obtener la primera imagen, cambie la posición de fondo a -10px, -10px.
Ejemplo 1 : Este ejemplo describe cómo obtener la imagen de la hoja de Sprite.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite</title>
<style>
.sprite.gfg {
background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20220310121522/csssprites3-200x100.png")
no-repeat;
width: 100px;
height: 100px;
display: inline-block;
background-position: -110px -10px;
}
</style>
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Image Sprite</h3>
</div>
<div class="sprite gfg"></div>
</body>
</html>
Producción:
Creación de la lista de navegación:
Enfoque: aquí, estamos creando la lista de navegación a partir de la hoja de sprites. Siguiendo el mismo concepto que hemos aplicado anteriormente, iremos obteniendo las imágenes y posteriormente las mostraremos como una lista de navegación. Podemos agregar enlaces deseados a los elementos de la lista de navegación, más adelante dentro de la etiqueta del cuerpo.
Ejemplo 2 : Este ejemplo describe la creación de la lista de navegación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
width: 90px;
display: block;
}
#gfg1 {
left: 0px;
height: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
-10px -10px;
}
#gfg2 {
left: 90px;
height: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
-110px -10px;
}
#gfg3 {
left: 90px;
height: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
-10px -110px;
}
</style>
</head>
<body>
<h2 style="color:green">GFG NAVIGATION LIST</h2>
<ul id="navlist">
<li id="gfg1"></li>
<li id="gfg2"></li>
<li id="gfg3"></li>
</ul>
</body>
</html>
Producción:
Efecto de desplazamiento del mouse:
Enfoque: podemos crear un efecto de desplazamiento del mouse usando CSS Image Sprite . Para ello, utilizaremos la etiqueta flotante disponible con el elemento que queremos desplazar. Primero estableceremos las vistas predeterminadas para cada imagen configurando el posicionamiento de fondo. Luego, más tarde, crearemos la vista secundaria que se mostrará al pasar el cursor cambiando el posicionamiento.
Ejemplo 3 : este ejemplo describe el efecto de desplazamiento del mouse.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li,
#navlist a {
height: 90px;
display: block;
}
#gfg1 {
left: 0px;
width: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
0 0;
}
#gfg2 {
left: 90px;
width: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
-110px 0;
}
#gfg3 {
left: 180px;
width: 90px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
0px -110px;
}
#gfg1 a:hover {
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
0 -10px;
}
#gfg2 a:hover {
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
-110px -20px;
}
#gfg3 a:hover {
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220310130642/csssprites4-200x200.png')
0px -114px;
}
</style>
</head>
<body>
<h2 style="color:green">GFG MOUSE HOVERING</h2>
<ul id="navlist">
<li id="gfg1">
<a href="#"></a>
</li>
<li id="gfg2">
<a href="#"></a>
</li>
<li id="gfg3">
<a href="#"></a>
</li>
</ul>
</body>
</html>
Producción:
Beneficios de los sprites CSS
- Reduce la cantidad de requests HTTP: la razón principal para usar sprites CSS es reducir las requests HTTP, al agrupar las imágenes en un archivo, la cantidad de requests HTTP se reduce sin afectar la cantidad real de datos transmitidos.
- Reduce el tamaño general de la imagen: como cada kb importa, la combinación de todos sus activos reutilizables en un archivo será más pequeña que si los dividiera individualmente.
- Independiente de JavaScript: por lo tanto, el código no se debe mantener, las pruebas entre navegadores son más fáciles, se pueden codificar en línea a través de atributos de estilo y no se piratea DOM.
- Reduce el tiempo de carga: una página web con muchas imágenes puede tardar mucho en cargarse y genera varias requests de servidor que se pueden evitar con Sprites.
- Flexibilidad: Es flexible en cuanto a la disposición y el diseño del sitio web.
Deméritos de CSS Sprite:
- Mayor tiempo de desarrollo: para cortar, combinar y programar posiciones de fondo en el CSS.
- Más tiempo de mantenimiento: cada vez que se necesita alguna modificación, el sprite completo se ha regenerado cuidadosamente
- Menos compatible con SEO: a veces es mejor colocar las imágenes en el HTML que en el fondo. Las imágenes HTML pueden contener sus títulos y textos alternativos que son más beneficiosos para el SEO, mientras que los fondos CSS no pueden hacerlo de manera efectiva.
Publicación traducida automáticamente
Artículo escrito por hemantrathore2705 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA