Apple 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?

Apple. 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?

• javascript
• css
• media-queries
• retina-display

• Browser Support and stats collecting possibly? Although both would be easy to track anyway. It could also be a page/server optimization. Some browsers might pre-empt the media query and download the images anyway. – Randall Hunt Commented Aug 20, 2012 at 5:41
• 7 Media queries don't reduce HTTP requests in any way. – BoltClock Commented Aug 20, 2012 at 5:41

3 Answers 3

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

To save time on initial load. Especially on slow/spotty connections like wireless/3g.

If you have a look at the prettified source of the image replacement code (https://gist.github./2029936) in particular the function __replaceNextQueue you will notice that it sets a timeout before actually replacing images.

This is done in order to ensure that the browser event queue has finished, which includes the initial draw of the UI, before the new images begin being requested. This allows the browser to download the smaller (file size) images and the user to begin performing their new actions prior to starting on the larger images.

Deferring the larger image downloads until after the initial draw of the UI will save time especially on slower connections.

Because not all images are loaded via CSS, some are with HTML.