[whatwg] Features for responsive Web design

[Jason Grigsby]

On May 15, 2012, at 4:51 PM, Tab Atkins Jr. wrote:

> I suspect this is simply confusion about the proposal - @srcset
> handles the "art-directed" case same as <picture>, just with a
> somewhat more compact microsyntax rather than using MQs directly.  (On
> the plus side, the slightly-special processing of the microsyntax
> ensures that at least one image will be chosen no matter what, while
> it's unclear how an MQ-based solution will work if none of the MQs
> match.)
> 
> Given that @srcset was generated as a solution to the use-cases that
> the CG brought up, it would be difficult to justify it if it didn't
> handle those cases.  ^_^

I understand that @srcset is intended to also address art direction. I fear that my attempts to explain the art direction need haven’t been sufficient and thus it seems like @srcset supports it, but really doesn’t. BUT because I find @srcset confusing, I can’t tell if my impression is correct or if I just don’t get @srcset.

The key thing I’m trying to wrap my mind around is that I will want to make a layout change at a certain viewport width. Say that layout change also means that I’m going to go from images that are rectangular to thumbnails that are square.

That layout change may happen at 600px. The thumbnails are 100x100. The images used above the 600px breakpoint are 300x150.

In the @srcset syntax, I *think* I would end up with something like this:

<img src="a.png"
     srcset="a-rectangle.png 300w 150h 1x,
             a-square.png 100w 100h 1x">

With a viewport width of 400px, the media query I defined to modify my layout would take affect. The layout would thus assume a square image. But @srcset would pick the rectangle image because both images are smaller than the viewport and the algorithm that Hixie defined says, “then of the remaining images pick the widest one, if any have a width, tie-breaking by picking the tallest one”.

This is where the disconnect on the art direction side happens. From a layout perspective, we’ve making decision based on viewport size (or whatever other media query we want, but primarily viewport size). But from the img tag perspective, we’re selecting images by comparing image size to viewport.

It seems to me that the differences in these comparisons will inevitably cause problems for the art direction use case because they will be out of sync.

-Jason