Representación del navegador CSS Sprites

Question

Todos sabemos que las imágenes de sprites CSS son excelentes para reducir la cantidad de solicitudes, pero ¿qué pasa con el rendimiento del navegador que representa la página con varios elementos que usan una imagen grande como fondo?

Answer 1

en máquinas más lentas equipadas con navegadores más antiguos (como IE6 / IE7), puede notar una disminución significativa del rendimiento cuando utiliza imágenes muy grandes muchas veces en una página. Es aún más grave, cuando estás usando sprites para: estados flotantes.

Debe moderar su tentación de empujar todos sus sprites a una imagen enorme: piense en los elementos que forman parte de la interfaz de usuario del sitio web / webapp y póngalos en un archivo de sprites (se mostrarán 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 utilícelas según sea necesario. La desventaja es el tiempo de carga ligeramente extendido (solicitudes HTTP adicionales), pero la experiencia del usuario mientras visualiza / desplaza la página será mucho mayor.

Answer 2

Necesitas equilibrar las cosas. Si está hablando de una imagen que incluirá, digamos, 1000 sprites, entonces el CSS será enorme. Además, existe una posibilidad muy pequeña de que esté utilizando todos esos sprites en la misma página de todos modos.

Answer 3

Como podemos juzgar por nuestra experiencia en YouTube, no hay gran problema con eso.

Con suerte, el navegador almacena en caché una imagen en la memoria y luego la usa para representar la salida donde sea que se necesite esta imagen.

Answer 4

Puede guardar una cantidad significativa 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 y posicionamiento CSS, más sitios están adoptando esta técnica de rendimiento. De hecho, algunos de los sitios más activos 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 complejas interfaces. Ambos sitios usan sprites 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 suele ser 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 varias tablas de colores y a la información de formato requerida por imágenes separadas. Para maximizar la accesibilidad y la usabilidad, los sprites CSS se utilizan mejor para iconos o efectos decorativos.