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
