Do images w/ display:none still make an HTTP request?

user_770127 0
Viewed 5669

In stylesheet:

#sj {display: none}

In HTML:

<img id="sj" src="scarlett-johansson.jpg" width="640" height="360" alt="scarlett johansson" />

Does an HTTP request for the image happen or not?

css image http html performance
4 Answers

There is a way to prevent an HTTP request when using display:none. You need to make the image a background-image in CSS and set the parent element to display:none.

HTML:

<div id="test3">
    <div></div>
</div>

CSS:

#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}

Here is a link where you can read about all sorts of tests on this issue.

user_30186990

You can test if there was a request in browser console ctrlshift + J and in Network section filter Img elements and see if they are loaded upon refresh.

Well, this is how You can test it but I am here because of that I was to lazy to check this by myself and it was faster to look for it on stackoverflow :)

user_27607170
Related