¿Cuáles son las ventajas de usar CSS Sprites en aplicaciones web?

Question

Estoy trabajando en un sitio web con un tráfico razonablemente pesado y estoy buscando utilizar un sprite CSS para reducir el número de cargas de imagen en su diseño.

¿Hay alguna ventaja de usar un sprite CSS además de reducir la cantidad de datos transmitidos? ¿Cuánto espacio realmente ahorras? ¿Existe un umbral en el que el uso de sprites valga la pena para un sitio web?

ACTUALIZACIÓN: Gracias por sus respuestas. Obviamente están todos cuidadosamente pensados ​​y presentan buenas fuentes para verificar sus puntos. Me siento mucho más capaz de tomar una decisión informada sobre el uso de sprites de CSS en el diseño de mi sitio ahora.

Answer 1

La pregunta por lo general no se trata de la cantidad de ancho de banda que podría guardar. Se trata más acerca de que reduce la cantidad de solicitudes HTTP necesarias para representar una página web.

Considerando:

• navegadores web sólo se hacen algunas peticiones HTTP en paralelo
• haciendo una petición HTTP significa un ida y vuelta al servidor, que lleva mucho tiempo
• tenemos "rápida "conexión a Internet, lo que significa que descarga rápida ...

lo que lleva tiempo, cuando se hace un montón de peticiones para obtener pequeños contenidos (como imágenes, iconos, y similares) son los múltiples viajes de ida y vuelta al servidor: termina pasando el tiempo esperando a que llegue la solicitud y el servidor responda, en lugar de usar este tiempo para descargar datos.

Si podemos minimizar el número de solicitudes, minimizamos el número de viajes al servidor, y usamos nuestra conexión de alta velocidad mejor (descargamos un archivo más grande, en lugar de esperar muchos más pequeños).

Es por eso que se usan sprites CSS.

Para más información, se puede echar un vistazo a, por ejemplo: CSS Sprites: Image Slicing’s Kiss of Death

Answer 2

Menos solicitudes HTTP = carga más rápida en general. Yahoo y compañía. use esta técnica, si puede imaginarse la cantidad de usuarios que la tienen ahorrará un lote de ancho de banda. Imagine 50 imágenes separadas para iconos, es decir, 50 solicitudes HTTP separadas en lugar de tener solo un sprite css que contenga todas las imágenes, que guardaría 49 solicitudes HTTP y las multiplicaría por todos los usuarios del sitio.

Answer 3

En realidad, los sprites no se usan para reducir la cantidad de datos transmitidos (en la mayoría de los casos aumenta ligeramente la cantidad de datos transferidos), sino para reducir la cantidad de solicitudes realizadas en el servidor.

Las solicitudes HTTP en los navegadores se realizan tradicionalmente en secuencia. Lo que significa que una solicitud no comenzará hasta que se complete la anterior. Además, es costoso abrir una conexión para hacer una solicitud. Al limitar la cantidad de solicitudes realizadas en el servidor, está aumentando la velocidad de carga de los elementos.

Answer 4

Además de la mejora del rendimiento de la carga total de la página mediante la limitación de la cantidad de solicitudes, los sprites de imagen también se puede realizar el canje de forma dinámica imágenes (por ejemplo, cambiar la imagen de fondo de un elemento de navegación en vuelo estacionario) "realizar" un poco mejor ya que todos lo que haces es cambiar la x, y en lugar del src.

Así que supongo que para responder cuál es el umbral que justifica su uso, diría de inmediato debido a las posibles mejoras de carga en cada cliente individual.

Answer 5

Creo que Yahoo tiene el mejor argumento para los sprites de CSS. Además, toda la página vale la pena leer:

http://developer.yahoo.com/performance/rules.html#num_http

Answer 6

Además de reducir las peticiones HTTP (como ya se ha dicho), sprites CSS no dependen de JavaScript. Esto le da a algunas otras ventajas:

• menos código para mantener
• más fácil la prueba de cross-browser
• se pueden codificar en línea a través de style atributos
• sin DOM piratería
• ninguna imagen de precarga (por lo menos administrivia - "Oh, espera, necesito precargar ese nuevo botón de navegación ... basura, ¿qué archivo .js tiene mi preloader?")
• puede usar clases de CSS para aplicarlo a varios selectores
• se puede aplicar a cualquier selector con el :hover pseudoclass, o en cualquier selector que se puede envolver con un ancla (no sólo img s)

Si usted no es reacio a DOM piratería, sin embargo, puede consigue algunos efectos de animación ingeniosos simplemente presionando los valores X e Y. Lo que hace que sea más fácil animar muchos estados diferentes (como keypress o onmouseclick).

Hay algunos efectos secundarios de producción gráfica interesantes, así:

• menos archivos de producción gráfica
• más fáciles de hacer el diseño para los botones etc. directamente en formato HTML (menor necesidad de composiciones PSD)
• más fácil hacer cambios en la interfaz sin tener que regenerar una tonelada de gráficos
• sólo que mucho más difícil para los piratas de imagen a sorber sus gráficos