W3C home > Mailing lists > Public > public-html@w3.org > June 2012

Re: Proposed adaptive image element

From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>
Date: Sun, 24 Jun 2012 06:02:58 +0200
To: Mathew Marquis <mat@matmarquis.com>
Cc: Paul.Cotton@microsoft.com, rubys@intertwingly.net, mjs@apple.com, public-html@w3.org, Ian Jacobs <ij@w3.org>
Message-ID: <20120624060258746958.3014c3b6@xn--mlform-iua.no>
Mathew Marquis, Thu, 21 Jun 2012 23:30:08 +0000:
> a proposal for an adaptive image element to a W3C wiki here:
> http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal


Regarding the proposal in the wiki, then it deviates from "the markup 
pattern established by the HTML video element' in the following details:

  * @src/@srcset is not allowed on the 'picture' container
    <picture srcset="tall.jpg 1x, tall2.jpg 2x"></picture>
  * @alt on the container element.

However, one argument against <picture> instead of an (overloaded)
@srcset on <img>, is <picture>’s (default) lack of support for the
<img> specific attributes such as @alt, @usemap and @ismap etc.

It also strikes me that, if first going for a <picture> element, then
there are many things one would want to consider, such as mark-up based
alternative text instead of attribute based alternative text.

One form of mark-up based alternative text could be to simply specify 
alternative text to be provided via a child <img> element. One could go
even further, perhaps, and let the <img> child element also provide e.g.
the @usemap, @longdesc etc of the <picture>.

The following 3 examples are more <video> pattern adhering than the 
example in the wiki:

   Example 1: without @src/@srcset on container:

<picture>
 <img src="fallback.jpg" alt='alternative text' />
 <source media="(orientation:landscape)" srcset="long 1x,long2 2x">
 <source media="(orientation:portrait)"  srcset="tall 1x,tall2 2x">
</picture>

   Example 2: with @src/@srcset on the container element:

<picture srcset="img 1x,img2 2x" >
 <img src="fallback.jpg" alt='alternative text' />
</picture>

   Example 3: Like example 2 but no @src on the <img> element:

<picture srcset="img 1x,img2 2x" >
 <img alt='alternative text' />
</picture>

[1] 
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/036160.html

[2] 
http://www.w3.org/mid/20120624050514401521.4e33ede6@xn--mlform-iua.no

-- 
Leif H Silli
Received on Sunday, 24 June 2012 04:03:33 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Sunday, 24 June 2012 04:03:38 GMT