html - que - ¿Cuándo es un Sprite CSS demasiado grande?
sprite html css (8)
¿El propósito principal de los sprites es reducir las solicitudes de http hechas al servidor para elementos gráficos en una página? O quieres probar y ajustar tantos elementos al sprite como sea posible.
Supongo que lo que pregunto es: ¿cuándo es el sprite demasiado grande?
¿El propósito principal de los sprites es reducir las solicitudes de http hechas al servidor para elementos gráficos en una página?
Sí, desea evitar tener muchas solicitudes de imágenes pequeñas. Combinarlos en un solo sprite les permite ser recuperados en una solicitud http.
¿Cuándo es el sprite demasiado grande?
Es realmente el total de todas las solicitudes que desea ver. La única manera de que el sprite sea demasiado grande es si la suma de sus partes (que es exactamente lo que es el sprite) es demasiado grande para empezar.
Con respecto a los sprites, definitivamente deberías revisar la discusión sobre el uso de la memoria debajo de esta publicación del blog: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
Mi consejo:
- Solo sprite las filas de iconos, los botones y las imágenes que se repiten (por ejemplo, un cuadro de degradado de esquinas redondeadas).
- Dejar todo lo demás solo
- Mantenga sus imágenes a menos de 500x500 o 100kb y deje tan poco espacio sin uso como sea posible. Usa .png o .gif dependiendo de la situación
Es demasiado grande cuando el usuario tiene que esperar a que se descargue el archivo antes de poder utilizar la página.
Google Maps utiliza [256x256] imágenes px.
Puede empaquetar todos los elementos pequeños 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, agruparlas sería una locura.
Sí, el propósito principal es reducir las solicitudes (y por lo tanto el tiempo de carga). Otra ventaja es que solo tiene que preocuparse por una imagen para que se almacene en caché correctamente. Sugerencia: use las imágenes PNG ya que su compresión controla mejor las áreas blancas grandes ("vacías").
Si está utilizando PNG para el tipo de imagen de sprite, es útil recordar que cada fila generalmente está comprimida (deflactada) independientemente de las otras filas.
Así que para ayudar con el equilibrio del número de sprites / tamaño de imagen, intente colocar sprites similares uno al lado del otro en forma horizontal en lugar de vertical, para aprovechar la compresión.
PNG también admite "predictores" que solo almacenan los deltas entre un valor predicho (basado en las filas anteriores y los píxeles anteriores en la misma fila) y el valor real.
Encuentre un buen editor de imágenes que le permita establecer diferentes configuraciones de compresión del predictor PNG (o que se optimice automáticamente) para encontrar la mejor configuración para su imagen.
Un sprite CSS es demasiado grande cuando se incluye todo menos los elementos esenciales de la interfaz de usuario. Estas son pequeñas imágenes complementarias como iconos y logotipos donde la compresión no daña la calidad demasiado. Dado que todas esas imágenes se habrían cargado de manera independiente, no está peor que solicitarlas individualmente. Si la carga demora demasiado tiempo, su problema no se basa en sprites, sino en la compresión adecuada de sus imágenes.