Ejemplo de como generar y crear un sprite css para mejorar la carga web

Ejemplo de como generar y crear un sprite css para mejorar la carga web

Un sprite es un recurso que permite mejorar el tiempo de carga de una página web.

La idea es aglutinar en una única imagen un conjunto de 2 o más imágenes para así reducir el número de consultas a un servidor web.

A priori puede parecer que al conseguir una imagen más pesada la web se ralentiza su carga. Pero en realidad puede darse que el tiempo ganado al requerir un único recurso al servidor compensa el tiempo que se pueda perder al cargar una imagen con más Kb.

Veamos a la práctica como se usa pues un sprite.

¿Cómo generar un sprite?

Existen varias web apps en internet que te van a ayudar a hacerlo.

En mi caso he usado esta web.

He subido 9 imágenes previamente preparadas en mi web.

El resultado ha sido una imagen .png cuyo peso es la suma de todas las anteriores.

Al pasarla a .jpg y guardarla para web mediante photoshop el peso se ha reducido considerablemente.

imágenes originales
imágenes originales
Ejemplo de como generar y crear un sprite css para mejorar la carga web 1
resulado final sprite
Muestra sprite generado.
Muestra sprite generado.

Mencionar que todas las imágenes usadas tienen las mismas dimensiones para facilitar el código que veréis a continuación.

Ejemplo de uso del sprite

Para ilustrar un uso de como usar convenientemente un sprite se ha preparado un documento html con 3 contenedores.

La idea es que se van a cargar siempre la misma imagen pero que cada contenedor muestra una porción concreta del sprite.

Cuando se pase el ratón por encima de cada dimensión se mostrará otra porción distinta de la imagen.

Para ello usaremos cada vez la instrucción background-position{}según nuestras necesidades.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo de uso de un sprite</title>
	<meta name="author" content="francesc ricart"/>
	<style>
		div{
			width:200px;
			height:200px;
			background-image:url('sprite.jpg');
			background-repeat:no-repeat;
			display:inline-block;
			border:1px solid red;
		}
		.imagen-1{
			background-position:0% 0%;
		}
		.imagen-2{
			background-position:50% 0%;
		}
		.imagen-3{
			background-position:100% 0%;
		}

		.imagen-1:hover{
			background-position:0% 50%;
		}
		.imagen-2:hover{
			background-position:50% 50%;
		}
		.imagen-3:hover{
			background-position:100% 50%;
		}

	</style>
</head>
<body>

	<div class="imagen-1"></div>
	<div class="imagen-2"></div>
	<div class="imagen-3"></div>
	
</body>
</html>

El resultado final se muestra a continuación:

gif que muestra el funcionamiento del sprite
gif que muestra el funcionamiento del sprite

¡Hola!

Querido lector,

¡No te quedes sólo con la teoría de como mejorar el tiempo de carga de una web y pasa a la acción!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.