[whatwg] Media queries, viewport dimensions, srcset and picture

Florian Rivoal florianr at opera.com
Tue May 29 03:49:24 PDT 2012

On Mon, 28 May 2012 18:29:45 +0200, Matthew Wilcox  
<mail at matthewwilcox.com> wrote:

> Personally I think it's better than either <picture> or srcset alone.
> But I don't think it's good enough even so, it still has problems:
> * It's verbose (but less-so than <picture>).

It's just as dense as the original srcset proposal if you don't need
media queries:
<img src="normal.jpg" srcset="high.jpg 2x">

I my mind, you only pull out the rest if you actually need media queries.

> * It has two attributes that could easily be confused as doing the
> same job. There's little clear logic as to why they're split, from an
> authors viewpoint.

It might be confusing, but there is logic in the splitting:

srcset="....." lets you describe the properties of a set of
equivalent images, and the browser decides which
one is more appropriate given the environment.

<picture><source media="..." lets you decide which image
should be displayed based on the properties of the medium
you're displaying on.

> * It bakes design properties into the mark-up. They will be the wrong
> breakpoints come any re-design.

It does, and I am somewhat reluctant because of that. But arguably,
<img> already has that problem, even if it is to a lesser degree, and to
be purely semantic, the mark-up ought to only contain the alt text, to
be replaced (or not, if you're on a voice browser) by the approriate
image using the css content property. But <img> is practical enough
that you don't want be bothered with that, and I am thinking that
media queries enabled images (aka <picture>) would be valuable
for the same reason.

  - Florian

More information about the whatwg mailing list