Cada tutorial de desarrollo de sitios web receptivos recomienda usar la display:nonepropiedad CSS para ocultar el contenido de la carga en los navegadores móviles para que el sitio web se cargue más rápido. ¿Es verdad? ¿ display:noneNo carga las imágenes o todavía carga el contenido en el navegador móvil? ¿Hay alguna forma de evitar cargar contenido innecesario en navegadores móviles?

Los navegadores se están volviendo más inteligentes. Hoy su navegador (dependiendo de la versión) puede omitir la carga de la imagen si puede determinar que no es útil.

La imagen tiene un display:noneestilo, pero el script puede leer su tamaño. Chrome v68.0 no carga imágenes si el padre está oculto.

Puede verificarlo allí: http://jsfiddle.net/tnk3j08s/

También podría haberlo comprobado mirando la pestaña "red" de las herramientas de desarrollo de su navegador.

Tenga en cuenta que si el navegador está en una computadora pequeña con CPU, no tener que renderizar la imagen (y el diseño de la página) hará que toda la operación de renderizado sea más rápida, pero dudo que esto sea algo que realmente tenga sentido hoy.

Si desea evitar que la imagen se cargue, simplemente no puede agregar el elemento IMG a su documento (o establecer el srcatributo IMG en "data:"o "about:blank").

Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div se establece en "display: none", la imagen no se cargará. Cuando CSS está deshabilitado, todavía no se cargará porque, bueno, CSS está deshabilitado.

La respuesta no es tan fácil como un simple sí o no. Mira los resultados de una prueba que hice recientemente:

• En Chrome: las 8 imágenes de captura de pantalla- * cargadas (img 1)
• En Firefox: solo se carga la 1 captura de pantalla- * imagen que se muestra actualmente (img 2)

Entonces, después de cavar más, encontré esto , que explica cómo cada navegador maneja la carga de activos img basados ​​en la pantalla css: ninguno;

Extracto de la publicación del blog:

• Chrome y Safari (WebKit):
  WebKit descarga el archivo cada vez, excepto cuando se aplica un fondo a través de una consulta de medios no coincidente.
• Firefox:
  Firefox no descargará la imagen llamada con la imagen de fondo si los estilos están ocultos, pero aún descargará activos de las etiquetas img.
• Opera:
  Al igual que Firefox, Opera no cargará imágenes de fondo inútiles.
• Internet Explorer:
  IE, como WebKit, descargará imágenes de fondo incluso si tienen pantalla: ninguna; Algo extraño aparece con IE6: Elementos con una imagen de fondo y pantalla: ninguno configurado en línea no se descargará ... Pero lo será si esos estilos no se aplican en línea.

La <picture>etiqueta HTML5 lo ayudará a resolver la fuente de imagen correcta dependiendo del ancho de la pantalla

Aparentemente, el comportamiento de los navegadores no ha cambiado mucho en los últimos 5 años y muchos aún descargarían las imágenes ocultas, incluso si hubiera una display: nonepropiedad establecida en ellas.

Aunque hay una solución alternativa de consultas de medios , solo podría ser útil cuando la imagen se configuró como fondo en el CSS.

Mientras pensaba que solo hay una solución JS para el problema ( carga diferida , relleno de imágenes , etc.), parecía que hay una buena solución HTML pura que viene con HTML5.

Y esa es la <picture>etiqueta.

Así es como MDN lo describe:

El elemento HTML<picture> es un contenedor utilizado para especificar múltiples <source>elementos para un <img>contenido específico contenido en él. El navegador elegirá la fuente más adecuada de acuerdo con el diseño actual de la página (las restricciones del cuadro en el que aparecerá la imagen) y el dispositivo en el que se mostrará (por ejemplo, un dispositivo normal o hiDPI).

Y aquí está cómo usarlo:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

La lógica detrás

El navegador cargaría la fuente de la imgetiqueta, solo si no se aplica ninguna de las reglas de medios. Cuando el <picture>navegador no admite el elemento, volverá a mostrar la imgetiqueta.

Normalmente, colocaría la imagen más pequeña como fuente de la fuente <img>y, por lo tanto, no cargaría las imágenes pesadas para pantallas más grandes. Viceversa, si se aplica una regla de medios, <img>no se descargará la fuente , sino que descargará el contenido de la URL de la <source>etiqueta correspondiente .

El único inconveniente aquí es que si el elemento no es compatible con el navegador, solo cargará la imagen pequeña. Por otro lado, en 2017 deberíamos pensar y codificar en el primer enfoque móvil .

Y antes de que alguien salga demasiado, aquí está el soporte actual del navegador para <picture>:

Navegadores de escritorio

Navegadores móviles

Puede encontrar más información sobre el soporte del navegador en ¿Puedo usarlo ?

Lo bueno es que la oración de html5please es usarla con un respaldo . Y personalmente tengo la intención de seguir sus consejos.

Puede encontrar más información sobre la etiqueta en la especificación del W3C . Hay un descargo de responsabilidad allí, que me parece importante mencionar:

El pictureelemento es algo diferente de los de aspecto similar videoy audioelementos. Si bien todos ellos contienen sourceelementos, el srcatributo del elemento fuente no tiene sentido cuando el elemento está anidado dentro de un pictureelemento, y el algoritmo de selección de recursos es diferente. Además, el pictureelemento en sí no muestra nada; simplemente proporciona un contexto para su imgelemento contenido que le permite elegir entre múltiples URL.

Entonces, lo que dice es que solo lo ayuda a mejorar el rendimiento al cargar una imagen, al proporcionarle un contexto.

Y aún puede usar algo de magia CSS para ocultar la imagen en dispositivos pequeños:

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

Por lo tanto, el navegador no mostrará la imagen real y solo descargará la 1x1imagen de píxeles (que puede almacenarse en caché si la usa más de una vez). Sin embargo, tenga en cuenta que si el <picture>navegador no admite la etiqueta, incluso en las pantallas de escritorio, la imagen real no se mostrará (por lo que definitivamente necesitará una copia de seguridad de polyfill allí).

Sí, se renderizará un poco más rápido, solo porque no tiene que renderizar la imagen y es un elemento menos para ordenar en la pantalla.

Si no desea que se cargue, deje un DIV vacío donde pueda cargar html en él más tarde que contenga una <img>etiqueta.

Intente usar firebug o wireshark como he mencionado antes y verá que los archivos se transfieren incluso si display:noneestán presentes.

Opera es el único navegador que no cargará la imagen si la pantalla no está configurada. Opera ahora se ha movido a webkit y renderizará todas las imágenes incluso si su pantalla no está configurada.

Aquí hay una página de prueba que lo demostrará:

http://www.quirksmode.org/css/displayimg.html

** Respuesta 2019 **

En una situación normal display:noneno impide que la imagen se descargue

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

Pero si un elemento ancestro tiene display:nonelas imágenes del descendiente no se descargarán

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

Otras situaciones que impiden que se descargue la imagen:

1- El elemento objetivo no existe

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2- Dos clases iguales cargando imágenes diferentes

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

Puede verlo usted mismo aquí: https://codepen.io/juanmamenendez15/pen/dLQPmX

Modo Quirks: imágenes y pantalla: ninguno

Cuando la imagen tiene display: noneo está dentro de un elemento con display:none, el navegador puede optar por no descargar la imagen hasta que display se establezca en otro valor.

Solo Opera descarga la imagen cuando cambias displaya block. Todos los demás navegadores lo descargan de inmediato.

La imagen de fondo de un elemento div se cargará si el div está configurado 'display: none'.

De todos modos, si ese mismo div tiene un padre y ese padre está configurado para 'mostrar: ninguno', la imagen de fondo del elemento hijo no se cargará . :)

Ejemplo usando bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-xs-12 visible-lg">
	<div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div>
</div>
<div class="col-xs-12 visible-md">
	<div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div>
</div>
<div class="col-xs-12 visible-sm">
	<div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div>
</div>
<div class="col-xs-12 visible-xs">
	<div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div>
</div>

Si es así, ¿hay alguna manera de no cargar el contenido innecesario en los navegadores móviles?

utilizar <img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div se establece en 'display: none', la imagen no se cargará.

Simplemente ampliando la solución de Brent.

Puede hacer lo siguiente para una solución CSS pura, también hace que el cuadro img realmente se comporte como un cuadro img en una configuración de diseño receptivo (para eso está el png transparente), lo cual es especialmente útil si su diseño usa responsive-dinámicamente- Cambiar el tamaño de las imágenes.

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

La imagen solo se cargará cuando se active la consulta de medios vinculada al bloque visible-lg y se visualice: none se cambia a display: block. El png transparente se utiliza para permitir que el navegador establezca las proporciones adecuadas de altura: ancho para su bloque <img> (y, por lo tanto, la imagen de fondo) en un diseño fluido (altura: automático; ancho: 100%).

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

Entonces terminas con algo como lo siguiente, para 3 viewports diferentes:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

Y solo se cargan las imágenes de tamaño de ventana de visualización de medios predeterminadas durante la carga inicial, luego, dependiendo de su ventana de visualización, las imágenes se cargarán dinámicamente.

Y no javascript!

Para evitar la obtención de recursos, use el <template>elemento de Componentes web .

Hola chicos, estaba luchando con el mismo problema, cómo no cargar una imagen en el móvil.

Pero descubrí una buena solución. Primero haga una etiqueta img y luego cargue un svg en blanco en el atributo src. Ahora puede configurar su URL a la imagen como un estilo en línea con contenido: url ('enlace a su imagen') ;. Ahora envuelva su etiqueta img en un contenedor de su elección.

<div class="test">
  <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>

  @media only screen and (max-width: 800px) {
      .test{
       display: none;
      }
    }

Configure el contenedor para que no muestre ninguno en el punto de interrupción donde no desea cargar la imagen. El CSS en línea de la etiqueta img ahora se ignora ya que el estilo de un elemento envuelto en un contenedor con pantalla no se ignorará, por lo tanto, la imagen no se carga, hasta que llegue a un punto de interrupción donde el contenedor tiene bloque de visualización.

Ahí tienes, una forma muy fácil de no cargar un img en el punto de corte móvil :)

Mira este codepen, para un ejemplo de trabajo: http://codepen.io/fennefoss/pen/jmXjvo

No, la imagen se cargará como de costumbre y seguirá utilizando el ancho de banda del usuario si está considerando el ahorro de ancho de banda del usuario del teléfono móvil. Lo que puede hacer es utilizar la consulta de medios y filtrar los dispositivos que desea que cargue su imagen. la imagen debe establecerse como una imagen de fondo de un div, etc. y NO como una etiqueta, ya que la etiqueta de la imagen cargará la imagen independientemente de si se configura el tamaño de la pantalla y la consulta de medios.

Otra posibilidad es usar una <noscript>etiqueta y colocar la imagen dentro de la <noscript>etiqueta. Luego use javascript para eliminar elnoscript etiqueta ya que necesita la imagen. De esta forma, puede cargar imágenes a pedido mediante la mejora progresiva.

Use este polyfill que escribí para leer el contenido de las <noscript>etiquetas en IE8

https://github.com/jameswestgate/noscript-textcontent

Use CSS de consulta @media, básicamente lanzamos un proyecto en el que teníamos una imagen enorme de un árbol en el escritorio al lado pero que no se mostraba en las pantallas de la mesa / móvil. Así que evitar que la imagen se cargue es bastante fácil

Aquí hay un pequeño fragmento:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

Puede usar el mismo CSS para mostrar y ocultar con visualización / visibilidad / opacidad, pero la imagen aún se estaba cargando, este fue el código más a prueba de fallas que se nos ocurrió.

estamos hablando de imágenes que no se cargan en el móvil, ¿verdad? ¿y qué pasa si acabas de hacer un @media (min-width: 400px) {background-image: thing.jpg}

¿no buscaría entonces la imagen por encima de un cierto ancho de pantalla?

El truco para usar la pantalla: ninguno con imágenes es asignarles una identificación. Esto fue porque no se necesita mucho código para que funcione. Aquí hay un ejemplo usando consultas de medios y 3 hojas de estilo. Uno para teléfono, uno para tableta y otro para escritorio. Tengo 3 imágenes, imagen de un teléfono, una tableta y una computadora de escritorio. En la pantalla de un teléfono, solo se mostrará una imagen del teléfono, una tableta mostrará solo la imagen de la tableta, un escritorio se mostrará en la imagen de la computadora de escritorio. Aquí hay un ejemplo de código para que funcione:

Código fuente:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

El CSS del teléfono que no necesita una consulta de medios. Es el img # phone lo que lo hace funcionar:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

La tableta css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

Y el escritorio css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

Buena suerte y déjame saber cómo te funciona.