¿Cómo evitar que una imagen oculta afecte el rendimiento de mi sitio web?

Z

ZoroRoronoa

Delta

• 2 Feb 2015

• #1

Hola amigos, tengo una consulta.
No es nada echo, es simplemente que imagine y la duda me surgio en mi cabeza.

Tengo un sitio con una imagen que pesa "1mb", el sitio esta responsivo.
cuando la web se ve en un disp. movil, mediante las instrucciones de media queries, esta imagen desaparece, ya sea usando
display:none ó
visibility:hidden

Mi pregunta es, en la estructura html sigue existiendo esa imagen, aunque no se visualice, asi que
Mi dispositivo carga 1mb extra por esa imagen que no ve, cierto?

Como puedo evitar esto?
Gracias

 

X

xSkArx

Dseda

Programador

• 2 Feb 2015

• #2

Y si le pones "display: none !important;"

 

J

Javieer

Gamma

Programador

• 2 Feb 2015

• #3

El navegador este visible o no, va a descargar la imagen, lo que tienes que hacer es usar algun script como LazyLoad para que solo se cargue al ser necesaria

 

Rafaelini

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 3 Feb 2015

• #4

xSkArx dijo:

Y si le pones "display: none !important;"

Hacer clic para expandir...

Hola xSkArx, de todos modos se carga.

La realidad es que lo tengo que confirmar pero para hacer algo responsive tienes que cargarlo desde el css.

Utiliza un div y en tus media queries decides qué cargar en qué caso:

Insertar CODE, HTML o PHP:

media (min-width: 601px) {
  #CargarFoto {
    background: url('FotoGrande.jpg');
  }
}
media (max-width: 600px) {
  #CargarFoto {      
     background: url('FotoChica.jpg');
  }
}

 

Z

ZoroRoronoa

Delta

• 19 Feb 2015

• #5

Claro, con media queries, tratandolas como background.

Pero hablando de imagenes en linea <img>, creo que tratare de explorar la opcion del LazyLoad, gracias a ambos por sus respuestas. :encouragement:

TEMA RESUELTO!

 

N

nestornoe

Épsilon

Programador

• 15 Mar 2015

• #6

Lo tendrías que hacer con una carga asíncrona con jQuery, utilizar algún tipo de reconocimiento de si es movil o no y ahí cargarlo.

Saludos

 

likepop

Delta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Mar 2015

• #7

Aunque vi que has puesto tema resuelto, te recomiendo algo sumamente sencillo. Mediante "media (max-width: ---)" has que al cargar en celular que si no mal recuerdo la medida es 480px, ese div desaparezca. No es tan difícil 😛

Espero haberte ayudado.

 

apu314

Alfa

Programador

Verificado por Whatsapp

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 24 Mar 2015

• #8

likepop dijo:

Aunque vi que has puesto tema resuelto, te recomiendo algo sumamente sencillo. Mediante "media (max-width: ---)" has que al cargar en celular que si no mal recuerdo la medida es 480px, ese div desaparezca. No es tan difícil 😛

Espero haberte ayudado.

Hacer clic para expandir...

Con los media query, si es una etiqueta img, al estar en el html, esta se cargara igualmente a no ser que, como dicen ahí arriba los compañeros, cargues con js asíncronamente las imágenes segun las uses o no