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

Hi guys I was struggling with the same issue, how to not load an image on mobile.

But I figured out a good solution. First make an img tag and then load a blank svg in the src attribute. Now you can set your URL to the image as an inline style with content: url('link to your image');. Now wrap your img tag in a wrapper of your choice.

<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;
      }
    }

Set the wrapper to display none on the breakpoint where you dont want to load the image. The inline css of the img tag is now ignored since the style of an element wrapped in a wrapper with display none will be ignored, therefore the image is not loaded, until you reach a breakpoint where the wrapper has display block.

There you go, really easy way not to load an img on mobile breakpoint :)

Check out this codepen, for a working example: http://codepen.io/fennefoss/pen/jmXjvo

Answer 2

Another possibility is using a <noscript> tag and placing the image inside the <noscript> tag. Then use javascript to remove the noscript tag as you need the image. In this way you can load images on demand using progressive enhancement.

Use this polyfill I wrote to read the contents of <noscript> tags in IE8

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

Answer 3

No.The image will be loaded as usual and will still use the user’s bandwidth if you are considering the mobile phone user bandwidth saving.What u can do is to use media query and filter the devices that you want your image to be loaded.Your image must be set as a background image of a div,etc and NOT an tag since the the image tag will load the image regardless if the screen size and the media query set.

Answer 4

Yes it will render faster, slightly, only because it doesn't have to render the image and is one less element to sort on the screen.

If you don't want it loaded, leave a DIV empty where you can load html into it later containing an <img> tag.

Try using firebug or wireshark as I've mentioned before and you'll see that the files DO get transferred even if display:none is present.

Opera is the only browser which will not load the image if the display is set to none. Opera has now moved to webkit and will render all images even if their display is set to none.

Here is a testing page that will prove it:

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

Answer 5

To prevent fetching resources, use the <template> element of Web Components.

Answer 6

Use @media query CSS, basically we just release a project where we had an enormous image of a tree on desktop at the side but not showing in table/mobile screens. So prevent image from loading its quite easy

Here is a small snippet:

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

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

You can use the same CSS to show and hide with display/visibility/opacity but image was still loading, this was the most fail safe code we came up with.