Como evitar que uma imagem oculta afete o desempenho do meu site

Z

ZoroRoronoa

Delta

• 02/02/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

• 02/02/2015

• #2

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

 

J

Javieer

Gamma

Programador

• 02/02/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 03/02/2015

• #4

xSkArx disse:

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

Clique 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:

Inserir CODE, HTML ou PHP:

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

 

Z

ZoroRoronoa

Delta

• 19/02/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/03/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 15/03/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

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 24/03/2015

• #8

likepop disse:

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.

Clique 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