Sprite de imagen de CSS

Sprite de imagen

El sprite de imagen es una colección de imágenes contenidas en una única imagen.

Las páginas que contienen muchas imágenes pueden tardar mucho tiempo en cargar y generar múltiples solicitudes al servidor.

El uso de sprites de imagen reduce la cantidad de solicitudes al servidor y ahorra ancho de banda.

Sprite de imagen - Ejemplo simple

Usamos la siguiente imagen única ("navsprites.gif") en lugar de tres imágenes separadas:

Imágenes de navegación

Al usar CSS, podemos mostrar solo una parte de la imagen necesaria.

En el siguiente ejemplo, el CSS especifica qué parte de la imagen "navsprites.gif" se mostrará:

Ejemplo

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Prueba personalmente

Explicación del ejemplo:

  • <img id="home" src="trans.gif"> - Definir únicamente una imagen transparente pequeña, ya que la propiedad src no puede estar vacía. La imagen que se mostrará será la imagen de fondo especificada en CSS.
  • width: 46px; height: 44px; - Definir la parte de la imagen que queremos usar
  • background: url(navsprites.gif) 0 0; - Definir la imagen de fondo y su posición (left 0px, top 0px)

Sprite de imagen - Crear lista de navegación

Deseamos usar la imagen de sprite ("navsprites.gif") para crear una lista de navegación.

Vamos a usar una lista HTML, ya que puede ser un enlace y también admite imágenes de fondo:

Ejemplo

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Prueba personalmente

Explicación del ejemplo:

  • #navlist {position:relative;} - Establecer la posición en relativa para permitir la ubicación absoluta dentro de la misma
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - El margen y el relleno se establecen en 0, se elimina list-style y todos los elementos de lista son posicionados absolutamente
  • #navlist li, #navlist a {height:44px;display:block;} - Todas las imágenes tienen una altura de 44px

Ahora comenzamos a establecer la posición y el estilo para cada parte específica:

  • #home {left:0px;width:46px;} - Alinea a la izquierda, ancho de la imagen 46px
  • #home {background:url(navsprites.gif) 0 0;} - Define la imagen de fondo y su posición (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Alinea a la derecha 63px (#home ancho 46px + espacio adicional entre elementos), ancho 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Define la imagen de fondo hacia la derecha 47px (#home ancho 46px + 1px separador)
  • #next {left:129px;width:43px;} - Alinea a la derecha 129px (#prev comienza en 63px + el ancho del #prev es 43px + espacio adicional), ancho 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Define la imagen de fondo hacia la derecha 91px (#home ancho 46px + 1px separador + #prev ancho 43px + 1px separador)

Image sprite - Efecto de suspensión

Ahora, vamos a agregar el efecto de suspensión a la lista de navegación.

Consejo::hover selector se puede usar para todos los elementos, no solo para los enlaces.

Nuestra nueva imagen ("navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes para el efecto de suspensión:

Imágenes de navegación

Porque esto es una imagen, no seis archivos individuales, por lo que cuando el usuario coloca el ratón sobre la imagen,No habrá retraso en la carga.

Sólo se necesitan agregar tres líneas de código para lograr el efecto de suspensión:

Ejemplo

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Prueba personalmente

Explicación del ejemplo:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Hemos especificado la misma posición de fondo para las tres imágenes de suspensión, solo 45 píxeles hacia abajo