¿"Display:none" evita que se cargue una imagen?

Todos los tutoriales de desarrollo de sitios web receptivos recomiendan usar el display:none Propiedad 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? Lo hace display:none ¿No carga las imágenes o todavía carga el contenido en el navegador móvil? ¿Hay alguna forma de evitar la carga de contenido innecesario en los navegadores móviles?

preguntado el 28 de agosto de 12 a las 12:08

Parece que hay algunas formas de evitar la descarga con display: none, pero no de la manera estándar: timkadlec.com/2012/04/media-query-asset-downloading-results -

W3C lo está probando activamente: w3.org/2009/03/image-display-none/test.php -

18 Respuestas

Los navegadores son cada vez 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:none estilo pero su tamaño puede ser leído por el script. Chrome v68.0 no carga imágenes si el padre está oculto.

Puedes comprobarlo 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 con CPU pequeña, no tener que renderizar la imagen (y diseñar 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 se cargue la imagen, puede simplemente no agregar el elemento IMG a su documento (o configurar el IMG src atribuir a "data:" or "about:blank").

Respondido 09 Abr '20, 08:04

una imagen vacía src es peligrosa. Envía una solicitud adicional al servidor. una buena lectura sobre este tema nczonline.net/blog/2009/11/30/… - Srinivas

@SrinivasYedhuri Sí, tienes razón. Edité con una mejor solución. - Denys Séguret

Esta respuesta es sólo parcialmente correcta. Acabo de probar esto en Google Chrome (v35) y puedo confirmar que las imágenes con la pantalla configurada en ninguno no se descargan. Esto probablemente sea para facilitar el diseño receptivo al desarrollador. - shawn lloriqueo

Esta respuesta ya no es correcta. Vea a continuación los resultados actualizados de cómo varios navegadores, incluida la última versión de FF, manejan esta situación de manera diferente: DMTintner

Incluso hoy (octubre de 2017), el navegador más común, Chrome, descargará todas las fuentes de elementos 'img', incluso si están ocultas. No descargará imágenes de fondo ocultas. - TKoL

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

respondido 11 mar '13, 19:03

En mi opinión, este es un consejo muy útil para el diseño receptivo. - ryandlf

Esto funciona en FF, Chrome, Safari, Opera, Maxthon. No he probado ningún IE. - ¡Brent

Rompiendo nuevo desde el frente! <div hidden style="display:none;width:0;height:0;visibility:hidden;background:url('test.jpg')"></div>. Resultados: Firefox 29 y Opera 12 no se cargan. Carga de IE 11 y Chrome 34. - CoolCmd

@CoolCmd para un diseño receptivo, esta sigue siendo una opción viable, como puede hacerlo en su conjunto de consultas de medios CSS background-image a none para los casos en los que no desea que se cargue la imagen. No he encontrado ninguna alternativa mejor para este caso de uso que no use JS. - Qimpuesto

Probé un control deslizante de imágenes (que usaba imágenes de fondo) que tenía una consulta de medios de ancho mínimo. Por debajo de ese ancho, el div principal tenía CSS display: none;. Prueba de red con ventana por debajo de ese ancho: Chrome 35, IE11 y Edge no cargaron las imágenes - función binaria

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 capturas de pantalla-* imágenes cargadas (img 1)
  • En Firefox: solo se cargó la 1 captura de pantalla-* imagen que se muestra actualmente (img 2)

Entonces, después de cavar más, encontré este, que explica cómo maneja cada navegador la carga de activos img en función de la visualización css: ninguno;

Extracto de la publicación del blog:

  • Chrome y Safari (WebKit):
    WebKit descarga el archivo siempre, excepto cuando se aplica un fondo a través de una consulta de medios que no coincide.
  • Firefox:
    Firefox no descargará la imagen llamada con imagen de fondo si los estilos están ocultos, pero seguirán descargando recursos 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: los elementos con una imagen de fondo y una pantalla: ninguno configurado en línea no se descargarán... Pero lo serán si esos estilos no se aplican en línea.

Chrome-Todas las 8 capturas de pantalla-* imágenes cargadas

Firefox: solo se cargó la 1 captura de pantalla-* imagen que se muestra actualmente

Respondido 20 Feb 20, 01:02

Mientras esos resultados no sean parte de los estándares, no tienen sentido. Chrome cambia el motor de renderizado, Opera también cambia e IE será reemplazado por algo más. Simplemente no puede contar con la implementación de características marginales como esta para permanecer estable con el tiempo. La solución será una forma de indicarle al navegador cuándo un activo debe cargarse de forma perezosa, si es que lo hace. - marca kaplun

@MarkKaplun No estaba sugiriendo que los resultados de estas pruebas deberían mostrarle exactamente lo que puede esperar que suceda siempre con cada navegador todo el tiempo. Solo quise demostrar que la respuesta es "no tan simple como sí o no". cada navegador actualmente está implementando esto de manera diferente y probablemente seguirá siendo así por un tiempo. DMTintner

@DMTintner exactamente correcto. y a partir de hoy puedo confirmar que iOS Safari cargó imágenes de fondo de div que eran 'display: none'. el mejor enfoque es no asumir nada y si no desea que se cargue una imagen, no haga referencia a ella en una etiqueta html: bhu boue vidya

HTML5 <picture> La etiqueta lo ayudará a resolver la fuente de imagen correcta según el ancho de la pantalla.

Aparentemente, el comportamiento de los navegadores no ha cambiado mucho en los últimos 5 años y muchos todavía descargarían las imágenes ocultas, incluso si hubiera un display: none propiedad establecida sobre ellos.

Aunque hay un preguntas de los medios solución alternativa, solo podría ser útil cuando la imagen se estableció como fondo en el CSS.

Mientras pensaba que solo hay una solución JS para el problema (Carga lenta, llenar la imagen, etc.), parece que hay una buena solución de HTML puro que viene lista para usar con HTML5.

Y esa es la <picture> etiqueta.

He aquí cómo DND lo describe:

Programas de HTML <picture> elementos es un contenedor usado para especificar múltiples <source> elementos para un determinado <img> 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 así es como se usa:

<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 del img etiqueta, solo si no se aplica ninguna de las reglas de medios. Cuando el <picture> elemento no es compatible con el navegador, volverá a mostrar el elemento img etiqueta.

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

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 debemos pensar y codificar en el primer móvil enfoque.

Y antes de que alguien se emocione demasiado, aquí está el corriente soporte de navegador para <picture>:

Navegadores de escritorio

Compatibilidad con navegadores de escritorio

Navegadores móviles

Compatibilidad con navegadores móviles

Puede encontrar más información sobre el soporte del navegador en Puedo usar.

Lo bueno es que html5 por favorla sentencia es para úsalo con un respaldo. Y personalmente tengo la intención de tomar su consejo.

Más información sobre la etiqueta que puede encontrar en el Especificación de W3C. Hay un descargo de responsabilidad allí, que me parece importante mencionar:

Programas de picture elemento es algo diferente del aspecto similar video y audio elementos. Si bien todos ellos contienen source elementos, el elemento fuente src atributo no tiene significado cuando el elemento está anidado dentro de un picture y el algoritmo de selección de recursos es diferente. También, el picture el elemento en sí no muestra nada; simplemente proporciona un contexto para su contenido img elemento que le permite elegir entre varias URL.

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

Y aún puedes 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>

Así el navegador se no mostrar la imagen real y solo descargará la 1x1 imagen de píxel (que se puede almacenar en caché si la usa más de una vez). Tenga en cuenta, sin embargo, que si el <picture> la etiqueta no es compatible con el navegador, incluso en las pantallas de escritorio, la imagen real no se se mostrará (por lo que definitivamente necesitará una copia de seguridad de polyfill allí).

Respondido el 15 de enero de 19 a las 09:01

Tomé una ruta similar a la tuya, pero usé un data-img en su lugar :) Aquí hay una publicación que escribí al respecto swimburger.net/blog/web/… - Swimburguer

** 2019 Respuesta **

En una situación normal display:none no 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 antecesor tiene display:none entonces las imágenes de los descendientes 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 la descarga de la imagen:

1- El elemento de destino 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');
}

Puedes verlo tú mismo aquí: https://codepen.io/juanmamenendez15/pen/dLQPmX

Respondido 24 Abr '19, 20:04

Esto solo funciona si la imagen es un fondo del niño. si tienes un hijo <img> elemento, aún cargará la fuente por lo que puedo ver (Chrome v90). - BadHorsie

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 más tarde que contenga un <img> etiqueta.

Intente usar firebug o wireshark como mencioné antes y verá que los archivos SÍ se transfieren incluso si display:none está presente.

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 visualización está configurada en ninguna.

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

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

contestado el 15 de mayo de 14 a las 01:05

Modo Quirks: imágenes y pantalla: ninguna

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

Solo Opera descarga la imagen cuando cambia el display a block. Todos los demás navegadores lo descargan inmediatamente.

Respondido 29 Oct 14, 20:10

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

De todos modos, si ese mismo div tiene un padre y ese padre está configurado en 'display: none', la imagen de fondo del elemento secundario 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>

Respondido 01 Feb 18, 17:02

Parece que los navegadores aún descargan imágenes incluso si estas últimas están directa o indirectamente ocultas con display: none propiedad.

La única forma estándar de evitar que esto suceda que encontré fue usar loading atributo de la img tag:

<img src="https://cdn.test/img.jpg" loading="lazy">

Todos los navegadores más recientes lo admiten, excepto Safari y Firefox Android.

Especificación del elemento img de MDN.

Respondido 09 ago 21, 09:08

Gracias, esa fue la única forma en que funcionó para mi caso de uso en FF 86. - Oliver

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 se comporte realmente como un cuadro img en una configuración de diseño receptivo (para eso es el png transparente), lo cual es especialmente útil si su diseño usa dinámicamente receptivo 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 la consulta de medios vinculada a visible-lg-block se active y display: none se cambie a display: block. El png transparente se utiliza para permitir que el navegador establezca las proporciones adecuadas de alto: ancho para su block (y por lo tanto la imagen de fondo) en un diseño fluido (altura: auto; ancho: 100%).

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

Entonces terminas con algo como lo siguiente, para 3 ventanas gráficas 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 las imágenes del tamaño de la ventana gráfica de medios predeterminada se cargan durante la carga inicial, luego, según su ventana gráfica, las imágenes se cargarán dinámicamente.

¡Y no javascript!

contestado el 23 de mayo de 17 a las 12:05

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

utilizan el <img src="" srcset="">

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

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

Respondido 24 Abr '19, 14:04

no establezca el src en "" nczonline.net/blog/2009/11/30/… - Yazan Rawashdeh

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

Respondido el 06 de Septiembre de 15 a las 20:09

¿Podría explicar cómo funcionaría esto con más detalle, por favor? - durron597

Use @media query CSS, básicamente acabamos de lanzar un proyecto en el que teníamos una imagen enorme de un árbol en el escritorio al costado pero que no se mostraba en las pantallas de 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 seguro que se nos ocurrió.

respondido 29 nov., 16:11

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

Pero encontré 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 para la imagen como un estilo en línea con contenido: url('enlace a su imagen');. Ahora envuelva su etiqueta img en un envoltorio 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 envoltorio 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 envoltorio sin mostrar ninguno se ignorará, por lo tanto, la imagen no se carga hasta que llegue a un punto de interrupción donde el envoltorio tiene un bloque de visualización.

Ahí lo tienes, una manera realmente fácil de no cargar una imagen en el punto de interrupción móvil :)

Echa un vistazo a este codepen, para ver un ejemplo de trabajo: http://codepen.io/fennefoss/pen/jmXjvo

contestado el 24 de mayo de 17 a las 10:05

Me encanta cómo la web sigue evolucionando, no había visto este truco antes, usando el content-propiedad para alterar la imagen mostrada, es decir. ¿Puede dar algunas estadísticas sobre la compatibilidad de esto? - Contemplavientos

Lástima de Edge :/, al menos funciona en las últimas versiones de Firefox, Chome y Safari. - mikkel fennefoss

No. La imagen se cargará como de costumbre y seguirá utilizando el ancho de banda del usuario si está considerando ahorrar el ancho de banda del usuario del teléfono móvil. Lo que puede hacer es usar la consulta de medios y filtrar los dispositivos en los que desea que se cargue su imagen. La imagen debe configurarse 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 del tamaño de la pantalla y la consulta de medios configurada.

respondido 21 nov., 17:11

estamos hablando de imágenes que no se cargan en el móvil, ¿verdad? Entonces, ¿qué pasa si acabas de hacer un @media (ancho mínimo: 400 px) {imagen de fondo: cosa.jpg}

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

respondido 27 nov., 15:10

Otra posibilidad es utilizar un <noscript> etiqueta y colocando la imagen dentro de la <noscript> etiqueta. Luego use javascript para eliminar el noscript etiqueta como necesites la imagen. De esta manera, puede cargar imágenes a pedido utilizando la mejora progresiva.

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

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

respondido 11 mar '16, 15:03

El truco para usar display:none con imágenes es asignarles una identificación. Esto fue que 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, otro 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 muestra 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 el 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 css del escritorio:

@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 funciona para ti.

Respondido el 31 de enero de 17 a las 03:01

La cuestión no es cómo establecer un display: none en una imagen Su: ¿"Display:none" evita que se cargue una imagen? - Evguenia Manolova

Esta no es una solución válida porque muchos navegadores seguirán cargando las fuentes de imágenes aunque el usuario no pueda verlas a través del CSS. En cualquier caso, todavía no sería una buena estrategia. Hay formas mucho mejores de servir diferentes imágenes para diferentes dispositivos y esto también es un abuso completamente innecesario de las ID de elementos. - BadHorsie

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.