Does “display:none” prevent an image from loading?

Question

Every responsive website development tutorial recommends using the display:none CSS property to hide content from loading on mobile browsers so the website load

Answer 1

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.