Does "display:none" prevent an image from loading?

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

The image has a display:none style but its size may be read by the script. Chrome v68.0 does not load images if the parent is hidden.

You may check it there : http://jsfiddle.net/tnk3j08s/

You could also have checked it by looking at the "network" tab of your browser's developer tools.

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").

If you make the image a background-image of a div in CSS, when that div is set to "display: none", the image will not load. When CSS is disabled, it still will not load, because, well, CSS is disabled.

The answer is not as easy as a simple yes or no. Check out the results of a test I recently did:

• In Chrome: All 8 screenshot-* images loaded (img 1)
• In Firefox: Only the 1 screenshot-* image loaded that is currently being displayed (img 2)

So after digging further I found this, which explains how each browser handles loading img assets based on css display: none;

Excerpt from the blog post:

• Chrome and Safari (WebKit):
  WebKit downloads the file every time except when a background is applied through a non-matching media-query.
• Firefox:
  Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags.
• Opera:
  Like Firefox does, Opera won't load useless background-images.
• Internet Explorer:
  IE, like WebKit will download background-images even if they have display: none; Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.