Foros del Web » Creando para Internet » HTML »

Imágenes ¿proporcionales o fijas?

Estas en el tema de Imágenes ¿proporcionales o fijas? en el foro de HTML en Foros del Web. Hola amigos, Os traigo un asunto que me inquieta un poco. Siempre se recomienda utilizar tamaños proporcionales para las fuentes y algunos divs... pero ¿qué ...
  #1 (permalink)  
Antiguo 14/09/2011, 04:14
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 9 meses
Puntos: 36
Imágenes ¿proporcionales o fijas?

Hola amigos,

Os traigo un asunto que me inquieta un poco. Siempre se recomienda utilizar tamaños proporcionales para las fuentes y algunos divs... pero ¿qué pasa con las imágenes? ¿Es recomendable utilizar un tamaño fijo para las imágenes (claro está que depende el caso) o mejor utilizar tamaños proporcionales?

Y ahora os explico mi problema. El caso es que me gustaría utilizar imágenes proporcionales en mi web, creo que todas las resoluciones se merecen igualdad de trato (xD). Mi propuesta es la siguiente:

- Partir de imágenes suficientemente grandes, las cuales se vean bien(no pixeladas), para una resolución de pantalla de, por ejemplo, 1440x900(el 6,85% de las pantallas mundiales según statcounter).

- A partir de la imágenes anteriores y aplicando tamaños proporcionales vemos que para resoluciones inferiores las imágenes se reescalarán y verán bien. Hasta aquí el mundo es maravilloso.

- Pero... las imágenes anteriores tienen un gran problema, ocuparán un tamaño superior frente a utilizar imágenes más pequeñas, y todo esto sólo para satisfacer a un porcentaje de población pequeño con resoluciones de pantallas grandes... Pero bueno, las conexiones de internet a día de hoy suelen ser rápidas. No es un problema muy grave.

- Eso sí, dijimos que las imágenes serán lo suficientemente grandes para verse bien en resoluciones de pantalla de 1440x900(y por extensión las resoluciones menores), pero ¿y si ponen mi web en un proyector en el teatro de mi pueblo? Ya la hemos pifiado, ahora las imágenes volverás a reescalar y se verán pixeladas.


Por todo ello, ¿qué técnicas son las recomendables para tratar las imágenes? ¿Tamaño fijo o proporcional?

Saludos.

PS: Perdonen si el mensaje no debiera ir en este foro, no encontré otro más apropiado.
  #2 (permalink)  
Antiguo 14/09/2011, 04:24
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Imágenes ¿proporcionales o fijas?

Hola.

Lo primero es pensar: ¿de qué manera se utilizarán las imágenes en mi sitio web? Y partiendo de ahí, lo habitual es tener dos archivos por imagen. La imagen en una resolución aceptable (1024x768 , 800x600...) y una miniatura de esta (120x90 por ejemplo). De esta manera, al mostrar la miniatura, no estarás cargando la imagen grande y el tiempo de carga será considerablemente menor.

Si ponen tu web en el proyector de teatro de tu pueblo, has de saber que proyector o no, existen resoluciones igualmente. Así que se vería todo a cierta resolución, en un tamaño más o menos grande. Como ejemplo: imagínate que tienes 2 monitores. Uno de 21" y otro de 42". Perfectamente, puedes tener como resolución 1920x1080 en ambos. Y no te quedarías ciego.

El caso es que a la hora de cargar las imágenes grandes, estas entren en el marco de la resolución de la mayoría de los usuarios (incluyendo usuarios de portátiles). Esto vendría a ser 800x600, pero hay plugins para frameworks (como prettyPhoto) en el que la imagen se reescalará a la medida de la pantalla del usuario y, además, habrá un botoncito que te permita expandirla hasta su tamaño original. Realmente cómodo.


Bueno, espero haberte resuelto la duda. Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 14/09/2011, 06:14
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 9 meses
Puntos: 36
Respuesta: Imágenes ¿proporcionales o fijas?

KoswiDigital gracias por tu tiempo.

No entiendo para que necesito una miniatura de las imágenes. No las voy a utilizar. Partiendo de la imagen grande, al tener tamaños proporcionales, se reescalará automáticamente. ¿Puede ser que estemos hablando de cosas diferentes? Creo que tú estás pensando en una galería de imágenes, con sus thumbnails, ¿es así? El tema que yo planteo es otro, es sobre TODAS (o la mayoría) de imágenes de un sitio web: logos, cabeceras, etc.

Pongo un ejemplo: supongamos que el cuadrado negro es una imagen centrada y con tamaño fijo. Como vemos a medida que la resolución de la pantalla aumenta, ésta se ve más pequeña.







Mi solución es partir de una imagen lo suficientemente grande para que se va bien en la resolución más alta y darle dimensiones proporcionales, así en las resoluciones más pequeñas la imagen se reescalará manteniendo los margenes y todos los usuarios verán igual la web independientemente de la resolución que usen.

Pero veo que esta técnica no se utiliza. Lo que veo es que se suele diseñar sobre una resolución de 1280x1024 y se suelen dejar márgenes suficientes para que luego en resoluciones de 800x600 las imágenes queden lo suficientemente juntas pero sin estropear la estética de la web.

No sé si me he explicado xD

Saludos.
  #4 (permalink)  
Antiguo 14/09/2011, 07:48
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 15 años, 9 meses
Puntos: 165
Respuesta: Imágenes ¿proporcionales o fijas?

Yo creo que todo depende del proyecto web que estes desarrollando. Yo recomiendo tamaños fijos, y el que quiera ampliar la foto, que la amplie ( tu puedes implementar algo como lightbox http://www.lokeshdhakar.com/projects/lightbox2/ )

Un saludo!
__________________
Gracias por el Karma :D

empleo ofertas de trabajo
  #5 (permalink)  
Antiguo 15/09/2011, 08:05
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Imágenes ¿proporcionales o fijas?

Sí, estábamos hablando de cosas diferentes. Yo pensé en imágenes en miniatura con enlace a las originales (tipo galería). Pero igualmente, el problema de utilizar una imagen de mucha resolución, es que el navegador la cargará entera y luego la reescalará.

Es por esta misma razón por la que no se utiliza este tipo de técnicas para imágenes. En todo caso, si el contenedor principal de tu web es de 900px en cualquier resolución de usuario mantendrá los 900px, por lo que se verá perfectamente.

Ahora si, lo único que cambia esto sería que el usuario agrande o minimice la página a través del navegador, pero eso ya es cosa de cada usuario.

En resumen, si utilizas una imagen de 500kb, el navegador cargará los 500kb, reescalado o no. Y por eso solemos utilizar tamaños fijos en píxeles como te decía. Si tú dices que el ancho de tu web es 900px, es 900px para todo el mundo, utilice la resolución que utilice.

Espero haberte ayudado ahora un poco más :) Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #6 (permalink)  
Antiguo 15/09/2011, 08:33
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 9 meses
Puntos: 36
Respuesta: Imágenes ¿proporcionales o fijas?

Si, entiendo todo lo que me decís, de hecho es así como se hacen las cosas. Pero para que entendáis el motivo de este hilo, os dejo el proyecto que estoy haciendo y que me despertó el posible "problema"(y digo problema, porque puede ser que la mayoría no lo consideren problema).



Fijaos en el contenedor central de la pantalla, ese rectangulo con fondo transparente que contiene la información meteorológica. Es un div proporcional, supongamos que lo defino con un ancho de un 70%. También suponemos que las fuentes son proporcionales. Por último imaginemos que la imagen tal y como la veis es como lo haría alguien con una resolución de pantalla de 1280x1024 píxeles. Ah sí, se me olvidaba, también fijaos en la imagen que indica el tiempo que hace, sí, esa nube con precipitación, es una imagen de dimensiones fijas que se ve la mar de proporcional con el resto de los componentes.

Ahora supongamos que me compro una superpantalla con una resolución de 3000x2500 píxeles. Las fuentes son proporcionales, así las leeré en las mismas condiciones de proporcionalidad que el tío de la pantalla con una resolución de 1280x1024. El div también es proporcional, no problem. Pero... ¿y la imagen esa tan chula de la nube precipitando gotas de agua? ¿La llegará a ver el tío de la superpantalla sin tener que utilizar gafas?

Espero que haya quedado ahora claro cual es el concepto principal de mi problema que no es tan problema.

Gracias por leerme. Y espero que mi mensaje tenga fundamento de ser y no esté partiendo de conceptos erróneos de novato(lo de novato lo digo por mí, porque lo soy).

Saludos.
  #7 (permalink)  
Antiguo 15/09/2011, 09:09
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Imágenes ¿proporcionales o fijas?

Veamos... Ponemos que esa capa con la información meteorológica tiene un ancho de un 70%, ¿pero relativo a qué? ¿Al body? Porque si es así, en una resolución de 3000x25000 se pueden llegar a separar tanto los contenidos y las capas que la web se quedaría directamente sin estética.

Ahora bien, partamos de un ancho fijo para la web, siempre en píxeles. Esto es, todas las capas deben estar dentro de una contendora, la principal, a la que le pondremos un ancho y ese será el ancho para todas las resoluciones. Este ancho es de, por ejemplo, 920px.

Ahora sí, la capa con la informacion meteorológica ocupará siempre un 70% de 920px y se vea en la resolución que se vea, siempre será así, siendo indiferente la resolución de usuario siempre que sea superior a 920px. Si fuera inferior, aparecería el scroll horizontal.

Y bueno, lo mismo con las imágenes, siempre se verán adecuadamente porque siempre se mantendrán dentro del mismo ancho. Te pongo mi ejemplo. Yo utilizo una resolución de 1920x1080 en una pantalla de 37" (unos 94cm).

El problema de hacer una web sólo con tamaños en % es que puede salir muy mal, depende del ámbito que la ocupe. Por ejemplo este foro utiliza % en las capas tipo box (contenedoras de información). Pero está bien, porque es para texto y no molesta. Y en mi pantalla, estas capas de este foro ocupan 1849px de ancho, dejando un pequeño espacio a cada lado. Esto en tu web sería un caos porque separaría los contenidos demasiado.

Así que vuelvo a lo mismo. Lo mejor para ese estilo de web es un contenedor principal con el ancho que tendrá la web se vea en la resolución que se vea. Y así nunca habrá problemas. Si el usuario tiene 3000x2500 la web seguirá ocupando 920px (o lo que tú quieras que ocupe) y todo seguirá en orden.


A ver si no te he liado aún más intentando explicarme :) Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #8 (permalink)  
Antiguo 15/09/2011, 09:18
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 9 meses
Puntos: 36
Respuesta: Imágenes ¿proporcionales o fijas?

Jajaja... tranquilo KoswiDigital, no me has liado mal Sí, si yo también utilizo la técnica de meterle un div principal de tamaño fijo y luego volcar ahí lo que deba de ir. Sólo que no me termina de convencer que las imágenes fijas se vean igual en mis superpantallas imaginarias.

¿Sabes qué? Voy a tener que ir a comprarme un monitor grande, para experimentar yo mismo

Saludos y perdono por hacerte perder el tiempo ;)
  #9 (permalink)  
Antiguo 15/09/2011, 09:27
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Imágenes ¿proporcionales o fijas?

Nada hombre, no es una pérdida de tiempo, seguro que le sirve a más de uno lo que estamos hablando aquí.

Eso sí, si quieres ahorrarte el dinero de comprar un monitor gigante, has de saber que una página con un ancho de 900px (y con imágenes y todo lo que quieras que esté dentro de ese ancho) se verá exactamente igual en cualquier monitor con cualquier resolución. No habrá cambios de ningún tipo. En esta pantalla en la que trabajo, que es bastante grande de por sí, veo las páginas web igual que en la pantalla que tengo detrás de 19" y 1280x1024 de resolución. Exactamente igual, imágenes incluídas. Todo lo que encuadres dentro de un ancho en píxeles será igual para todos los monitores y todas las resoluciones porque un píxel siempre será un píxel.

Y si al final te compras el monitor gigante, que sepas que para la programación es muy cómodo porque puedes trabajar en varios archivos al mismo tiempo repartiéndolos por la pantalla. Es por eso que me hice con una de estas ^^

Saludos!
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #10 (permalink)  
Antiguo 18/09/2011, 06:12
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 12 años, 8 meses
Puntos: 87
Respuesta: Imágenes ¿proporcionales o fijas?

kiko's, la cuestión que planteás es muy interesante.

Mi opinión personal es la siguiente. Si una persona tiene una súper pantalla de 2880x1800, es un usuario avanzado y sabe usar el zoom del navegador. La mayoría de los sitios web habitan en un contenedor de 950 píxeles de ancho, así que los usuarios que utilizan resoluciones exorbitantes están acostumbrados a ese tipo de molestias.

No me parece prudente afectar el rendimiento de un sitio web utilizando imágenes enormes, sólo para ahorrarle un problema a un pequeño grupo de usuarios, que aparte ya están habituados a él.

Hablaste de las altas velocidades de las conexiones actuales, pero de nuevo: un usuario con una súper pantalla es probablemente un usuario avanzado. Va a estar escuchando música en Grooveshark y bajando algunos torrents, y no le va a hacer ninguna gracia que cada página de tu sitio pese dos megas.

Eso, sin hablar de los navegantes que por una u otra razón se encuentran a sí mismos utilizando conexiones menos que ideales: WiFi públicos, 3g, etcétera.

De hecho, es muy posible que beneficies a más gente creando sitios ultraligeros que diseñando sitios "HD".

Mis dos centavos.
  #11 (permalink)  
Antiguo 18/09/2011, 06:20
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 9 meses
Puntos: 36
Respuesta: Imágenes ¿proporcionales o fijas?

Sí, DrFaust, tienes razón en tu comentario. Aunque yo creé este hilo partiendo de un concepto erróneo en mi cabeza(a veces tengo desconexiones neuronales en mi cerebro xD): no sé porque razón pensé que las imágenes de tamaño fijo se iban a ver más pequeñas a medida que crece la pantalla, cuando no es así, KoswiDigital me hizo ver la luz al decir "...porque un píxel siempre será un píxel...", y tiene razón, una imagen de 500x500 siempre será una imagen de 500x500, lo único que los MÁRGENES(según como hayas definido los divs, claro) en mi monitor y en el monitor de la superpantalla no serán los mismos.

Saludos
  #12 (permalink)  
Antiguo 18/09/2011, 08:40
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Imágenes ¿proporcionales o fijas?

Cita:
lo único que los MÁRGENES(según como hayas definido los divs, claro) en mi monitor y en el monitor de la superpantalla no serán los mismos.
En realidad lo que será diferente será el tamaño del html y del body, dejando grandes cantidades de espacio en el color que tú elijas a cada lado. Aquí hay una técnica que se suele utilizar, y es utilizar una imagen (lo más ligera posible) de 1920x1080. ¿Cómo funciona? Pues el que tenga una resolución de 1024x768 verá y podrá navegar perfectamente por la web. El que tenga 1920x1080, además, podrá ver un bonito fondo acorde al diseño.

Eso sí, un menor tiempo de carga sería utilizando un color plano, o una imagen diminuta con repeat.

El caso es que, para mi, lo mejor es trabajar con un ancho definido en píxeles para el contenedor principal, y luego, el fondo del body, ya buscaremos algo que le quede bien o simplemente pase desapercibido,,, eso ya es cuestión de diseño, y no es mi campo.


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #13 (permalink)  
Antiguo 18/09/2011, 20:02
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 12 años, 8 meses
Puntos: 87
Respuesta: Imágenes ¿proporcionales o fijas?

Cita:
Iniciado por kiko's Ver Mensaje
no sé porque razón pensé que las imágenes de tamaño fijo se iban a ver más pequeñas a medida que crece la pantalla
Pensaste eso porque tenías razón.

Un monitor de 21 pulgadas funcionando a 1280x800 dedica más espacio físico a una imagen de 500x500 que un monitor de 21 pulgadas funcionando a 1440x900. Acá tenés un ejemplo:

http://www.leandrobarone.com.ar/forosdelweb/3989954.jpg

Asumiendo que estás trabajando con un layout líquido y textos proporcionales, el texto se va a ver de un tamaño razonable, pero las imágenes no. Y si utilizás imágenes con tamaños proporcionales, se van a pixelar, a menos de que sean enormes.

Ahora bien, diseñar un layout líquido que sea efectivo a 1024x768 y a 1920x1200 es un desafío que rara vez vale la pena enfrentar. Cualquier contenido que agregues te va a dar problemas: una línea de texto de 1800 pixeles de ancho tiene una legibilidad pobrísima, el contraste entre colores se percibe de forma diferente según cuánto espacio físico se le dedique a cada uno de ellos, y los bordes de los contenedores se ven diferentes. En resumen, es un quilombo.

Última edición por DrFaust; 18/09/2011 a las 20:15

Etiquetas: Ninguno
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:06.