[respimg] `srcset`/`picture` and CSS `@viewport`

The Responsive Images Community Group has had some internal discussion on the subject of preloading based on media queries and `@viewport` [1], and raised the issue to some members of the IE team where they might be more familiar with the technologies involved—we’re not sure how either “responsive images” solution will play with an `@viewport` rule in an external stylesheet, seeing as relevant viewport information won’t be available at the time of prefetching.

There has been some discussion around avoiding the issue by always requesting any/all image sources specified by either solution and *applying* them selectively rather than requesting them on-the-fly, given that there are significant additional costs associated with making asynchronous requests within a mobile context [2].

There will never be an *inapplicable* media query or `srcset` width/height, of course, as the user’s context may well change while browsing. Realistically, though, it seems we’d be imposing a massive bandwidth cost to every user visiting a site that contained either `picture` or `srcset` on the chance that a much smaller number of users’ context may shift multiple times. It seems like the additional overhead of further requests is best incurred as-needed, rather than requiring hundreds of kilobytes of inapplicable data sent to every user “just in case.” It should be noted that this is the current behavior of background images within media queries in the vast majority of browsers [3], so there is some precedent. It should be noted that older versions of WebKit did request initially inapplicable background images up-front, and that behavior was later changed.

It seems to me that requiring every user to download the entire range of assets at the outset—regardless of their application to the users’ context at the time—largely defeats the purpose of either solution [4].

1: https://github.com/ResponsiveImagesCG/picture-element/issues/7
2: https://github.com/ResponsiveImagesCG/picture-element/issues/9
3: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
4: https://github.com/ResponsiveImagesCG/picture-element/issues/9#issuecomment-10075607