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

[Bjartur Thorlacius]

Bottom (top?) line: User agents should negotiate an appropriate 
message-body size using HTTP. Sending an accept-size (or some such) 
could solve both the problem of high resolution photography and lengthy 
documents. The amount of split articles ("Click here to go to the next 
page / page 4") and long search results show clear demand.

Þann mið 31.ágú 2011 21:32, skrifaði Karl Dubost:
> Anselm,
> (setting reply-to on www-style)
>
> Seen this today, to remind people that it is not just
> something up in the air. People need it.
> http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
>
> I wonder if it could be handled by CSS in fact.
Different technologies seem appropriate depending on the relation 
between the document and the images.
	Use Case A
Multiple representations of a resource may exist, where all can be 
deduced from the original (e.g. by downsampling). Doing the deducing on 
the server is an optimization to save bandwidth.
	Proposed Solutions
1) Nest objects
2) Negotiate content serverside as per HTTP
3) Negotiate content clientside as per HTTP

	Use Case B
An article might link to (directly or, theoretically, via a 
text/uri-list) to a number of non-critical "asides" (i.e. images to rest 
your eyes on, background music, etc), that may be omitted, but are in no 
way the same resource.
	Proposed Solutions
1) Use <link>s or <a>s with an appropriate relation specified
2) Use your favorite linking element (be it a, area, object, img, audio, 
video, link, a future media element not yet specified, or an old one not 
yet deprecated) in an aside.
3) Add the rel attribute to object, and use instead of <a> in 1. See A.1
	Expected Rendering
User agents are to render zero or more of the tolinked resources, 
omitting none, some or all of the resources completely from the output 
viewport, or rendered only on demand.

	
> I guess Anselm, you could ask there.
> On the www-style mailing-list, Charles proposed [1]
>
> 	content: url(img.jpg) replaced;
>
> I'm not sure I fully understand the proposal
> but we can imagine something that could fit nicely
> with the CSS Generated Content Module Level 3 [2]
>
> <img class="responsive" src="http://example.org/foo" alt="wiizz"/>
>
> and then the CSS
>
>
> @media  screen and (min-width:550px) and (max-width:960px) {
>     img.responsive {
> 	url(http://example.org/foobis) replaced;}
>     }
> @media  screen and (min-width:240px) and (max-width:549px) {
>     img.responsive {
> 	url(http://example.org/footer) replaced;}
>     }
And allocate every image a class, and every sample a rule in a style 
sheet? Maybe, if the images are decorative, but I think you can come up 
with a more clever solution using media fragments (either standardized, 
or implemented per site by binding media queries to URI templates).