[whatwg] add html-attribute for "responsive images"

[Markus Ernst]

Am 25.01.2012 15:07 schrieb Matthew Wilcox:
> In fact, please just read the blog post Bruce Lawson (Opera Software)
> made summarising the last few months of effort on this, and his proposal
> for a mark-up level solution (which I'm in broad support of, though there
> are a lot of knotty issues with any potential solution - as can be seen by
> the volume of blog-posts, comments, and articles on the topic):
>
> http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/

I would like to propose a use case different from the ones in this 
blog-post: Scaled images.

The more physical screen densities improve, the less image pixels 
actually correspond to device pixels, and thus scaling images will be 
less a problem. E.g., designers might want to define an image size in em 
units rather than in px, so it keeps its relation to the text size.

This use case requires a negotiation based on the dimensions of the 
image element rather than the dimensions of the media. It would be nice 
if a solution to the responsive images problem would address this use 
case, too. AFAICS this would require a more general syntax for the 
conditions.

> On 25 January 2012 13:42, David Goss<dvdgoss at gmail.com>  wrote:
>> I'm proposing this (adapted from Bruce Lawson's<picture>  idea, and similar
>> to how the<video>  element works):
>>
>> <adaptiveimg>
>>     <img src="sweater-small.jpg" alt="Blue v-neck sweater in soft wool">
>>     <source src="sweater-medium.jpg" media="(min-width: 300px) and
>> (max-width: 450px)">
>>     <source src="sweater-large.jpg" media="(min-width: 451px) and
>> (max-width: 600px)">
>>     <source src="sweater-huge.jpg" media="(min-width: 601px)">
>> </adaptiveimg>

If the introduction of a new element is an option, it could also be the 
other way around, as image maps work:

<img src="default.gif" srclist="mySrcList" id="myImg" alt="My responsive 
image" style="width:5em;height:auto">
<srclist id="mySrcList">
   <source src="low.gif" cond="[condition]">
   <source src="high.gif" cond="[condition]">
</srclist>

To address my above use case, I replaced the media attribute with a more 
general cond attibute, which can take a condition with a selector and a 
rule. The selector can be the keyword "media" or a CSS selector, and the 
rule either a min-width and/or max-width declaration, or some statement 
about network speed or whatever, such as:

<source src="small.gif" cond="#myImg{max-width:49px}">
<source src="medium.gif" cond="#myImg{min-width:50px;max-width:99px}">
or:
<source src="small.gif" cond="#wrapper{max-width:320px}">
or:
<source src="small.gif" cond="media{max-width:320px}">
or:
<source src="slow.gif" cond="media{network-speed:[some slow value]}">