[whatwg] srcset isn't future-friendly to screen size differences

Tab Atkins Jr. jackalmage at gmail.com
Thu Sep 6 18:36:18 PDT 2012

This email is an extension of the thread started at
by John Mellor, distilling the core problem he has into a more
easily-understood and digested form.

The srcset attribute, as currently written, is not friendly to large
screen-size differences that don't trigger different "art direction".

Consider the following example:

<img srcset="800.jpg 1x, 1600.jpg 2x" style="width: 100%; height: auto;">

For a screen that's somewhere near 800px wide, this works just fine.
However, a 1x screen 1600px wide (not too uncommon - I think a 19"
monitor is roughly that width) will get served the 800.jpg image,
which then gets blown up to an unattractive level.  The 1600.jpg file
should be identical to the 800.jpg file, just higher resolution, so
delivering it instead would be ideal, but the current syntax doesn't
allow that, nor does it allow any reasonably reliable way for a
browser to detect that it would be okay to serve the 1600.jpg image

I'm not sure how best to solve this, but John Mellor suggested
allowing the specification of the image's native dimensions somehow.
That way, the browser could know that the 1600.jpg image is
appropriate to serve as an 800px wide high-dpi image, or a 1600px wide
low-dpi image.

It is possible to address this by repeating the same image at a larger
breakpoint, like:

<img srcset="800.jpg 1x 1599w, 1600.jpg 2x 1599w, 1600.jpg 1x">

However, this means you're duplicating data, and have a chance of
failing to update all of the urls when you update one.  It also
becomes more hostile as future screens arrive with higher resolutions.
 For example, if 3x screens showed up, one would have to write the
following to serve things in the most ideal manner:

<img srcset="800.jpg 1x 1599w, 1600.jpg 2x 1599w, 2400.jpg 3x 1599w,
1600.jpg 1x 2399w, 2400.jpg 1.5x 2399w, 2400.jpg 1x">

At this point it's just silly, and very error-prone.


More information about the whatwg mailing list