Un sitio web con gran cantidad de imágenes resulta llamativo y dinámico, pero para que los visitantes puedan tener una experiencia óptima al visitarlo, es importante que el tiempo de carga del mismo no exceda de unos cuantos segundos, y a su vez de la paciencia de las personas, lo cual nos lleva al uso de técnicas de optimización web y una de ellas es el uso de CSS sprites.
La técnica de CSS Sprites consiste en agrupar varias o incluso todas las imágenes o iconos que nuestro sitio usa como base de su diseño en un solo archivo de imagen para después, mediante la propiedad background-position de CSS, mostrar en cada parte del sitio sólo la imagen concreta que nos interese de ese archivo.
De esta forma se reducen dramáticamente las solicitudes que se hacen al servidor, ya que con descargar una sola imagen tendremos todos los elementos gráficos necesarios en nuestro sitio, y no como normalmente sucede, cuando cada imagen es solicitada por separado en una numerosa cadena de descargas simultáneas, esto se traduce en velocidad de carga y menor consumo de recursos de la red.
El uso de CSS sprites es muy sencillo, y para demostrarlo haremos un sencillo Menú con iconos, todo se trata de manejar las clases y los identificadores adecuados en donde necesitemos utilizar nuestras imágenes.
Menú con CSS sprites
Los sprites se pueden general principalmente de dos maneras:
a) Usando un programa de diseño gráfico (como Photoshop, Gimp, etc.).
b) Usando herramientas on-line (sprite generators) que a través de páginas web nos permiten subir las imágenes y nos devuelven el sprite creado.
Quieres ver todos nuestros Paquetes de Diseño Web – Click aquí »
