Optimizar carga del fondo de pantalla en Real Valladolid News

Al entrar a Real Valladolid News primero se ve el fondo morado y después carga el fondo de pantalla ¿Como puedo evitar esto y que salga de primeras el fondo de pantalla? He probado a reducir considerablemente el tamaño de la imagen y nada...

Gracias y un saludo.

Hola,

Es porque el servidor piensa mucho en como leer esa imagen. Creo que la solución a tu problema puede ser el siguiente código CSS3 que te voy a dejar puesto a continuación. Eso si, usa una imagen mucho mas pequeña. Quizá una de 300 de ancho y 300 de alto o algo por el estilo, no tienen por que ser numeros redondos. El código es el siguiente:

body{
background: url(imagen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Y dirás: "Oye Ángel, y ese código, ¿Que hace?". Muy sencillo. Adapta la imagen a la pantalla del cliente de una manera bastante limpia y optimiza la carga. ¿Porqué no la pruebas y nos dices el resultado en la comparativa?.

Un saludo,
Ángel.

Alvaropcela dijo:

Al entrar a Real Valladolid News primero se ve el fondo morado y después carga el fondo de pantalla ¿Como puedo evitar esto y que salga de primeras el fondo de pantalla? He probado a reducir considerablemente el tamaño de la imagen y nada...

Gracias y un saludo.

Hacer clic para expandir...

Te Recomiendo que le baje los KBs al fondo.

te recomiengo que optimizes tu web para evitar cosas como esta

es mejor que carge un color en vez de una imagen, es meno pesado.

¿Y como optimizo la web?

Ciao

Graciano dijo:

Te Recomiendo que le baje los KBs al fondo.

Hacer clic para expandir...

y mucho, esta en 2.700 kb deberias dejarlo como maximo en 50 kb

Puedes hacerlo editando la magen con un programa de gestion de imagenes (photoshop, gimp, etc...) y usando la funcion guardar para web.

claro 50kb y te cargaria super rapido.

La imagen de fondo que estas usando pesa casi 3 megas, nunca cargara antes que el fondo. De hecho ninguna imagen cargara nunca antes que el color de fondo, pero si puedes hacer que el tiempo en el que se ve el fondo sea mucho mas reducido.

Lo que debes hacer es usar una imagen mucho mas pequeña, un patron de textura y que se repita por toda la pantalla.
Con una imagen de 50px*50px podrias lograr casi el mismo resultado que con tu imagen de 3600px*3600px :S

Por ejemplo busca patrones en esta pagina ava7 patterns /// 1820 free seamless background patterns
He descargado recien uno para probar y no pesan ni 10k (debes descargar el de menor resulucion que te ofrecen en cada caso)

y luego en tu css usarlo asi:

{
background-image:url('url de tu imagen');
}

por defecto la imagen se repite horizontalmente y verticalmente