[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[John Mellor]

One-dimensional solutions like this look pretty but once you combine width
and device-pixel-ratio (resolution) it quickly explodes and you get
num_widths * num_dprs entries. Please read xanthir.com/b4Su0, at least the
example at the bottom showing how srcset quickly gets impractical.

If you want to move the presentational aspects to CSS, you need an approach
closer to my earlier
email<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-November/041432.html>,
preserving the <size-viewport-list> from src-N.

Combining content:replaced with the attr() function is a neat trick though;
you could tweak my earlier approach to give something like the following
(incorporating <size-viewport-list> into CSS image-set, which needs to
happen anyway):

<style>
@media (max-width: 19.99em) {
    .artdirected { content: replaced image-set(128px; attr(srcs-smallicon));
}
}
@media (min-width: 20em) {
    .artdirected { content: replaced image-set(100% (30em) 50% (50em) 33%;
attr(srcs-flexwidth)); }
}
</style>
...
<img class="artdirected" src="fallback.jpg"
     srcs-smallicon="i64.jpg 64, i128.jpg 128, i256.jpg 256"
     srcs-flexwidth="160.jpg 160, 320.jpg 320, 640.jpg 640, 1280.jpg 1280,
2560.jpg 2560">

(note that the above is a maximally complex example, incorporating art
direction, viewport-switching and dpr-switching; most normal cases would be
simpler than this)

This is a little bit more verbose than the split I'd suggested; but I must
admit it gives nice flexibility (the author can use attr when the images
differ for each member of a CSS class, but can include the urls directly in
the style rule if the images are the same for all members of the CSS class).


On Wed, Nov 13, 2013 at 1:56 AM, Christian Biesinger
<cbiesinger at google.com>wrote:

> On Tue, Nov 12, 2013 at 3:06 PM, Markus Ernst <derernst at gmx.ch> wrote:
> > What I don't like about CSS approaches is the fact that changing the
> source
> > of an image is fundamentally different from changing a dimension or
> color of
> > an element. This is not "presentational" in the same way. Having to
> > reference content images in the CSS in order to change their sources is
> an
> > authoring nightmare.
>
> For a bit more presentation, and while we're inventing new syntax
> anyway, how about this:
>
> <style>
> @media (min-width: 480px) {
>   .artdirected { content: replaced url(attr(src-small)); }
> }
> @media (min-width: 600px) {
>   .artdirected { content: replaced url(attr(src-medium)); }
> }
> @media (min-width: 800px) {
>   .artdirected { content: replaced url(attr(src-big)); }
> }
> </style>
> ...
> <img class="artdirected" src="foo.jpg" src-small="foo-small.jpg"
> src-medium="foo-medium.jpg" src-big="foo-big.jpg">
>
> -christian
>