Boost de velocidad para páginas web: CSS Sprites

Logo Carlos Amaral.com
Vaya al Contenido

Boost de velocidad para páginas web: CSS Sprites

Más de 20 años de Experiencia en Diseño 📌
Publicado de Zae Vega en Diseño WEB · Sabado 16 Jul 2016 ·  1:15
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.


"Si crees que el buen diseño es caro, deberías ver el costo de un mal diseño"
Dr. Ralph Speth - CEO de Jaguar
Regreso al contenido