Question

Apple.com always display a standard image first and then use javascript to load a retina image if the device supports retina.

I wonder why apple don’t use CSS media query directly to reduce the HTTP requests?

Answer 1

Short answer — browser-prefetch.

There’s nothing that they can do, short of using JS to either:

1. Do media-query tests, use JS, and fill in HQ-images if support is there
2. Do media-query tests, use JS and fill in CSS style-sheets (with url-declarations in them), if support is there.

The goal isn’t to reduce HTTP requests, here. The goal is to reduce concurrent HTTP requests, for data which is largely-redundant – even moreso if the browser doesn’t support the high-res version, but is forced to use that bandwidth, anyway.

Benefits of doing the JS thing:

1. Page will load faster, as it’s only the lighter media which is being downloaded
2. Fewer HTTP requests during page-load. By the time you request the HQ-images, the rest of the page is already set, so “extra-requests” will slow the experience not one bit (unless they do something stupid with DOM-access, or the like — but that’s a universal truth)

Eventually, the <picture> spec, in conjunction with the srcset= and media= attributes of the <source> element, will allow for a JS-free method of allowing browsers to intelligently handle media, based on their own internal queries and page-profiling (eg: is the user on an LTE connection, or are they on 2G out in the hills, somewhere at the moment).