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

On Tue, Feb 21, 2012 at 4:57 PM, Edward O'Connor <eoconnor@apple.com> wrote:
> Hi all,
>
> It's all too easy for authors to make mistakes when adapting their sites
> for high-resolution displays such as the iPhone's Retina display.
> Consider the following stylesheet:
>
>  …
>  selector {
>    background: url(foo-lowres.png) center;
>  }
>  …
>  @media mq {
>    …
>    selector {
>      background: url(foo-highres.png) center / 100px 100px;
>    }
>    …
>  }
>  …
>
> The references to the low- and high-resolution variants of foo.png are
> far apart from one another in the stylesheet, and the (potentially
> complicated) selector has been duplicated. On a large site with many
> image assets, this causes stylesheets to become very large and less
> maintainable. Here are just a few of the problems with the current
> situation:
>
> * Bugs due to non-locality: One developer fixes a bug in the selector,
>  but only in the low-resolution case. Another developer changes an
>  image reference to refer to a different icon, but only in the
>  high-resolution case.
>
> * Both assets may be loaded by the browser, which may degrade
>  performance in a constrained bandwidth environment.
>
> * Authors can't specify both assets inside a style="" attribute.
>
> I'd like to propose a new function for the Images module. This function
> will allow developers to provide, in a compact manner, multiple variants
> of the same image at differing resolutions. Using @media pushes the two
> asset references apart from one another, whereas such a function keeps
> related asset references together. It also helps keep selectors DRY.
> We've called it image-set(), and it takes one or more image specifiers.
> Image specifiers consist of an asset reference and a scale factor:
>
>  image-set( imagespec [ ',' imagespec ]* )
>  imagespec ::= <image> S {num} 'x'
>
> The above example could be rewritten using image-set() like so:
>
>  selector {
>    background: image-set(url(foo-lowres.png) 1x,
>                          url(foo-highres.png) 2x) center;
>  }
>
> By using image-set() here, the author is saying that foo-highres.png is
> twice the resolution of foo-lowres.png. UAs which support image-set()
> could then use the 2x image on a high-resolution display, and the 1x
> image on a low-resolution display. UAs aren't required to fetch the
> assets in order to determine which should be displayed, so we avoid
> redundant asset loading.

The image() function previously had the ability to specify the
resolution of an image layer.  I've punted it to level 4 for now.  Can
we just piggyback on that, and allow browsers to prioritize images of
"appropriate" resolutions?

~TJ

Received on Wednesday, 22 February 2012 02:17:08 UTC