[whatwg] img srcset / css image-set issues

[Tab Atkins Jr.]

On Tue, Aug 21, 2012 at 12:20 PM, John Mellor <johnme at google.com> wrote:
> CSS image-set and HTML img srcset are getting their first implementations
> but both APIs have serious shortcomings. We should fix them before it's too
> late:
>
> 1. Neither is of any use for flexibly-sized images.
> 2. srcset isn't as smart/intuitive as image-set.
> 3. image-set is less flexible than srcset.
>
> I'll go through these in turn, in decreasing order of importance (sorry
> about the length, but this is a complex topic and I've tried to avoid
> ambiguity).
>
> (This email is cross-posted to whatwg and www-style, since this is of equal
> relevance to HTML and CSS).
>
> 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.


> 2. srcset not as smart/intuitive as image-set.

The algorithms are meant to be the same.  If you read the HTML
algorithm carefully, you'll notice that, after you've eliminated the
images that violate the 'w' or 'h' constraints, the browser can choose
*any* of the remaining images, based on whatever criteria it wants.
This happens in two places: step 17 is very explicit in saying "UAs
can do what they want"; step 21 is more implicit, as the "nominal
pixel density" is a UA-defined value and can be literally anything.
(There was previously a note in the spec saying this directly, but it
appears to have been removed.)

Ideally, I'd be able to just refer to the HTML algorithm, but it's far
too specialized for @srcset for me to actually use.  Instead, I plan
to include a note pointing to @srcset and indicating that it should be
identical.

There is currently a behavior difference between HTML and CSS - CSS
currently does fallback to less-good images if the first doesn't load,
while HTML doesn't.  I'm going to harmonize the two, either by getting
HTML to do fallback or changing CSS to not do it.


> 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.

~TJ