Re: srcN - Alternative to picture and srcset

On Fri, Sep 27, 2013 at 4:57 AM, Scott Jehl <scottjehl@gmail.com> wrote:
> Thanks Tab
>
> A few questions:
>
> 1:
>
> Their most popular attempt so far, the <picture>element, only hits 2 of the
> 3 major use-cases, and has certain aspects that implementors seem to be
> rather unhappy with.
>
>
> Just to clarify,which major use case does picture (or picture with srcset )
> not address?

I was under the impression that <picture> didn't hit the
viewport-discrimination case, unless you did the verbose "repeat urls
multiple times" thing.

> 2: this proposed syntax uses src to reference a large image fallback for
> non-srcN browsers, but it seems more common today to start with a small
> image in src and override upward with media queries - is that possible with
> srcN too?

Yup, you just have to use the opposite MQs.  Example 1 could be rewritten as:

<img src1="(min-width: 1000px) pic-large.jpg"
    src2="(min-width: 400px) pic-medium.jpg"
    src="pic-small.jpg">

Ignoring fencepost errors, this is identical to the code in the
current spec, but fails to the small image in legacy browsers.

> 3. In non-supporting browsers, the src image always will be http
> prefetched,meaning a polyfill for this syntax may not be able to avoid
> wasteful overhead. Element based approaches like picture can avoid overhead
> through use of noscript wrappers on fallback content.  Could srcN be
> polyfilled without waste?

To an extent.  If you avoid use of src entirely and polyfill with
script in downlevel browsers, you'll get good behavior in new
browsers, okay (script-gated) behavior in older browsers running
script, and failure in older browsers without JS.

Alternately, a similar strategy to what you described can be used:

<img src1="..." src2="...">
<noscript><img src="..."></noscript>

This is then similar to the behavior of your proposal - it's good in
up-level browsers running script and down-level browsers not running
script, okay in down-level browsers running script, and bad in
up-level browsers not running script (as both images will be shown).
This last problem could probably be worked around by adding a
src1="0x0_image.png" to the fallback, so the image still shows up in
the page, but doesn't display.

~TJ

Received on Friday, 27 September 2013 16:52:42 UTC