Repetición de la imagen de fondo del sitio web - tamaño frente a la velocidad

Question

Me preguntaba si alguien ha realizado 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. La altura del gradiente es 400px. Tenemos varias posibilidades. Podemos crear una imagen lo más pequeña posible (1 píxel de ancho y 400 de alto) o podemos crear una imagen más grande con 400 píxeles de altura.

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 eso sea claro si nuestro gradiente es sutil, ya que no tiene tantos, pero de lo contrario probablemente almacenaremos la imagen como una imagen PNG de 24 bits para preservar el detalle completo del gradiente.

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 tamaño de archivo de imagen más grande.

So. Tamaño de la imagen frente a la velocidad de procesamiento? ¿Cuál gana? ¿Alguien se preocupa por probar esto? Con respecto a la velocidad de renderizado del navegador y la posible imagen pequeña redibujar el parpadeo ...

Answer 1

La velocidad de renderizado es el cuello de botella aquí, ya que las fichas 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 ellos se han vuelto notablemente lentos en fichas muy pequeñas.

Así que si aumentar el tamaño del mapa de bits no resulta en ridículamente archivos de gran tamaño, definitivamente me iría con eso. Pruébelo usted mismo y vea. (Recuerde incluir IE6, ya que todavía muchas personas se quedan con él).

Puede lograr un buen equilibrio entre el tamaño del mapa de bits y el tamaño del archivo, pero en general probaría 50x400, 100x400, 200x400 e incluso 400x400 píxeles.

Answer 2

Pondría el dinero en el cuello de botella siendo la descarga de imágenes en lugar del motor de renderizado que hace el mosaico, así que elija la opción de 1 píxel de ancho.

También el PNG de 24 bits es redundante ya que solo obtiene 8 bits por canal (rojo, verde y azul).

Answer 3

Por lo general, prefiero ir por el medio, 1pixel de ancho probablemente hará que su gradiente parezca un poco confuso pero puede hacer algo como 5 píxeles de ancho que da suficiente espacio al degradado para mantener la consistencia y claridad en la página ... pero sugeriría que puede agregar más patrones e imágenes a una sola imagen y luego usar el posicionamiento en segundo plano (css sprites) para colocarlos porque descargar una sola imagen de digamos 50kb tomaría menos tiempo en comparación con 5 imágenes de 40kb ya que el navegador realiza menos solicitudes al servidor ...

Answer 4

Si las pequeñas dimensiones de una imagen tienen un impacto negativo en la representación, estoy seguro de que cualquier navegador decente enfadaría la imagen internamente varias veces antes del mosaico.

Dicho esto, tiendo a no utilizar dimensiones de imagen de 1 píxel, por lo que puedo ver la imagen claramente sin cambiar el tamaño. La compresión PNG es lo suficientemente buena para manejar esto a un costo muy bajo para el tamaño del archivo, en la mayoría de las situaciones.

Answer 5

No he comparado esto, pero apostaría a que en la mayoría de las computadoras modernas la renderización no será un problema, mientras que siempre quiere ahorrar en el tiempo de descarga de la imagen. A menudo voy por el tipo de gráficos 1px.

Answer 6

Descubrí que puede haber una gran diferencia en el rendimiento de reproducción del navegador, si tiene una imagen de fondo con un ancho de 1px y la repite. Es mejor tener una imagen de fondo con dimensiones ligeramente mayores. Por lo tanto, una imagen con un ancho de 100 px funciona mucho mejor en el navegador. Esto entra especialmente en juego cuando utiliza una imagen de fondo repetida en una capa que se puede arrastrar en su sitio web. El rendimiento de arrastre es bastante malo con una imagen de fondo que se repite a menudo.

Answer 7

Me gustaría señalar que por el costo de enviar un par de filas extra (ejemplo de 1-2 aquí) .8k - 1.6kb (si puedes salirte con 8 bits) más como 2.4kb - 4,0 kb para 24 bits

2 columnas de píxeles más significa que 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 extra reduce a la mitad el blitting requerido hasta la mitad del ancho del elemento.

Si el fondo se hace en menos de un segundo para un módem de 56.6k, creo que es lo suficientemente delgado.