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

[Mathew Marquis]

On May 23, 2012, at 11:21 AM, Florian Rivoal wrote:
> 
> Having said all that, I think srcset="foo.jpg 1x, foo2.jpg 2x" is quite
> good, because it does indeed provide the browser with a set of images with
> different quality, leaving it free to pick the appropriate one.
> 
> On the other hand, I think that including 600w 400h in there is misguided.
> It doesn't help for the problem of picking the right image for the right
> resolution/bandwidth combination, but is too crippled to be useful as
> media queries meant to serve different images to in different scenarios.
> <picture> serves these use cases much better.
> 
> Here's what I think we should do:
> 
> 1) simplyfy srcset to only accept the *x qualifier
> 
> 2) add support for srcset as an attribute of the <source> sub-element of
> the <picture> element (in addition to src, or instead of it? I am not
> sure).
> 
> Then you could do stuff like this:
> <picture>
> <source media="(orientation:landscape)" srcset="long.jpg 1x, long2.jpg 2x">
> <source media="(orientation:portrait)" srcset="tall.jpg 1x, tall2.jpg 2x">
> <img src="fallback.jpg" />
> </picture>


Honestly, I think this is a brilliant compromise between the two patterns: combining authors’ overwhelming preference for media queries, the need for layout-based art direction, the (relative) simplicity of `srcset` for implementors, and the potential to hinge low/high res images on future bandwidth detection without compromising media queries in the process.

I believe this is now my preferred solution, and I hope I’m not alone in that.

> 
> Note that it is different from:
> 
> <picture>
> <source media="(orientation:landscape) and (resolution:1dppx)"
> src="long.jpg">
> <source media="(orientation:landscape) and (resolution:2dppx)"
> src="long2.jpg">
> <source media="(orientation:portrait) and (resolution:1dppx)"
> src="tall.jpg">
> <source media="(orientation:portrait) and (resolution:2dppx)"
> src="tall2.jpg">
> <img src="fallback.jpg" />
> </picture>
> 
> because it allows the browser to be smart about loading the high or low
> res image depending on the network conditions. The solution purely based
> on media queries doesn't let you do that.
> 
> One final note: the "1x, 2x" ... solution still has one problem that I
> think cannot be properly solved purely in html/css. Even though the
> browser can be smart about which image to used based on network
> conditions, it still cannot escape the fact that to change its mind half
> way through, it will have wasted time downloading the wrong image. It
> may be worth it in some cases, but it is still wasteful.
> 
> I believe the only way out is through an image format that:
> - stores multiple resolutions in one file
> - stores the higher resolution as incremental information on top of the
> low res, so that downloading low res images isn't a waste of time even if
> you want the high res.
> - is designed so that the browser can stop downloading half way through
> the file, if it determines it got sufficiently high resolution given the
> environment.
> 
> This would allow browsers to switch from wanting a high res image to
> wanting a low res image without having to restart the download from
> scratch, which is really bad, as the main reason for switching from high
> to low is a bad network. When the browser is aiming for the high res
> image, it still gets some lower quality image to display temporarily while
> the higher quality image is being downloaded.
> 
> I am not enough of an image guy to know if progressive jpeg or webp or
> some other existing format has these characteristics.
> 
> The "1x, 2x..." syntax probably needs to be tweaked to accommodate such
> images:
> srcset="standard.jpg 1x, progressive.prog 0.1-4x"
> 
> Even if we don't have an existing format for that, the html syntax should
> probably anticipate it, so that soon-to-be implemented UAs don't get
> confused when they get served content from the longer term future that
> uses this syntax.
> 
> As an aside, This syntax might work to mix raster images and vector
> images: srcset="foo.svg 0.1-0.5x, foo.jpg 1x"