Foros del Web » Creando para Internet » CSS »

pagina con imagen de fondo muy pesada

Estas en el tema de pagina con imagen de fondo muy pesada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2012, 12:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 11 años, 1 mes
Puntos: 0
pagina con imagen de fondo muy pesada

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!!
  #2 (permalink)  
Antiguo 10/04/2012, 12:12
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: pagina con imagen de fondo muy pesada

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:
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 10/04/2012, 12:34
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 10 años, 6 meses
Puntos: 181
Respuesta: pagina con imagen de fondo muy pesada

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.
__________________
Blog de humor http://elcuasatar.net63.net/

Última edición por cuasatar; 10/04/2012 a las 12:42
  #4 (permalink)  
Antiguo 10/04/2012, 14:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 7 meses
Puntos: 1011
Respuesta: pagina con imagen de fondo muy pesada

puedes códificar la imagen en base64
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 10/04/2012, 15:00
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: pagina con imagen de fondo muy pesada

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
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 10/04/2012, 15:09
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 7 meses
Puntos: 1011
Respuesta: pagina con imagen de fondo muy pesada

tienes razón en lo que comentas. pero mi respuesta iba enfocada hacia el ejemplo de cuasatar, en el que no hay redirección
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 10/04/2012, 15:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 14 años, 7 meses
Puntos: 539
Respuesta: pagina con imagen de fondo muy pesada

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 10/04/2012 a las 15:21
  #8 (permalink)  
Antiguo 11/04/2012, 03:24
 
Fecha de Ingreso: julio-2011
Mensajes: 83
Antigüedad: 10 años, 6 meses
Puntos: 24
Respuesta: pagina con imagen de fondo muy pesada

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:
Ver original
  1. ExpiresActive On
  2. 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:
Ver original
  1. <Location /var/www>
  2.     AddOutputFilterByType DEFLATE text/html text/plain text/xml text/x-js text/css
  3. </Location>

Un saludo.

Etiquetas: dreamweaver, edición, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:28.