¿Son grandes los sprites CSS una buena idea?

Question

Tengo un gran CSS Sprite que tarda unos 3 segundos en cargar en mi conexión a Internet de alta velocidad. Quiero saber si esta es una buena idea o no.

Además de esto, también quiero saber si debería mostrar una imagen más pequeña de lo que el sprite real se está cargando sólo un poco del sprite. Aunque esto significa dos solicitudes HTTP en lugar de una, me preguntaba si mejoraría la experiencia de UI/usuario, si desaparecía la superposición cuando se cargaba el documento.

Answer 1

¿Qué tan grande es grande? 3 segundos parece absurdo. Si está cargando cada imagen bajo el sol, entonces no, no es una buena idea. También puede que tenga que mirar en la optimización de la imagen (formato de lo que es actualmente? ¿Se puede publicar el sprite?)

Básicamente se trata de una solución de compromiso. Si está usando la mitad de las imágenes en el sprite de su página, está bien porque obtiene más ganancia a través de menos conexiones HTTP y luego desperdicia las imágenes no utilizadas. Si usa el 1% de las imágenes en el sprite, no vale la pena.

En cuanto a su segunda pregunta va - absolutamente hacer que si el sprite tiene que ser tan grande como lo es actualmente. Verá muy poca pérdida debido a la carga de una imagen pequeña adicional. El objetivo de los sprites es reducir las conexiones HTTP de 100-> 10, por ejemplo. 10-> 11 no es gran cosa.

Answer 2

Si tu sprite es tan grande, que recomendaría para dividir las imágenes en grupos lógicos y guardarlos en varios sprites (pensar 2-4). Si no todos los sprites divididos se muestran a la vez en una página, la carga de la página aumentará.