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

Anselm Hannemann anselm at novolo.de
Tue Feb 7 23:14:08 PST 2012


Am 08.02.2012 um 01:54 schrieb Kornel Lesiński:

> On Tue, 07 Feb 2012 14:49:16 -0000, David Goss <dvdgoss at gmail.com> wrote:
> 
>> I guess I've moved away from similarities with <video>, in that I've
>> been thinking of the <img> as the default content, not the fallback
>> content. Going with your angle for a simple example with two sizes:
>> 
>> <picture alt="alternative text" src="default.jpg">
>>  <source href="large.jpg" media="min-width:700px" />
>>  <img alt="alternative text" src="default.jpg" />
>> </picture>
> 
> A new element may be an opportunity to get the "alt" right, i.e. in element's body, not flattened in an attribute.

Is there a reason for this? I think this is more confusing than everything else. And, an alternative text shouldn't have markup.
Alternative text should be all for accessibility. What you thinking about might be the title-attribute. But I'm totally against this approach to do this inside the element w/o attribute.
And I think screenreader won't be happy with that, too? (not sure about that).

> <picture>
>  <source href="wide.jpg" media="orientation: landscape" />
>  <source href="narrow.jpg" media="orientation: portrait" />
> 
>  <img alt="alternative text" src="default.jpg" />
> 
>  alternative <em>text</em>
> </picture>
> 
> 
> For DPI/filesize selection I'd prefer something simpler:
> 
> <picture src="large.jpg" lowsrc="small.jpg"> <!-- or <source high-dpi-href="" or such> -->
>  alternative <em>text</em>
> </picture>
> 
> as it's going to be very hard to write a media query that takes into account various screen sizes, DPI and bandwidth/metering at the same time.

This is similar to my approach using the common img-tag. In that case we don't need a new element.
But as you've said many people (also here) find it a bit hard to write. Imagine using 6 different image sizes in that case…
You can read arguments some mails before on my approach.

> When browser has a high-quality image the cached already, but media query for "network-connection: gprs" matches, it would be shame to force it to switch to a lousy image.
> 
> -- 
> regards, Kornel Lesiński
-Anselm


More information about the whatwg mailing list