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

Axo · #1 (**permalink**) 14/02/2009, 16:57

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.

webosiris · #2 (**permalink**) 14/02/2009, 17:11

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

jeybi · #3 (**permalink**) 14/02/2009, 17:45

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.

jorgegorka · #4 (**permalink**) 14/02/2009, 18:00

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

Axo · #5 (**permalink**) 14/02/2009, 18:53

Cita:

Iniciado por jorgegorka

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....

Mikmoro · #6 (**permalink**) 14/02/2009, 19:28

Cita:

Iniciado por jorgegorka

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.

jorgegorka · #7 (**permalink**) 21/02/2009, 06:44

Cita:

Iniciado por Mikmoro

¿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.

Tombar · #8 (**permalink**) 21/02/2009, 06:48

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...

jandro5 · #9 (**permalink**) 21/02/2009, 07:11

En el supuesto de 1 de 15kbs y 3 de 5kbs, me inclino por la opcion de una de 15kbs

TylinTylyn · #10 (**permalink**) 23/02/2009, 02:52

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

gracias soy nuevo

Hildegaard · #11 (**permalink**) 23/02/2009, 12:24

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.