[whatwg] Media queries, viewport dimensions, srcset and picture

[Markus Ernst]

Am 22.05.2012 12:46 schrieb Andy Davies:
> On 22 May 2012 10:43, Anne van Kesteren<annevk at annevk.nl>  wrote:
>> On Tue, May 22, 2012 at 10:21 AM, Markus Ernst<derernst at gmx.ch>  wrote:
>>> I am somehow surprised that there are no reactions to this proposal. To me
>>> as a humble author it looks like it would address the main issue of both
>>> <picture>  and @srcset, as it leaves the MQ to CSS, and thus separates design
>>> from content.
>>
>> 1. It does not address the pixel density use case. 2. A pattern-based
>> approach was actually mentioned in Ian Hickson's email when he
>> announced the srcset attribute.
>>
>
> It doesn't address the "art-direction" use case either -
> http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/

You can do art direction by setting the width in the style sheet:

@media all and (max-width: 500px) {
   .contentimg {
     width: 100px;
   }
}
@media all and (min-width: 501px) and (max-width: 800px) {
   .contentimg {
     width: 300px;
   }
}
@media all and (min-width: 801px) {
   .contentimg {
     width: 500px;
   }
}

<img class="contentimg"
   src="img/obama-500x333.jpg"
   sizes="100x67 200x134 300x200 500x333"
   pattern="img/obama-{w}x{h}.jpg"
   alt="President Obama speaking at a Chrysler plant">

You supply a cropped image with 100x67 and 200x134 versions, and the 
full image with the bigger versions, which serves the art direction use 
case. Retina displays that match the first MQ will likely use the 
200x134 version rather than the 100x67 one, which serves the pixel 
density use case.

I admit that it is not entirely intuitive, and does not give the author 
full control. There may be conflicts between a cropped 200px wide image 
intended to use in 2x displays, and a full 200px wide image for bigger 
but 1x displays. Or a future 3x display may use the 300x200 version, 
where the visual situation would require the cropped image.

I am far away from insisting in this solution; I am aware of the fact 
that there have been long discussions by people who have far more 
understanding on the topic than myself.

It looks to me like the pixel density use case is better addressed by 
leaving the choice on the appropriate resource to the UA, and providing 
it information on the resources rather than a MQ. While the art 
direction use case is better addressed with a MQ undoubtedly.