Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Float Layout Mobile First Layout

Does HTTP request happens when I have an image inside a display none element? Or is ignored?

In this case I have one image I want to display only in larger screens but don't want to spend mobile data. If it does happen, is there any solution?

1 Answer


As far as im aware the browser still sends the request to get the image. You can check this out by looking at the network tab in your browser I think.

You have got the fact that although the browser has requested the image it has not had to render it to the screen which will improve performance to some extent.

Sorry I can not give you much more reason ing behind it but I hope this is somewhat helpful.\


Thank you Craig. I've just done an extensive research about and found that the tag img always generate a request but apparently when the element has a background-image property set and display: none the http request is not made..

Yes thats true, if the image is not vital to the content on the page i.e. its more for design than content then I would use a div and set a back ground image, you could always but a span element inside the div with a text hiding class for screen readers. Just to keep in mind accessibility.