Request for Feedback: A proposal based on picture, base element and misc ideas

Hello all,

I tried picking up as much info from past discussions as humanly possible... I still think there are issues brought up that I haven't heard about, but I've been reading a lot and maturing an idea that mixes a bit of the picture proposal by the almighty Bruce Lawson, the base element (as in, setting a page-wide"setting") and one or other message that I can't remember where I read it nor find it now. 
(I did refrain from changing the base element as it already has a very specific meaning and purpose)

So, I ask for your forgiveness if this brushes closely on any past proposals I might have glanced on but not memorized the author. I'd be happy to give credit to whoever posted something like this earlier and quietly step backwards into the shadows. ;)

I caught a message from Kornel Lesiński on the WHAT-WG that helped me put this together, but it might not be complete. That's where you come in. Examine and please, give feedback before sending this to the what-wg for review.

On 18 May 2012 22:19, Kornel Lesiński <kornel@geekhood.net> wrote:

>If you'd like to see <picture> proposal succeed, then please help fixing its
> drawbacks. Make selection and embedding of 2x images easier. Give UA freedom
> to use cached higher-quality images when it can. Give UA freedom to choose
> images to minimize bandwidth or maximize quality. Reduce verbosity of most
> common cases.




PROPOSAL

tl;dr: 
allow for global (<head>) and local (<source>) specification of pixelratio or use media-queries (from the spec). Also, specify order (or infer it) to allow the user-agent to know never to downgrade a "better" for a "worse" version.

---------------------

Scenario 1:

Regular cases, local control (on the element):
Normal:
<picture src="foo.jpg"></picture>

For retina only:
<picture src="foo.jpg" pixelratio="2"></picture>

Multiple pictures:
<picture>
 <source src="foo.jpg">  <!-- regular -->

 <source src="foo.2x.jpg" pixelratio="2">   <!-- retina -->

 <source src="foo.2x.jpg" media="min-width: 1200px">   <!-- large screens -->
</picture>

result:
 foo.jpg by default
 foo.2x.jpg on pixelratio=2 devices
 foo.2x.jpg on screens larger than 1200px


Scenario 2:
Global control (on the <head>):


<head>

<!-- <pictureprofile value="default">  (implicit) -->
<pictureprofile" value="highdensity" pixelratio="2">
<pictureprofile" value="large" media="min-width: 1200px">

 <!-- more than one pictureprofile might be activated at any given time. the source order will determine which gets loaded ("best"). should be accessible via DOM, too. -->
</head>

<body>

 <picture src="foo.svg"></picture>
 <picture src="foo.svg" profile="all"></picture>

 <picture>
  <source src="foo.svg">
 </picture>
  <!-- foo.jpg is always used whichever the profile -->

 <picture>
  <source src="foo.jpg" alt="Picture of the president" order="2">
  <source src="foo.2x.jpg" alt="Picture of the whole gang!" profile="highdensity large" order="1">
 </picture>

 <!-- foo.svg is used on all profiles
  foo.2x.jpg is used both on highdensity and large profiles, specified in head.
 -->
 


This allows for:

1) small, cut to the chase usage
2) usage if author has limited access and can't change the <head> (with local attributes, albeit a bit verbose)
3) verbosity lowered if author can change the head and establish page-wide profiles that can carry the weight of detection and switching.
4) author can order the sources to avoid the UA from dowgrading a better version for a worse one
5) allows for an alt text for each version.



This needs:

 Introduction of new elements:
 -----------------------------------------------------
 <picture>
  with optional attributes: src, alt, profile, media, width, height. + all the common ones
 <pictureprofile> (on head only)
  with attributes: value (mandatory), pixelratio, media

 Introduction of new attributes:
 -----------------------------------------------------
 @pixelratio on: 
 picture, source
 (I used the pixel ratio as multiplier to keep it close to what has been presented, but it could receive either: 
 2x, 300dpi, 118dpcm. I feel the name should be updated to something more appropriate: resolution, perhaps?)

 @media on:
 source

 @profile on:
 source
 (space separated list of keywords, specified on <pictureprofile> elements in the <head>)

 @order on:
 source    
 (although, this might be optional. the order is infered by the <source> elements order, having the last source be the "best" over the previous and so forth. but to be explicit, order attribute could be used/allowed)

 @alt on:
 source
 (it allows for different alt's for different sources)






Please, rip this apart, give feedback and try to find holes in this.

My plan is to gather feedback here and bring this to the WHAT-WG list soon for review, so I'd ask you to refrain from forwarding this there right away.

I'm also sorry if I didn't follow any more formal format for proposals, but I'm rushing to get this out to more experienced eyes that mine asap. 


Thanks,
--
André Luís
http://id.andr3.net

Received on Sunday, 20 May 2012 01:46:23 UTC