pagina con imagen de fondo muy pesada

[claudio27265]

hoala amigos, quiero hacer una pagina que tenga como imagen de fondo una imagen que ocupe toda la pagina y que tenga buena resolucion para que sea lo mas impactante posible. hice una imagend de 1000 x 2000 en formato png pero la pagina se hace lenta para cargar y eso no le gusta a dios digo, a google...
alguien podria darme alguna idea? quiza haya algun formato mas conveniente? o hacer la imagen mas chica y ampliarla con alguna funcion (yo uso dreamweaver), gracias!!

[Carlangueitor]

Depende de la imagen podrías usar otro formato, JPG por ejemplo. Si la pones más chica y luego la amplias definitivamente vas a perder calidad. Así que si quieres una imagen tan grande ve haciéndote a la idea de que va a pesar,

saludos.adios:

[cuasatar]

Hola, iba a empezar un nuevo tema pero al ver que la pregunta es similar quisiera saber si alguien me puede colaborar y de paso soluciona la duda de claudio27265 al tiempo .

Yo tambien quiero diseñar una pagina donde la imagen sea grande a modo de ejemplo algo como esto http://www.bobadilium.com/ (Igual solo me refiero a los dibujos, no la parte animada del jquery que usan), como ven tiene una precarga para colocar toda la imagen que es muy pesada.

Sin embargo alguna vez cuando lei los manuales de fireworks 8 (hace mil años) uno podia hacer la importación del diseño grafico para montar el html y por obra y gracia del espíritu santo al importar el diseño el dibujo se dividia en muchos fragmentos que hacian mas óptimo la carga de la página.

Mi pregunta es si en css se puede hacer eso (y obviamente saber como se debe realizar) o se necesita de otro lenguaje de programación para realizar algo parecido y en lugar de cargar una sola imagen muy grande de fondo se cargaran pequeñas imagenes que formaran el fondo completo de una manera mas eficiente.

Gracias de antemano si alguien nos puede colaborar a salir de la duda.

[IsaBelM]

puedes códificar la imagen en base64

[Carlangueitor]

IsaBelM, esa es una mala práctica y más para imágenes pesadas, ya que al venir embedidas en el código, no se cachean y cada vez que se cambia de página se tiene que descargar toda la información.

Saludos

[IsaBelM]

tienes razón en lo que comentas. pero mi respuesta iba enfocada hacia el ejemplo de cuasatar, en el que no hay redirección

[kseso?]

Y la cuestión es ¿es enteramente necesario una imagen tan grande (1Mx2M) pensando en buena resolución?
Si fea queda una pequeña escalada a más, igual ocurre con las grandes en resoluciones pequeñas.

Así que, creo, la mejor opción es buscar un tamaño intermedio y utilizar algunas de las técnicas para mostrarlas cubriendo toda la pantalla.
Y ya sean altas resoluciones o bajas tener un margen de calidad aceptable tanto hacia arriba como hacia abajo.

De nada le servirá primar la calidad de +800px en adelante si el 50% de los visitantes cerrarán la página por lenta antes de haber visto la imagen.

Dos técnicas o formas de lograr un fondo 100% sin necesidad de utilizar archivos tan pesados. 1 basada en css2.1 y la otra en css3.
Esas imágenes son de 480x300px. El pájaro de 14.9kb y el reptil de 27.4kb.

[tapuntdesign]

Cambia la profundidad de color de 32bits, suponiendo que fuera tal, a 8 bits. El true color no es tan necesario para la Web. Y según qué caso, como en fotografías y no gráficos, puedes utilizar JPEG. Cuando te sea posible juega con la transparencia alfa y de índice. Y también utiliza alguna herramienta de compresión.

Y sí se pueden cachear las imagenes en base64. Si es necesario, simplemente se insertan inline en un css externo y se envían las cabeceras HTTP de control de caché usando esta configuración del mod_expires en Apache

Código Apache:

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
 

Por tanto, cualquier css del sitio se leerá del caché. Luego, como el tamaño de la imagen embebida suele ser superior a la imagen original, se compensa un poco activando el mod_deflate por a2enmod

Código Apache:

<Location /var/www>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/x-js text/css
</Location>
 

Un saludo.