Blog de Diseño - Más de 20 años de Experiencia en Diseño.

Logo Carlos Amaral.com
Vaya al Contenido
< class="imPgTitle" style="display: block;" itemprop="headline">Boost de velocidad para páginas web: CSS Sprites
Más de 20 años de Experiencia en Diseño.
Publicado por en Diseño WEB ·
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.



QR
Regreso al contenido