Todos sabemos que las imágenes sprites CSS son geniales para reducir la cantidad de solicitudes, pero ¿qué ocurre con el rendimiento del navegador que muestra la página con varios elementos utilizando una gran imagen como fondo?Representación del navegador Sprites CSS
en máquinas más lentas equipadas con navegadores más antiguos (como IE6/IE7) puede observar una caída significativa en el rendimiento cuando utiliza imágenes muy grandes muchas veces en una página. Es aún más grave cuando usa sprites para: estados de vuelo estacionario.
Usted tiene que moderar su tentación hacia empujando todas sus sprites en una imagen más grande - piensa acerca de qué elementos son parte del sitio web/UI aplicación web y ponerlos en un archivo de sprites (los que se mostrará todo el tiempo, mientras navega) Luego intente agrupar el resto de los sprites en imágenes específicas de la sección del sitio web y úselos según sea necesario. La desventaja es un tiempo de carga ligeramente extendido (solicitudes HTTP adicionales), pero la experiencia del usuario mientras se visualiza/desplaza la página será mucho más alta.
Como podemos juzgar por nuestra experiencia de YouTube, no hay un gran problema con eso.
Afortunadamente, el navegador guarda en caché una imagen en la memoria y luego la usa para representar la salida donde sea que se necesite esta imagen.
Necesita equilibrar las cosas. Si está hablando de una imagen que incluirá, por ejemplo, 1000 sprites, el CSS será enorme. Además, hay una posibilidad muy pequeña de que estés usando todos esos sprites en la misma página de todos modos.
Puede guardar una gran cantidad de solicitudes HTTP al consolidar sus imágenes en uno o más sprites compuestos y usar CSS para mostrar selectivamente partes del sprite dentro de su página web. Ahora que los principales navegadores han evolucionado lo suficiente como para admitir fondos CSS y posicionamiento, más sitios están adoptando esta técnica de rendimiento. De hecho, algunos de los sitios más ocupados de la Web usan sprites CSS para guardar solicitudes HTTP.
Con millones de usuarios, Yahoo! y AOL hacen todo lo posible para mejorar la experiencia del usuario. Tanto AOL.com como Yahoo.com usan sprites CSS para guardar numerosas solicitudes HTTP para sus intrincadas interfaces. Ambos sitios usan sprites de CSS para mostrar selectivamente iconos dentro de sus directorios de servicios, y Yahoo! usa sprites en otros lugares también.
Otro beneficio de los sprites CSS es que la imagen combinada es a menudo más pequeña en tamaño de archivo que las imágenes individuales, a pesar de agregar espacios en blanco entre las imágenes. El tamaño más pequeño de los sprites se debe a la sobrecarga reducida de las tablas de colores múltiples y la información de formato requerida por las imágenes separadas. Para maximizar la accesibilidad y la usabilidad, los sprites CSS se usan mejor para íconos o efectos decorativos.
No respondió la pregunta. La pregunta era sobre el rendimiento de representación del navegador, no sobre el ancho de banda o las solicitudes HTTP. –
En realidad, una pregunta interesante! – User