[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

Markus Ernst derernst at gmx.ch
Tue Nov 12 12:06:34 PST 2013

Am 12.11.2013 18:50 schrieb Adam Barth:
> We might even be able to make this work without inventing anything:
> <style type="text/css">
> @media (min-width: 480px) {
>    .artdirected {
>      width: 30px;
>      height: 30px;
>      background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
>   }
> }
> @media (min-width: 600px) {
>    .artdirected {
>      width: 60px;
>      height: 60px;
>      background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
>   }
> }
> </style>
> <div class="artdirected"></div>
> All the information is there.  We just need to teach the preload
> scanner to parse a subset of CSS and match a subset of selectors.  If
> you stay within the "preloadable" subset, then your images will be
> loaded by the preload scanner.  Otherwise, they'll just be loaded
> normally.
> What's most attractive to me about this approach is that it doesn't
> require inventing anything new, which means the compatibility story
> for older user agents is solid.  You don't need a polyfill or anything
> like that.

What I don't like about CSS approaches is the fact that changing the 
source of an image is fundamentally different from changing a dimension 
or color of an element. This is not "presentational" in the same way. 
Having to reference content images in the CSS in order to change their 
sources is an authoring nightmare.

If inventing new elements or attributes is bad, I assume the whole 
discussion on responsive images is actually obsolete, as what you 
suggest can be done already in principle.

More information about the whatwg mailing list