Como crear y usar sprites en páginas HTML

Reducir el tiempo de carga de una página web es importante ya que un tiempo excesivo puede hacer que parte de los usuarios se vayan antes de que cargue la página completa. Para reducir el tiempo de carga de una página web se pueden hacer varias cosas, entre ellas:

Reducir el peso de la página, por ejemplo, reduciendo el tamaño de las imágenes o haciendo el código html más simple.
Utilizar versiones minimizadas de frameworks javascript y css.
Combinar archivos de javascript y css. Para hacer menos peticiones.
Usar CDNs que sirvan los javascript de tal modo que el usuario no tenga que descargarlos si ya los tiene cacheados de otras peticiones o accesos a otras páginas.
Y la que es de interés en esta entrada, reducir número de peticiones también en los iconos usados en la página usando la técnica de crear sprites.

Los iconos suelen tener la característica de que suelen ser pequeños (de uno o 2 KiB) de forma que el mayor tiempo empleado para descargarlos no es la transferencia sino el tiempo empleado para realizar la petición y la latencia de la red. Es mejor combinar todos los iconos en una imagen grande y hacer una sola petición (aunque algunos no se usen) que hacer tantas peticiones como iconos diferentes tengamos. Es lo mismo aplicado cuando se combinan varios archivos javascript y css en uno solo para hacer menos peticiones al servidor pero aplicado a las imágenes.

Para hacer la combinación de las imágenes hay herramientas en internet que nos permiten realizalo de forma sencilla y rápida, como este Generador de Sprite CSS. El resultado que obtendremos de esta herramienta será una salida de CSS y una imagen con la combinación de todas las que queremos.

Una biblioteca de iconos muy usados son los iconos silk de la página fam fam fam pero estos iconos vienen separados cada uno en su propio archivo y la mayoría tiene un tamaño de medio KiB asi que usando un sprite podemos beneficiarnos de la ventajas usando esta técnica. Lo primero que haremos es obtener y poner en una carpeta los iconos que queramos tener en un sprite, posteriormente crearemos un archivo zip, luego usaremos la herramienta de sprites que queramos.

Parte del CSS que obtenemos es:

	.sprite-silk {
	background: url(sprite-silk.png) no-repeat top left;
	}

	.sprite-silk-accept{ background-position: 0 0; width: 16px; height: 16px; }
	.sprite-silk-add{ background-position: 0 -17px; width: 16px; height: 16px; }
	.sprite-silk-anchor{ background-position: 0 -34px; width: 16px; height: 16px; }
	.sprite-silk-application{ background-position: 0 -51px; width: 16px; height: 16px; }

view raw sprite.css hosted with ❤ by GitHub

Y un trozo de la imagen del sprite es:

Posteriormente para usar el sprite el html de nuestra página sería, incluyendo el CSS que hemos obtenido y aplicando los estilos a una imagen que en el src tiene una imagen con un pixel transparente:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Sprite</title>
	<style type="text/css">
	.sprite-silk {
	background: url(sprite-silk.png) no-repeat top left;
	}

	.sprite-silk-accept{ background-position: 0 0; width: 16px; height: 16px; }
	.sprite-silk-add{ background-position: 0 -17px; width: 16px; height: 16px; }
	.sprite-silk-anchor{ background-position: 0 -34px; width: 16px; height: 16px; }
	.sprite-silk-application{ background-position: 0 -51px; width: 16px; height: 16px; }
	</style>
	</head>
	<body>
	<img src="pixel.png" class="sprite-silk sprite-silk-accept"/>
	</body>
	</html>