¿El propósito principal de los sprites es reducir las solicitudes http hechas al servidor para elementos gráficos en una página? O desea probar y ajustar tantos elementos al sprite como sea posible.¿Cuándo es un CSS Sprite demasiado grande?
Supongo que lo que estoy preguntando es: ¿cuándo es el sprite demasiado grande?
Es demasiado grande cuando el usuario tiene que esperar a que se descargue el archivo para poder usar la página.
Puede embalar todos los pequeños elementos de diseño estático en una imagen maestra sin grandes problemas.
Por supuesto, si tiene fotos de 10 megapíxeles en su sitio web, empaquetarlas juntas sería una locura.
Sí, el objetivo principal es reducir las solicitudes (y por lo tanto el tiempo de carga). Otra ventaja es que solo debe preocuparse de que una imagen se guarde en la memoria caché correctamente. Consejo: use imágenes PNG ya que su compresión maneja mejor las áreas blancas grandes ("vacías").
¿El objetivo principal de los sprites es reducir las solicitudes http hechas al servidor para elementos gráficos en una página?
Sí, quiere evitar tener muchas solicitudes de imágenes pequeñas. Combinarlos en un sprite permite que se los busque en una solicitud http.
cuando el sprite es demasiado grande?
Es realmente el total de todas las solicitudes que desea ver. La única forma de que el sprite sea demasiado grande es si la suma de sus partes (que es exactamente lo que el sprite es) es demasiado grande para empezar.
Un sprite CSS es demasiado grande cuando se incluye algo más que los elementos esenciales de la IU. Estas son pequeñas imágenes complementarias, como iconos y logotipos, donde la compresión no daña demasiado la calidad. Dado que todas esas imágenes habrían sido cargadas independientemente, no está peor que solicitarlas individualmente. Si tarda demasiado en cargarse, tu problema no depende de los sprites, sino de la compresión de tus imágenes.
Google maps usa [256x256] px images.
En cuanto a los sprites, que debería salir la discusión sobre el uso de memoria por debajo de esta entrada del blog también: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
Mi consejo:
Si está utilizando PNG para el tipo de imagen de sprite, es útil recordar que cada fila generalmente se comprime (desinfla) independientemente de las otras filas.
Para ayudar con el equilibrio del número de sprites/tamaño de imagen, intente colocar sprites similares uno junto al otro en sentido horizontal en lugar de verticalmente para aprovechar la compresión.
PNG también es compatible con "predictores" que solo almacenan los deltas entre un valor predicho (basado en las filas precedentes y los píxeles anteriores en la misma fila) y el valor real.
Busque un buen editor de imágenes que le permita establecer diferentes configuraciones de compresión del predictor PNG (u optimice automáticamente) para encontrar la configuración que sea mejor para su imagen.
"Encuentra un buen editor de imágenes que te permita establecer diferentes ajustes de compresión del predictor PNG (u optimizaciones automáticas) para encontrar la configuración que mejor se adapte a tu imagen". En la práctica esto significa Guardar para web en Photoshop. – Wolfr
'pngcrush' vale la pena: he visto reducir el tamaño de los archivos PNG guardados con el comando Guardar para Web de PhotoShop. Fuerza brutalmente el problema, probando muchas configuraciones de compresión diferentes y viendo los resultados en el archivo más pequeño. Acorn en Mac usa pngcrush automáticamente cuando guarda PNG para la web. –
Para una compresión png rápida y a prueba de balas en OS X, consulte ImageOptim: http://imageoptim.com/ –
Si tiene fotos de 10 megapíxeles como elemento estático en cada página de su sitio, de todos modos eso es una locura. –
¿Qué pasa si es la página de inicio de un fotógrafo con muestras de trabajo? – User
@Mastermind: Si yo fuera el fotógrafo, aún haría imágenes más pequeñas para el sitio web, reservando las imágenes full-rez para una descarga separada y explícita. Pero así soy yo ... – RolandTumble