game - Representación de navegador CSS Sprites

sprites png

Question

Todos sabemos que las imágenes de sprites de 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?

Answer 1

Como podemos juzgar a partir de nuestra experiencia en 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.

Answer 2

Debes equilibrar las cosas. Si estás hablando de una imagen que incluirá, por ejemplo, 1000 sprites, entonces 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.

Answer 3

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 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 de 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.

Answer 4

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.

Tienes que moderar tu tentación de empujar todos tus sprites a una imagen enorme: piensa en qué elementos forman parte de la IU del sitio web / webapp y colócalos en un archivo sprite (se mostrarán todo el tiempo mientras navegas). 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.