Re: New responsive images proposal

On Sep 27, 2013, at 3:41 PM, Tab Atkins Jr. wrote:

> On Fri, Sep 27, 2013 at 5:15 AM, Jirka Kosek <jirka@kosek.cz> wrote:
>> On 27.9.2013 11:31, Robin Berjon wrote:
>>> As a responsive images proposal, it certainly has a number of
>>> interesting properties. It address the use cases well while catering to
>>> fallback and without excessively crazy syntax.
>> 
>> I think that proposal is first which would introduce numbered attributes
>> like src1, src2, ..., srcN. I think that we should be very careful
>> before opening this can of worms.
> 
> Thematically, it's similar to other attributes that come in groups,
> like data-*.  But yes, this is somewhat new.  I don't like it much,
> but it was required in order to avoid either using elements or having
> a single super-complicated syntax.

Placing procedural rendering instructions inside the "what image should
I fetch" algorithm seems a bit dicey to me. Viewport percentage rendering,
in particular, adds a complication that is better designed within CSS,
or as a separate attribute, rather than tied to which image is loaded, IMO.

This syntax will also get pretty verbose when typical pathnames are used
instead of picN.png.

Has anyone considered using URI templates [0] for this, so that the
reference can be described once separately from the ranges?

It could look something like (back of the napkin example)

   <img src="sunny-72-100-200-p.jpg"
        template="sunny-{minppi}-{minw}-{minh}-{orientation}.jpg"
        minppi="72 96 163 326"
        minw="30 100 500 1024"
        minh="60 200 1000 2048"
   >

Note that this would declare to the user agent the range of images
available and the effective breakpoints on when to use each one.
The UA chooses from among the values provided for each dimension,
usually by picking the highest value less than or equal to the
image's rendering context (no image is loaded if context is less
than minw or minh).  If no attribute is given defining the range of
values, then a standard range could be used.

The above example has four dimensions with 4x4x4x2 options, which
describes 128 distinct URL references.

The last variable (orientation) is an example standard option,
with a fixed choice of p (portrait) or l (landscape), so it doesn't
need an attribute. It is common for page layouts to differ by
orientation even if minimum width/height dimensions are met.

The src attribute remains for backwards compatibility, and matches
the template in this example just for the sake of efficiency.

[0] http://tools.ietf.org/html/rfc6570


Cheers,

Roy T. Fielding                     <http://roy.gbiv.com/>
Senior Principal Scientist, Adobe   <https://www.adobe.com/>

Received on Saturday, 28 September 2013 00:44:04 UTC