- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 6 Sep 2012 18:36:18 -0700
- To: WHATWG List <whatwg@whatwg.org>
- Cc: John Mellor <johnme@chromium.org>
This email is an extension of the thread started at <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-August/036953.html> 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 either. 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. ~TJ
Received on Friday, 7 September 2012 01:37:07 UTC