Foros del Web » Creando para Internet » CSS »

maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Estas en el tema de maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs?? en el foro de CSS en Foros del Web. Hola, la pregunta en cuestión es la forma de maquetar una web. Partiendo de que sabemos que cada web es un mundo pero por ejemplo, ...
  #1 (permalink)  
Antiguo 14/02/2009, 16:57
Axo
 
Fecha de Ingreso: abril-2003
Ubicación: Virtual
Mensajes: 953
Antigüedad: 14 años, 7 meses
Puntos: 7
maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Hola, la pregunta en cuestión es la forma de maquetar una web. Partiendo de que sabemos que cada web es un mundo pero por ejemplo, supongamos que tenemos una tabla con un header que se puede partir en tres trozos. Derecho, centro y fondo. El centro se repite referente al diseño, es decir algo asi:

[]_________________________[]

[] son los laterales
_________ es la imagen pero de igual característica hasta llegar al otro [] que cambiaria.

Mi pregunta es ¿es mucho mejor partirlo en tres? Quedarían así las imagenes:

[] _ [] o mantener en una solo, así:

[]_________________________[]

Saludos. Espero haberme explicado bien.
  #2 (permalink)  
Antiguo 14/02/2009, 17:11
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

evidentemente que 1 de 200kb vs 3 de 11kb, es mejor las 3 img.
A lo que yo me refería en el post que escribistes en ofertas de empleo, es que es mejor 1 de 33kb que 3 de 11kb, porque la cantidad de información es la msima pero los pedidos al servidor son menores en la primera situación
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 14/02/2009, 17:45
Avatar de jeybi  
Fecha de Ingreso: julio-2008
Ubicación: Mexico
Mensajes: 130
Antigüedad: 9 años, 4 meses
Puntos: 10
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Puedes incluso maquetar con 2 una para [] [] y otra para _. Y asumiendo que son GIFS y tienen colores similares el peso podria reducicirse a un 75% 16.5 Kb o menos y solamente 2 peticiones al servidor.
Eso calro si hablamos de ponerlas como background en css.
  #4 (permalink)  
Antiguo 14/02/2009, 18:00
 
Fecha de Ingreso: junio-2007
Ubicación: España
Mensajes: 6
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Sin entrar en muchos detalles te comentaré que el protocolo tcp/ip que es el que se emplea para intercambiar datos en internet crea unas ventanas de comunicación entre el servidor y el cliente. Esas ventantas determinan la cantidad de datos que caben por ellas (en kb.)

Incluso si las imágenes fuesen del mismo tamaño, es decir 1 de 200kb. y tres de 66,6kb. es mejor tres porque las peticiones que se realizan al servidor para cargar una página no son secuenciales.

Es decir que el servidor no espera a que esté cargado un recurso para enviarnos otro (una imagen, un fichero css, javascript....) por lo tanto podemos tener viajando hacia nosotros las tres imágenes a la vez: tres ventanas de 5kb. es más rápido que una.

Influyen muchos factores y variables como para que esta norma se cumpla al 100% pero la mayoría de las veces será cierta.

Saludos,

Jorge
galeriacss.com
  #5 (permalink)  
Antiguo 14/02/2009, 18:53
Axo
 
Fecha de Ingreso: abril-2003
Ubicación: Virtual
Mensajes: 953
Antigüedad: 14 años, 7 meses
Puntos: 7
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Cita:
Iniciado por jorgegorka Ver Mensaje
Sin entrar en muchos detalles te comentaré que el protocolo tcp/ip que es el que se emplea para intercambiar datos en internet crea unas ventanas de comunicación entre el servidor y el cliente. Esas ventantas determinan la cantidad de datos que caben por ellas (en kb.)

Incluso si las imágenes fuesen del mismo tamaño, es decir 1 de 200kb. y tres de 66,6kb. es mejor tres porque las peticiones que se realizan al servidor para cargar una página no son secuenciales.

Es decir que el servidor no espera a que esté cargado un recurso para enviarnos otro (una imagen, un fichero css, javascript....) por lo tanto podemos tener viajando hacia nosotros las tres imágenes a la vez: tres ventanas de 5kb. es más rápido que una.

Influyen muchos factores y variables como para que esta norma se cumpla al 100% pero la mayoría de las veces será cierta.

Saludos,

Jorge
galeriacss.com
Me inclino en cierto modo para las otras respuestas, en maqutarlo en una o dos. Partiendo del ejemplo que puse.

Lo que dices, tiene una cierta lógica pero entran factores tales como la RAM del servidor el CENTRO DE DATOS, los PROCESADORES, la situación del DATA CENTER... etc... nooo? Tambien el ordenador del visitante, si es un pc lento o antiugo creo que mientras menos datos le envies mejor, por lo que la reducción de imagenes le hara la carga más fácil....

es más, un ejemplo que se me ocurre cuando una página tiene muchas fotos aveces no se llegan a cargar todas las fotos.... esto puede deberse a que al tener tantos datos que descargar no puede gestionar todos por igual puesto que llega un momento de saturación....
  #6 (permalink)  
Antiguo 14/02/2009, 19:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Cita:
Iniciado por jorgegorka Ver Mensaje
tres ventanas de 5kb. es más rápido que una.
¿Seguro que tres ventanas de 5ks son mejor que una de 15ks? (dices 3 de 5 mejor que una de 5, pero no entiendo tu razonamiento: ¿con una no aprovechas el ancho disponible?).

Hay que tener en cuenta que el protocolo no sólo lleva la información de los paquetes que está transmitiendo, por lo que juraría que en 3 ventanas de 5 cabe menos que en una de 15.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 21/02/2009, 06:44
 
Fecha de Ingreso: junio-2007
Ubicación: España
Mensajes: 6
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Seguro que tres ventanas de 5ks son mejor que una de 15ks? (dices 3 de 5 mejor que una de 5, pero no entiendo tu razonamiento: ¿con una no aprovechas el ancho disponible?).

Hay que tener en cuenta que el protocolo no sólo lleva la información de los paquetes que está transmitiendo, por lo que juraría que en 3 ventanas de 5 cabe menos que en una de 15.
Efectivamente en una ventana de 15Kb. podemos enviar segmentos tcp mayores y funcionará más rápido que tres de 5kb.

Pero lo "normal" es que las ventanas de datos que el servidor establezca con nosotros tengan el mismo tamaño. Por lo tanto es mejor establecer varias conexiones para recibir más datos simultáneamente.

Esto también se aplica a ficheros css y javascript "pesados".

De todas formas todo esto que digo está bien para ficheros grandes. No vamos la lograr ninguna optimización dividiendo un fichero css de 4kb. en dos de 2kb.
  #8 (permalink)  
Antiguo 21/02/2009, 06:48
Avatar de Tombar  
Fecha de Ingreso: junio-2008
Ubicación: /home/tombar
Mensajes: 198
Antigüedad: 9 años, 6 meses
Puntos: 11
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

A ver.... hay 3 puntos aqui a tener en cuenta :)

Performance: 1 request contra 3 request

Entiendo lo que dices Jorgegorka de que 3 request en simultaneo es mas rapido que un request largo, no estoy convencido de ello x lo que voy a armar un demo para medirllo, prometo postearlo :)

Loading: 1 request contra 3 request

En cuanto a carga del servidor, es mucho mas eficiente hacer un solo request que 3 request, no olvidemos que apache para cada request apache tiene que procesarlo, y luego devolver headers con un monton de informacion extra que no precisamos para servir una imagen, totalmente overkill :)

Es por ello que sitios con muchas visitas usan Content Delivery Network para servir contenido estatico y servidores lightHttp o similares en ves de apache.

Semantica y CSS:

Lo dejo para q responda Osiris que es el guru de esto :) en lo personal, aprendi que la mejor forma es hacerlo en 2 imagenes =) si si, ni en 1 ni en 3... en 2^^

una imagen seria x ejemplo el border izquierdo y contendio y la otra seria solamente el otro border... esto permite hacer boxes de distintos tamanos con solo 2 imagenes.

imagen del border y contendido imagen del otro borde
[|||||||||||||||||||||||||||||||||||||||||||||||||| y |]



Voy a hacer el demo para probar lo que dice Jorgegorka y vuelvo...
  #9 (permalink)  
Antiguo 21/02/2009, 07:11
 
Fecha de Ingreso: julio-2008
Mensajes: 15
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

En el supuesto de 1 de 15kbs y 3 de 5kbs, me inclino por la opcion de una de 15kbs
  #10 (permalink)  
Antiguo 23/02/2009, 02:52
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

oye y como hacen para hacer eso de 1 imagen 15kbps usan esa tecnica llamada sprite css no?

gracias soy nuevo
  #11 (permalink)  
Antiguo 23/02/2009, 12:24
 
Fecha de Ingreso: diciembre-2007
Mensajes: 131
Antigüedad: 10 años
Puntos: 6
Respuesta: maquetar con 1 imagen de 200 kbs mejor que con 3 de 11 kbs??

Los navegadores web transmiten en simultaneo solo 2 archivos provenientes del mismo servidor. Por lo tanto, mientras menos javascripts, stylesheets e imagenes tengamos, mas rapido cargara nuestro sitio.

Una solucion a este problema (usada por facebook, por ejemplo, que tiene un ejercito de javascript detras de su simplicidad) es hostear los diferentes archivos en diferentes sitios. Por ejemplo:

<script src="server1.com/archivo.js"></script>
<script src="server1.com/archivo2.js"></script>
<script src="server2.com/archivo3.js"></script>
<script src="server2.com/archivo4.js"></script>

etc.


En resumen: 1 'ventana' de 15kb carga en velocidad, similar a 3 'ventanas' de 5kb. La diferencia se hace en cantidad, ya que mientras mas 'ventanas' tengamos, mas tardaran los items siguientes de la lista de carga.
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 21:37.