[whatwg] Features for responsive Web design

[Fred Andrews]

> From: Smylers at stripey.com
...
> > > > <img style="width: 10em" src="image-320x200.jpg"
> > > > set="image-320x200.jpg 320 200 10k, image-640x400.jpg 640 400 40k,
> > > > image-1280x800.jpg 1280 800 150k">
> > > 
> > > The layout size of that <img> element is not computable until all
> > > external stylesheets have loaded, as you have written it.
> > 
> > Actually, the image width is '10em' in this example, without having to
> > load any style sheets!
> 
> And how big is 10em? 1em is dependent on the font-size of the parent
> element of the <img>, which may be set by an external style-sheet.

Good point, thanks.  But I don't think this weakens any of the technical points.  Having the image sizes declared inline can only help speed the layout computation and allows the browser to use higher resolution images when needed.

> > The browser can immediately determine the image to use and load it in
> > this particular case.
> 
> You see how easy it would be for authors to get this wrong, even if they
> knew they had to put image sizes in-line in order to have good
> performance and tried to do that. That you, the promoter of the feature,
> can't even get it right suggests that it would also be hard for authors
> to do so.

If authors can get the URL right then they can get the sizes right.   Web browser developer tools could warn if a mismatch is found - which is not something that could be done to correct incorrect media queries.  There is likely a better syntax, and there have been lots of ideas proposed.

John Mellor proposed the syntax: <img srcset="320x120, 320.jpg 1x, 640.jpg 2x, 1280.jpg 4x, 2560.jpg 8x"> which has less values and thus less opportunity for user error.  Would this help?

If you have a better proposal to address the issue then please put it forward?   Note that media queries can not solve this problem because the image layout size depends on styling, but media queries should be usable with any solution.

cheers
Fred