[whatwg] <img srcset> for responsive bitmapped content images

[Tab Atkins Jr.]

This proposal has a similar issue to image-set() - if the 2x means
"twice the resolution" (which it should), this will *not work by
default*.  If you make a 5 inch wide image and save it as 200dpi, when
you send it to the browser its automatic size will be 10 inches wide.
Browsers are constrained by back-compat to always display images at
96dpi.  You can get around this by explicitly setting <img width>, but
we shouldn't require that if we can avoid it.

This isn't hard to fix, of course; the fix just isn't included right now.

CSS3 Images has the image-resolution property, which lets you tell the
browser what resolution to display the image at (that is, how it
should determine the automatic size).  You can say "image-resolution:
from-image;" to get it to use the image's native resolution, whatever
it is.  So, we need to add a rule to the UA stylesheet that says
"img[srcset] { image-resolution: from-image; }".

In the closely-related case of using image-set() in CSS, we can just
have the "winning image" set the default resolution.  An earlier
version of the image() function let you set an image's resolution
immediately, but we punted it for simplicity at level 3.  This would
do the same thing.

That all said, I don't like the "2x" notation.  It's declaring "this
image's resolution is twice that of a normal image".  This has two
problems.  For one, we already have a unit that means that - the dppx
unit.  Using "2dppx" is identical to the meaning of "2x".  Since
image-set() is newer than the dppx unit, we should change it to use
<resolution> instead.

For two, I'm not sure that it's particularly obvious that when you say
"2x", you should make sure your image was saved as 196dpi.  You have
to already know what the default resolution is.  As well, I think that
values like 300dpi are pretty common, and they don't map to integral
'x' values.  If people say "screw it" and use "3x", this'll be
slightly wrong and I think will cause ugly blurring.  If we make this
take <resolution>, people can just use the dpi unit.

I agree overall that this is the right approach - declaring relevant
information to the browser and letting it decide what to do is better
than trying to set up constraints by yourself.  For example, using MQ
could result in the silly situation of downloading a high-res image at
first because you're on 4G, then throwing them away and downloading
low-res images when you drop to 2G.  Using image-set() or @srcset
would let the browser keep the images it had already downloaded.

~TJ

~TJ