html - toda - Repetir imagen de fondo del sitio web-tamaño vs velocidad
como poner una imagen de fondo en html sin mosaico (7)
Descubrí que puede haber una gran diferencia en el rendimiento de renderizado 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 más grandes. Así que una imagen con un ancho de 100px se desempeña 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 repetida a menudo.
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 (xo y o ambos).
Ejemplo
Digamos que tenemos un fondo degradado que se repite en la dirección X. La altura del gradiente es de 400px. Tenemos varias posibilidades. Podemos crear la imagen más pequeña posible (1 píxel de ancho y 400 píxeles de alto) o podemos crear una imagen más grande con una altura de 400 píxeles.
Observación
Debido a que el gradiente tiene 400 píxeles de alto, es probable que no escojamos el formato GIF, ya que solo puede almacenar 256 colores adaptables. Tal vez sea suficiente si nuestro gradiente es sutil, ya que no tiene tantos, pero de lo contrario probablemente preferiremos almacenar la imagen como una imagen PNG de 24 bits para preservar el detalle completo del gradiente.
Dilema
Si creamos una imagen del tamaño de 1 × 400 px que se repetirá n veces horizontalmente o si creamos una imagen de 100 × 400 px para acelerar la representación en el navegador y tener un tamaño de archivo de imagen más grande.
Asi que. ¿Tamaño de imagen vs. velocidad de renderizado? ¿Cuál gana? ¿A alguien le importa probar esto? Con respecto a la velocidad de renderizado del navegador y el posible cambio de imagen pequeña ...
La velocidad de representación es el cuello de botella aquí, ya que los mosaicos más grandes se pueden colocar en el caché del navegador.
De hecho, he intentado esto para los principales navegadores, y al menos algunos de ellos se han vuelto notablemente lentos en mosaicos muy pequeños.
Entonces, si aumentar el tamaño del mapa de bits no da lugar a tamaños de archivo ridículamente grandes, definitivamente me quedaría con eso. Pruébalo tú mismo y verás. (Recuerde incluir IE6, ya que todavía muchas personas están atrapadas con él).
Es posible que pueda 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.
Me gustaría señalar que por el costo de enviar unas cuantas filas adicionales (solo 1-2 de aquí) .8k - 1.6kb (si puede salirse con 8 bits) más como 2.4kb - 4.0kb para 24 bits
Las columnas de 2 píxeles más significan que las iteraciones requeridas para borrar el fondo se reducen a 1/3 para hasta 1.6kb (8 bits) o 4kb (24 bits)
incluso 1 columna adicional reduce a la mitad la cantidad necesaria para reducir hasta la mitad del ancho del elemento.
Si el fondo se realiza en menos de un segundo para un módem de 56.6k, creo que es lo suficientemente delgado.
No lo he evaluado, pero apostaría a que en la mayoría de las computadoras modernas el renderizado no será un problema, mientras que siempre querrá ahorrar en el tiempo de descarga de la imagen. A menudo voy por el tipo de gráficos 1px.
Por lo general, prefiero ir en el medio, 1 píxel de ancho probablemente hará que tu gradiente parezca un poco confuso, pero puedes hacer algo como el ancho de 5 píxels que le da suficiente espacio al gradiente para mantener la coherencia y claridad en toda la página ... pero te sugiero que puedas agregue más patrones e imágenes a una sola imagen y luego use la posición de fondo ( sprites css ) para colocarlos porque descargar una sola imagen de, por ejemplo, 50 kb tomaría menos tiempo que 5 imágenes de 40 kb ya que el navegador realiza menos solicitudes al servidor ...
Puse dinero en el cuello de botella siendo la descarga de imágenes en lugar del motor de renderizado haciendo el mosaico, así que vaya a la opción de 1 píxel de ancho.
Además, el PNG de 24 bits es redundante, ya que solo obtienes 8 bits por canal (rojo, verde y azul).
Si las pequeñas dimensiones de una imagen tienen un impacto negativo en la representación, estoy seguro de que cualquier navegador decente borraría la imagen internamente unas cuantas veces antes de archivar.
Dicho esto, tiendo a no usar dimensiones de imagen de 1 píxel, por lo que puedo ver la imagen claramente sin cambiar su tamaño. La compresión PNG es lo suficientemente buena para manejar esto a un costo muy pequeño para el tamaño del archivo, en la mayoría de las situaciones.