[whatwg] Features for responsive Web design

[Tab Atkins Jr.]

On Wed, May 16, 2012 at 12:14 AM, Mikko Rantalainen
<mikko.rantalainen at peda.net> wrote:
> 2012-05-16 03:26 Europe/Helsinki: Tab Atkins Jr.:
>> On Tue, May 15, 2012 at 5:15 PM, Jason Grigsby <jason at cloudfour.com> wrote:
>>> 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">
>>
>> Nope, what you want is this:
>>
>> <img src="a-square.png" srcset="a-rectangle.png 600w">
>>
>> Use "a-square.png" by default, and "a-rectangle.png" only if the
>> window is at least 600px wide.
>>
>> I agree that the syntax doesn't make this obvious - it's *too*
>> compact, so there's no redundant indicators of what the "w" number
>> means.
>
> I think that the correct syntax would be
>
>    <img src="a-square.png" srcset="a-rectangle.png 2x 600w">
>
> because the author assumes that the image will be rendered as 300x150.
>
> I agree that the @srcset can handle the "art-directed" use case as well,
> but one needs to specify media-query-like value for the "w" parameter
> and then compute the "x" parameter to match the expected size of the
> image. In many cases, the "x" parameter will have a non-integer value.
> Not as simple as most authors would want but I think that's acceptable.

No, the "w" and "h" parameters have no effect on the image's size at
all.  They're solely used to help pick an image.

To have the image rendered at 300x150, just *send* a 300x150 image.
(Or, if the resolution parameter is "2x", send a 600x300 image, etc.)

~TJ