[whatwg] add html-attribute for "responsive images"
Bjartur Thorlacius
svartman95 at gmail.com
Wed Aug 31 15:38:07 PDT 2011
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).
More information about the whatwg
mailing list