Peso de Imagenes Responsive.. Que tamaño de img para cada resolucion??????

  • Autor Autor r1004
  • Fecha de inicio Fecha de inicio
r1004

r1004

Épsilon
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola voy a hacer una web que cargue una imagen u otra dependiendo de la resolucion de pantalla.

Lo primero que tengo entendido es que para web, 72dpi es suficiente..

Lo siguiente es cuantas versiones de cada imagen cargo? Y ahi acepto opiniones.

Mi sugerncia son los siguientes anchos de pantalla:

@media screen and (max-width:1680px)
@media screen and (max-width:1280px)
@media screen and (max-width:980px)
@media screen and (max-width:736px)
@media screen and (max-width:480px)
.@media screen and (max-width:360px)
Hacer clic para expandir...

no son demasiadas?

Y lo siguiente y mas importante que calidad de imagen uso para cada resolucion? y que peso aproximado para cada una.

Muchas gracias
 
Eso no es una buena practica. Al final terminarias cargando imagenes innecesarias.
Crea una imagen .webp o JPEG2000

Y si quieres hacerla responsive solo agrega esto:

HTML: 
.imagen_responsive{  width: 100%;  height: auto;}

Al final, tu imagen deberás declararle esa clase:

HTML: 
<img src="/oso_polar.webp" class="imagen_responsive" alt="Oso Polar">
 
robikhan dijo:
Eso no es una buena practica. Al final terminarias cargando imagenes innecesarias.
Crea una imagen .webp o JPEG2000

Y si quieres hacerla responsive solo agrega esto:

HTML: 
.imagen_responsive{  width: 100%;  height: auto;}

Al final, tu imagen deberás declararle esa clase:

HTML: 
<img src="http://forobeta.com/oso_polar.webp" class="imagen_responsive" alt="Oso Polar">
Hacer clic para expandir...

Venía a publicar lo mismo. Con este código es suficiente para que cualquier imagen sea responsiva, no es necesario subir 10 de ellas.

HTML: 
.imagen img {
     width: 100%;
     height: auto;
}
 
El objetivo de este hilo es que la web cargue antes, el formato webp ya esta implementado.

Ahora necesito que el usuario cargue una imagen menos pesada segun la resolucion de su pantalla, al menos para movil.

Que se vea bien todos los disposivos ya esta arreglado
 
Eso lo que que estás haciendo es cargar todas las imágenes pero solo mostrando una dependiendo su resolución. Osea, cargas todas al final pero permanecen ocultas (Miralo en tu consola de Chrome)
Lo que se me ocurre es hacer defer con las imagenes y así previenes cargar la imagen si no se muestra.

https://www.tezify.com/how-to/prevent_loading_hidden_images/

- - - Actualizado - - -

Eso lo que que estás haciendo es cargar todas las imágenes pero solo mostrando una dependiendo su resolución. Osea, cargas todas al final pero permanecen ocultas (Miralo en tu consola de Chrome)
Lo que se me ocurre es hacer defer con las imagenes y así previenes cargar la imagen si no se muestra.

https://www.tezify.com/how-to/prevent_loading_hidden_images/
 
este codigo no funciona?

carga todas las imagenes?

Cambiar la imagen en función del ancho del navegador

Supongamos que queremos mostrar una imagen para anchos superiores a 1024px y una diferente (por ejemplo una con una vista diferente, o con un zoom de la otra imagen, etc..) para anchos inferiores. Es lo que se ha venido a denominar “arte” diferente:

XHTML
<picture>
<source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
<img src="imagen-650.jpg" alt="Foto de ejemplo">
</picture>

<picture>
<source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
<img src="imagen-650.jpg" alt="Foto de ejemplo">
</picture>

Como podéis ver dentro del elemento picture tenemos al final el elemento img tal y como lo hemos usado siempre. picture requiere que exista img como elemento final. Si no existiera, no se vería nada. Además será la imagen que se verá en aquellos navegadores que no soporten picture.

Pero antes tenemos el elemento source, que es el realmente interesante. En este ejemplo lo que sucede es que en aquellos navegadores con un ancho de 1024px y superior, se usará la foto “imagen-1024.jpg”. En los anchos de pantalla menores (y en aquellos que no soporten picture) se verá la imagen “imagen-650.jpg”.

Y podemos añadir mas casos:

XHTML
<picture>
<source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
<source media="(min-width: 650px)" srcset="imagen-650.jpg">
<img src="imagen-320.jpg" alt="Foto de ejemplo">
</picture>

<picture>
<source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
<source media="(min-width: 650px)" srcset="imagen-650.jpg">
<img src="imagen-320.jpg" alt="Foto de ejemplo">
</picture>

En este caso si el ancho de pantalla está entre 650px y 1024px se cargará la pantalla “imagen-650.jpg”. Si es superior a 1024px se cargará la imagen “imagen-1024.jpg”. En todos los demás casos (incluyendo cuando el elemento picture no lo soporte el navegador) se cargará la imagen “imagen-320.jpg”.
Hacer clic para expandir...

- - - Actualizado - - -

ok, ya veo que tu codigo es similar al mio, pero sigo con la misma duda..

Como puedo especificarle "si el dispositivo es un movil" entonces muestra esta imagen..

Porque las resoluciones de moviles actuales son inmensas, como las de ordenadores..

Pero no solo esto..

Existe esa misma funcion para videos?

Otra pregunta.

Que resolucion de imagen (peso, Tamaño) utilizais para cada resolucion de pantalla, si pudierais poner un ejemplo practico perfecto.

- - - Actualizado - - -

otra cosa..

Como puedo insertar ese codigo en css en background-image.

he probado de forma sencilla..

background-image:url("../fondo/bapnner33.jpg");
/*background-image:url("../fondo/bapnner33.webp");*/

funciona bien, pero falla en firefox en moviles, asi que lo quite..

las imagenes en background image no se servirlas en responsive o en webp en moviles firefox, porque no coge la jpg
 
Última edición:
Como puedo especificarle "si el dispositivo es un movil" entonces muestra esta imagen..

Porque las resoluciones de moviles actuales son inmensas, como las de ordenadores..

Alguien??
 
Una solución alternativa, un poco más optimizada pero probablemente mucho mas costosa es hacer un llamado a un servicio como Cloudinary, el cual se encarga de hacer todo el proceso de optimización por detrás, y configurarlo para que optimice de la mejor manera las imágenes según la resolución de pantalla que se solicite. Obteniendo menos lineas de código, haciendo llamado a imágenes en hilos https 2.0 (mayor velocidad y numero de solicitudes simultaneas), y solicitando imágenes desde CDN's disminuyendo la carga de servidor propio.
 
muchas gracias, acabo de leer tu respuesta, tarde..

Porque he picado todo el codigo a mano y cambiado todas las resoluciones a mano.. VAYA CURRAZO!!. A cada responsive una imagen diferente, 5 versiones de imagen por foto. Y no solo eso, para muchas resoluciones he tenido que adaptar el css.

Google se piensa que nuestro tiempo es gratuito
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba