la imagen de fondo repitiendo página web - tamaño vs velocidad

Question

Me preguntaba si alguien ha hecho alguna prueba con imágenes de fondo. normalmente creamos un fondo que se repite al menos en una dirección (X o Y o ambos).

Ejemplo
Digamos que tenemos un gradiente de fondo que se repite en la dirección X. altura gradiente es 400 píxeles. Tenemos varias posibilidades. Podemos crear como imagen pequeña como sea posible (anchura 1 pixel y 400 píxeles de alto) o podemos crear una imagen más grande con la altura de 400 píxeles.

Observación
Desde gradiente es de 400 píxeles de alto que probablemente no elegir el formato GIF, ya que sólo puede almacenar 256 colores adaptables. Tal vez por enaough si nuestro gradiente es sutil, ya que no tiene que muchos, pero por lo demás bastante probable que la imagen de un almacén de imágenes PNG de 24 bits como para conservar los detalles de gradiente completa.

dilema
¿Hay que crear una imagen de 1 × tamaño de 400 píxeles que se repetirá n veces horizontalmente o debemos crear una imagen de 100 x 400 tamaño de píxeles para acelerar la representación en el navegador y tener un archivo de imagen más grande tamaño.

Así. Tamaño de imagen frente a la velocidad de renderizado? ¿Qué gana? A alguien le interesa probar esto? Con respecto a la velocidad del navegador de representación y la posible imagen pequeña redibujar el parpadeo ...

Answer 1

La velocidad de renderizado es el cuello de botella aquí, ya que los azulejos más grandes se pueden poner en la caché del navegador.

De hecho, he intentado esto para los principales navegadores, y al menos algunos de los hacía notablemente más lento en muy pequeñas baldosas.

Así que si el aumento del tamaño de mapa de bits no resulta en ridículamente grandes tamaños de archivo, sin duda me ir con eso. Pruebe usted mismo y ver. (Recuerde incluir IE6, ya que todavía muchas personas están atrapadas con él).

Usted puede ser capaz de encontrar un buen equilibrio entre el tamaño del mapa de bits y tamaño de archivo, pero en general me gustaría probar 50x400, 100x400, 200x400 y 400x400 píxeles incluso.

Answer 2

Me di cuenta de que puede haber una gran diferencia en el rendimiento de la representación del navegador, si tiene una imagen de fondo con un ancho de 1 píxel y que la repita. Es mejor tener una imagen de fondo con dimensiones ligeramente más grandes. Por lo que una imagen con un ancho de 100 px rinde mucho mejor en el navegador. Esto es especialmente entra en juego cuando se utiliza una imagen de fondo se repite en una capa desplazable en su sitio web. La arrastrar el rendimiento es bastante malo con una imagen de fondo a menudo repetida.

Answer 3

Me gustaría señalar que el costo de envío de hasta un extra pocas filas (1-2 único ejemplo aquí) .8k - 1,6 kb (si puede salirse con 8 bits) más como 2,4 kb - 4,0 kb para 24 bits

2 píxeles columnas más medios las iteraciones necesarias requeridas para blit el fondo en es cortado a 1/3 para un máximo de 1,6 kb (8 bits) o 4 kb (de 24 bits)

incluso 1 columna adicional reduce a la mitad la blitting requerido a la mitad de la anchura del elemento.

Si el fondo ha hecho en menos de un segundo para un módem 56.6k Creo que es lo suficientemente delgado.

Answer 4

las pequeñas dimensiones de una imagen tienen un impacto negativo en la representación, estoy seguro de que cualquier navegador decente blit la imagen internamente un par de veces antes de embaldosar.

Una vez dicho esto, yo no tiendo a usar 1 pixel dimensiones de la imagen para que pueda ver la imagen con claridad sin cambiar su tamaño. la compresión PNG es lo suficientemente bueno para manejar este a muy bajo costo al tamaño del archivo, en la mayoría de las situaciones.

Answer 5

Me gustaría poner dinero en el cuello de botella es la descarga de imágenes en lugar del motor de renderizado hacer las baldosas, por lo que ir a la opción de ancho de 1 píxel.

Además, el PNG de 24 bits es redundante, ya que todavía estás consiguiendo solamente 8 bits por canal (rojo, verde y azul).

Answer 6

general, yo prefiero ir en el medio, 1pixel amplia probable que su gradiente de parecer un poco confuso, pero se puede hacer algo como la anchura 5pixel que le da suficiente espacio para el gradiente de mantener la coherencia y claridad a través de la página .. pero me gustaría sugerimos que usted pueda añadir más patrones e imágenes a una sola imagen y luego utilizar el posicionamiento de fondo ( CSS sprites ) a la posición de ellos debido a descarga una sola imagen de 50kb por ejemplo tomaría menos tiempo comapared a 5 40kb imágenes desde el navegador hace menos peticiones al servidor ...

Answer 7

No he referenciado esto, pero me gustaría apostar que en la mayoría de las computadoras modernas de la prestación no será un problema mientras que uno siempre quiere ahorrar en el tiempo de la imagen descarga. Voy a menudo para el tipo 1 píxel de gráficos.