Re: [css4-images] The image-set() function (for responsive images)

On Tue, Feb 28, 2012 at 2:16 PM, Edward O'Connor <eoconnor@apple.com> wrote:
> Tab Atkins wrote:
>> Why not make the ordering matter? If you just write the sources in
>> decreasing dpi order, you can still just pick the first one you can
>> successfully render.
>
> But "the first one you can successfully render" isn't what image-set()
> is about. The author really doesn't know which asset would be best—that
> depends on a variety of factors. It might even differ in the same UA on
> the same device (e.g. asset choice based on current page zoom). Asset
> choice based on a scale factor isn't (solely) about device resolution
> and, well, bigger isn't always better.
>
> This is really different from image()'s directionality annotations.
> Directionality annotations don't affect which asset you choose, they
> only affect whether or not you flip the asset after you've chosen it.

You've convinced me.

Okay, so it's definitely useful for responsive designs to ship images
of different resolution, and it's useful to let the UA decide
on-the-fly which one it wants to download (and even change its mind
later as the user zooms, etc.).

Your use of an 'x' unit is unnecessary - it's identical to the dppx
unit, as far as I understand.

What other information might want to go into the unordered-choice set?
 I'm wondering if we can come up with a better, more descriptive name
than 'image-set'.

fantasai and I discussed this a bit yesterday, and came up with an
alternative syntax to build it into image() - it's still a
comma-separated list of ordered fallbacks, but within each entry you
can provide a slash-separated list of unordered fallbacks that the UA
can choose between at will.  Your example would then be:

image("foo.png", "foo.jpg" 1dppx / "foo@2x.jpg" 2dppx, "foo.bmp");

I'm not sure I like this, but it's an idea.

~TJ

Received on Wednesday, 29 February 2012 16:59:20 UTC