Using a CSS display none will still trigger an HTTP request for images

Let's say we have the following code:

<img src="cat.jpg" style="display:none" />

This will still trigger the expensive HTTP call to get this image. This can be checked in Devtools - Network tab.

The image will still be requested even if we use a media query.

@media (max-width: 500px) {
    img {
        display: none; 
    } 
}

And even in the case when an img is inside of a hidden parent, the request is still made.

<div class="hide">
    <img src="cat.jpg" />
</div> 

However, using the image as a CSS background-image on a hidden div will not trigger the call.

<div style="hide">
    <div style="background: url(cat.jpg)"></div> 
</div> 

I've discovered this while playing with the fun Request Quest made by Jake Archibald. It teaches you in a fun way how and when the requests are made for images. Also from a Javascript perspective. Good to know from a performance point of view.

Cool stuff ! :)

First published on http://www.js-craft.io/blog/using-a-css-display-none-will-still-trigger-an-http-request-for-images/

Comments

[Nicholas Stimpson]

Good to know, but don't let it screw up your accessibility. If you want the image at all, then at some point you're going turn display:none off. With a background image, the unsighted users never going to know that the new information has been presented. With an img element, the alt value will let them know.

[Daniel - JS Craft]

good point :) Thanks