Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Cambiar imagen dependiendo de resolucion

Estas en el tema de Cambiar imagen dependiendo de resolucion en el foro de HTML en Foros del Web. Hola. Apenas andamos empezando en lo que son los Sitios Web en la Universidad asi que solo se hacer cosas basicas, tenemos que hacer un ...
  #1 (permalink)  
Antiguo 27/04/2014, 21:01
Avatar de omar10594  
Fecha de Ingreso: junio-2013
Ubicación: Mexico
Mensajes: 26
Antigüedad: 10 años, 10 meses
Puntos: 3
Cambiar imagen dependiendo de resolucion

Hola.

Apenas andamos empezando en lo que son los Sitios Web en la Universidad asi que solo se hacer cosas basicas, tenemos que hacer un sitio que se adapte dependiendo de la resolucion, todo bien, puedo hacer que todo se adapte y vea bien en diferentes resolucion.

Ahora, las imagenes se adaptan al tamaño de la resolucion, asi que cambian constantemente, pero supongo (Pues no estoy seguro de esto), si la imagen pesa 1mb, entonces siempre carga esa imagen de 1mb, y si debe ser mas pequeña, la redimenciona, pero aunque es mas pequeña sigue descargando la imagen de 1mb, asi que pensando en celulares, donde las imagenes son muy pequeñas, tener que descargar 1mb y luego redimensionarla, hara que tarde en cargar la web, y peor aun que puede contener muchas imagenes un sitio web.

Asi que mi duda es: ¿como hacer que dependiendo del la resolucion, carge una imagen u otra? (Tendria varias imagenes, de diferentes resoluciones, por lo que las mas pequeñas al pesar menos, cargaran mas rapido, o bien, consumiran menos datos)

Crei que se haria con html pues es ahi donde cargo las imagenes, en CSS3 hago que se adapte con @media's , pero son pocas cosas las que cambio, basicamente los tamaños, o la posicion de algunas cosas, pero no sabria como controlar con eso, que imagen cargar.

Uso HTML5 y CSS3.

~saludos~
  #2 (permalink)  
Antiguo 27/04/2014, 21:51
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Cambiar imagen dependiendo de resolucion

Puedes probar mostrando thumbnails para resoluciones pequeñas, pero tienes que crearlas previamente o generarlas con algún lenguaje del servidor. Es solo una idea.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 28/04/2014, 00:06
Avatar de omar10594  
Fecha de Ingreso: junio-2013
Ubicación: Mexico
Mensajes: 26
Antigüedad: 10 años, 10 meses
Puntos: 3
Respuesta: Cambiar imagen dependiendo de resolucion

Bueno, busque un poco respecto a thumbnails, y son como las imágenes que ves en tu carpeta de imágenes antes de abrirlas, que son una miniaturas, pero a eso no me refiero, yo me refiero a las imágenes que pongo en la pagina que son parte del diseño de la pagina, como por ejemplo el Logotipo.

Quiero tener por ejemplo 5 imágenes del mismo logotipo (logotipo1.jpg, logotipo2.jpg o logotipo1080.jpg, logotipo720.jpg) y dependiendo de la resolución se muestre uno o el otro, de esta forma también podría hacer que cambie, pues si por ejemplo el texto en el logotipo es muy largo en una sola linea, en vez de hacerlo mas pequeño simplemente a partir de cierta resolución el texto no estará en una sola línea, sino en dos, o si por ejemplo el logotipo se compone de una imagen característica y el nombre de la pagina, a partir de una resolución solo se muestre la imagen caracteristica.
  #4 (permalink)  
Antiguo 28/04/2014, 04:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Cambiar imagen dependiendo de resolucion

Es una cuestión a día de hoy un poco artesanal aún. No hay de momento nada funcional que sea agradable en cuanto a su desarrollo —o al menos a mi no me lo parece. Y están en ello ([1] y [2]). Aquí tienes algunos artículos relacionados con soluciones según lo que busques o quieras aplicar:

http://www.smashingmagazine.com/2013...image-solution
http://css-tricks.com/which-responsi...should-you-use

Etiquetas: css, dependiendo, html5, todo
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 09:31.