Does An Image Still Upload In A Browser If In A Display:none

How CSS display:none Affects Images on Page Load

Should we hide images to speed up page load fourth dimension?

Nosotros are e'er looking for ways to improve how our clients manage their images, we have made that role of our mission and office of our culture.

Working with 1 of our clients, nosotros noticed that their prototype traffic on mobile was 3 times more, compared to similar websites. When we started investigating, we realized that they were hiding a lot of images by setting the property display to none using media queries.

While the goal of hiding the images was achieved, the browser requests for the hidden images were nevertheless being sent, which had a straight negative bear on on the site load functioning.

Setting display:none to images or to prototype containers does not preclude the browsers from requesting the epitome.

How "display:none" Works for Images

As you would expect, images carry similar any other element when you lot prepare the holding display to none, the image is not shown and doesn't occupy whatever space on the DOM.

The problem is that browsers, due to the possibility of a script dynamically irresolute an chemical element of the DOM, will load every chemical element present in the DOM, and if the images are hidden but are in the DOM then they'll ship the network asking for that prototype.

This means that, in the case of an prototype, it is going to be requested anyhow when, in virtually example scenarios, you are not going to utilize information technology.

Let'due south take a await at an example:

In the lawmaking higher up, we set brandish:noneto a div that contains four images to hide them from the DOM.

If nosotros have a await at the network when loading this HTML, this is the result:

The images are not shown simply the requests are made (the result would be the same if we apply display:none to each image).

This doesn't bear on the browser rendering of the DOM but information technology does impact the site content load.

If yous are going to be toggling the visibility of the prototype, and then this is non a large problem, it may even be better if information technology is already loaded.

But, if yous are non planning to show the images or the chances of showing them are actually low, and then this situation is actually a problem.

Conclusion

Images become requested by the browsers fifty-fifty if they accept the display property set to none.

To prevent this, you tin can implement the solution I mentioned before, but if you are going to be toggling the visibility of the image besides much, adding and removing the image from the HTML can exist an unnecessary cost of performance that yous can avoid by using the display:none property.

Using solution ii is style better as you can just utilize CSS without having to manipulate the DOM.

I hope this article helps you lot sympathise how to manage your images when you want to hide them and avoid requesting them.

Thanks for reading!