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

In stylesheet:

#sj {display: none}

In HTML:

<img id="sj" src="scarlett-johans开发者_运维知识库son.jpg" width="640" height="360" alt="scarlett johansson" />

Does an HTTP request for the image happen or not?

Yes, they still cause an HTTP request. Example: http://jsfiddle.net/RzFG2/

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.

Yes, the request still goes out but the image is not displayed.

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 :)