[whatwg] img srcset / css image-set issues

[Tab Atkins Jr.]

On Tue, Aug 21, 2012 at 4:28 PM, John Mellor <johnme at chromium.org> wrote:
> On Tue, Aug 21, 2012 at 8:31 PM, Tab Atkins Jr. <jackalmage at gmail.com>
> wrote:
>>
>> On Tue, Aug 21, 2012 at 12:20 PM, John Mellor <johnme at google.com> wrote:
>> > 1. Neither is of any use for flexibly-sized images.
>>
>> This is what Media Queries and the similar 'w' and 'h' tokens in
>> @srcset are for.  You can create one pair of 1x/2x images for one size
>> of screen, and another pair for another size of screen.
>>
>
> While it is indeed possible to abuse the w/h tokens in this way, it's so
> impractical as to not be worth using. Take the simple example above where
> you have the same image saved in 4 sizes -- 320.jpg, 640.jpg, 1280.jpg and
> 2560.jpg, named after their widths -- and you need it to scale across mobile
> and desktop. With my proposed syntax you just declare each available size
> once, and the browser does the rest:
>
> <img srcset="320x120, 320.jpg 1x, 640.jpg 2x, 1280.jpg 4x, 2560.jpg 8x">
>
> Whereas using only the w/h and x tokens, to properly support devices of
> various dppx's you have to use the following 16 entry monstrosity (that I
> had to generate by script):
>
> <img srcset="
>     320.jpg 400w 1x,
>     320.jpg 320w 1.25x,
>     320.jpg 267w 1.5x,
>     320.jpg 200w 2x,
>     320.jpg 160w 2.5x,
>     640.jpg 800w 1x,
>     640.jpg 640w 1.25x,
>     640.jpg 533w 1.5x,
>     640.jpg 400w 2x,
>     640.jpg 320w 2.5x,
>     1280.jpg 1600w 1x,
>     1280.jpg 1280w 1.25x,
>     1280.jpg 1067w 1.5x,
>     1280.jpg 800w 2x,
>     1280.jpg 640w 2.5x,
>     2560.jpg 10x
> ">
>
> (and in the image-set case, doing this with media queries would be even more
> horrific)

No you don't.  Just do this:

<img style="width:100%;" srcset="320.jpg 1x, 640.jpg 2x, 1280.jpg 4x,
2560.jpg 8x">

Or the equivalent in CSS, which is a bit more wordy but fundamentally the same.

I doubt this is actually what you want, though - you're probably not
actually trying to cater to devices with an 8:1 pixel ratio!  (Those
may not ever exist, even if technology does make it possible - I think
you drop below human perception about 5x or so.)

Let's assume that, instead, you're trying to serve two versions of the
image: one for small screens and one for larger screens, and each
version has two resolutions.  In that case, you'd do this:

<img style="width:100%" srcset="320.jpg 1x 320w, 640.jpg 2x 320w,
1280.jpg 1x, 2560.jpg 2x">


> I'm glad you intend them to be the same. But currently they are very
> different semantically. With image-set you just provide the intended dppx of
> each image, and let "the UA decide which is most appropriate in a given
> situation"[source], i.e. it can be expected to pick the closest match.
> Whereas with srcset, "2x means maximum pixel density of 2 device pixels per
> CSS pixel"[source] (emphasis on the "maximum"), and step 21 of the algorithm
> reinforces this by discarding anything whose maximum is too small.
>
> The fact that the UA is granted some freedom to fiddle with things doesn't
> change the semantics. And rather than changing image-set to be more like
> srcset, it would be better to change srcset's handling of dppx to be more
> like image-set (since it's more intuitive to provide the intended dppx's
> rather than having to calculate thresholds to use as maximum dppx's).

Again, they are *exactly* the same (except for the fallback issue,
which I'm trying to harmonize now).  The algorithm for <img srcset>
places *no* constraints on which resolution the UA can choose; the
only thing it makes guarantees about is that it will only choose the
images with the smallest size descriptors that aren't too small.

HTML's algorithm is just written a little differently than
image-set()'s, but the meaning is identical - UAs can choose which
resolution version they want based on *any* criteria they choose.


>> > 3. image-set is less flexible than srcset.
>>
>> It's not.  The extra things that @srcset can do are precisely
>> identical to just using Media Queries.
>
> Since srcset and image-set are so syntactically and semantically similar,
> authors are going to expect them to behave the same. The whole point of
> image-set was to avoid having to use media queries to differentiate between
> different dppx screens (because of redundancy, non-locality, etc, as
> eoconnor explained). Being able to use image-set instead of media queries
> for half of srcset's functionality, but not the other half, doesn't make
> much sense.

Once again, using image-set() with MQ is *exactly* the same as the w
and h descriptors in <img srcset>.

We needed image-set() for resolution negotiation because you *can't*
use MQ for that.  Attempting to would have *horrible* usability, as I
explain in <http://www.xanthir.com/blog/b4Hv0>.  However, there's
nothing wrong with using MQ for width/height negotiation; after all,
that's their primary purpose.

~TJ