Boost de velocidad para páginas web: CSS Sprites
Publicado de Zae Vega en Diseño WEB · Sabado 16 Jul 2016
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.
