Las imagenes y las http requests

Hay ocasiones en que el diseño grafico de la página web, requiere ser adornado con íconos, ya sea para reforzar el mensaje que se quiere transmitir, o simplemente para hacer mas agradable su vista.

La manera como se implemente este diseño es importante, ya que, por una parte, el peso de las imagenes, y por otra el número de imagenes a cargar, puede llegar a influir en el tiempo de carga de la página.  El primer factor, el peso de las imagenes, es importante, pero no es la razón de ser de este escrito, es el segundo factor, el número de imagenes, el que nos ocupa el dia de hoy.

Visto de una manera muy burda, pudieramos decir que para generar una página web, primero se descargan todos los archivos que le dan vida a esta página, y despues se acomodan para generear la vista de ella en la pantalla. Lo que hay que tomar en cuenta, es que, por cada archivo que se descarga, ya sean imagenes, achivos js, archivos html, hojas de estilo css, etc... Se genera una petición o "http request" y cada una de estas peticiones hace que la página tarde mas en cargar. 

¿Que se puede hacer si el diseño contiene muchas imagenes?

La respuesta es sencilla, reducir el número de imagenes. Aunque parezca una contradicción, esto es posible con el uso de "sprites" y hojas de estilo.

Un sprite es simplemente, un solo archivo de imagen, que contiene multiples imagenes en el.

Por ejemplo de estas 5 imagenes:

 
Se puede generar el siguiente sprite.

Y utilizando unicamente el sprite y algo de css podemos generar vistas para estos cinco íconos.

.sprite{
	background: url(sprite.png);
	width:105px;
	height:105px;
}
.sprite.one{
	background-position: 0 0;
}
.sprite.one:hover{
	background-position:-105px 0;
}
.sprite.two{
	background-position: 0 -105px;
}
.sprite.two:hover{
	background-position:-105px -105px;
}
.sprite.three{
	background-position: 0 -210px;
}
.sprite.three:hover{
	background-position:-105px -210px;
}
.sprite.four{
	background-position: 0 -315px;
}
.sprite.four:hover{
	background-position:-105px -315px;
}
.sprite.five{
	background-position: 0 -420px;
}
.sprite.five:hover{
	background-position:-105px -420px;
}
 
 
 
 
 
 
Por otro lado, si el diseño incluye íconos de imagenes comunes como son, carrito de compras, íconos de redes sociales, etc..
Se puede considerar el uso de fonts tales como fontawesom, o glyphicons

Como muestra un botón

Los siguientes íconos son generados por medio de fontawesom, requiriendo una sola petición http, y con un peso de 23.2kb solamente

En resumen

No existe una sola solución ideal al diseñar una página web, pero deberiamos de siempre tomar en cuenta, el número de archivos a cargar y el peso de cada archivo, intentando minimizar en ambos casos.

No estamos descubriendo el hilo negro, esto ya se ha dicho muchas veces, y aún asi. casi a diario encontramos casos que no siguen estos consejos.