- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 21 Aug 2012 16:45:00 -0700
- To: John Mellor <johnme@chromium.org>
- Cc: whatwg@whatwg.org, www-style@w3.org, Edward O'Connor <eoconnor@apple.com>, Mathew Marquis <mat@matmarquis.com>
On Tue, Aug 21, 2012 at 4:28 PM, John Mellor <johnme@chromium.org> wrote: > On Tue, Aug 21, 2012 at 8:31 PM, Tab Atkins Jr. <jackalmage@gmail.com> > wrote: >> >> On Tue, Aug 21, 2012 at 12:20 PM, John Mellor <johnme@google.com> wrote: >> > 1. Neither is of any use for flexibly-sized images. >> >> This is what Media Queries and the similar 'w' and 'h' tokens in >> @srcset are for. You can create one pair of 1x/2x images for one size >> of screen, and another pair for another size of screen. >> > > While it is indeed possible to abuse the w/h tokens in this way, it's so > impractical as to not be worth using. Take the simple example above where > you have the same image saved in 4 sizes -- 320.jpg, 640.jpg, 1280.jpg and > 2560.jpg, named after their widths -- and you need it to scale across mobile > and desktop. With my proposed syntax you just declare each available size > once, and the browser does the rest: > > <img srcset="320x120, 320.jpg 1x, 640.jpg 2x, 1280.jpg 4x, 2560.jpg 8x"> > > Whereas using only the w/h and x tokens, to properly support devices of > various dppx's you have to use the following 16 entry monstrosity (that I > had to generate by script): > > <img srcset=" > 320.jpg 400w 1x, > 320.jpg 320w 1.25x, > 320.jpg 267w 1.5x, > 320.jpg 200w 2x, > 320.jpg 160w 2.5x, > 640.jpg 800w 1x, > 640.jpg 640w 1.25x, > 640.jpg 533w 1.5x, > 640.jpg 400w 2x, > 640.jpg 320w 2.5x, > 1280.jpg 1600w 1x, > 1280.jpg 1280w 1.25x, > 1280.jpg 1067w 1.5x, > 1280.jpg 800w 2x, > 1280.jpg 640w 2.5x, > 2560.jpg 10x > "> > > (and in the image-set case, doing this with media queries would be even more > horrific) No you don't. Just do this: <img style="width:100%;" srcset="320.jpg 1x, 640.jpg 2x, 1280.jpg 4x, 2560.jpg 8x"> Or the equivalent in CSS, which is a bit more wordy but fundamentally the same. I doubt this is actually what you want, though - you're probably not actually trying to cater to devices with an 8:1 pixel ratio! (Those may not ever exist, even if technology does make it possible - I think you drop below human perception about 5x or so.) Let's assume that, instead, you're trying to serve two versions of the image: one for small screens and one for larger screens, and each version has two resolutions. In that case, you'd do this: <img style="width:100%" srcset="320.jpg 1x 320w, 640.jpg 2x 320w, 1280.jpg 1x, 2560.jpg 2x"> > I'm glad you intend them to be the same. But currently they are very > different semantically. With image-set you just provide the intended dppx of > each image, and let "the UA decide which is most appropriate in a given > situation"[source], i.e. it can be expected to pick the closest match. > Whereas with srcset, "2x means maximum pixel density of 2 device pixels per > CSS pixel"[source] (emphasis on the "maximum"), and step 21 of the algorithm > reinforces this by discarding anything whose maximum is too small. > > The fact that the UA is granted some freedom to fiddle with things doesn't > change the semantics. And rather than changing image-set to be more like > srcset, it would be better to change srcset's handling of dppx to be more > like image-set (since it's more intuitive to provide the intended dppx's > rather than having to calculate thresholds to use as maximum dppx's). Again, they are *exactly* the same (except for the fallback issue, which I'm trying to harmonize now). The algorithm for <img srcset> places *no* constraints on which resolution the UA can choose; the only thing it makes guarantees about is that it will only choose the images with the smallest size descriptors that aren't too small. HTML's algorithm is just written a little differently than image-set()'s, but the meaning is identical - UAs can choose which resolution version they want based on *any* criteria they choose. >> > 3. image-set is less flexible than srcset. >> >> It's not. The extra things that @srcset can do are precisely >> identical to just using Media Queries. > > Since srcset and image-set are so syntactically and semantically similar, > authors are going to expect them to behave the same. The whole point of > image-set was to avoid having to use media queries to differentiate between > different dppx screens (because of redundancy, non-locality, etc, as > eoconnor explained). Being able to use image-set instead of media queries > for half of srcset's functionality, but not the other half, doesn't make > much sense. Once again, using image-set() with MQ is *exactly* the same as the w and h descriptors in <img srcset>. We needed image-set() for resolution negotiation because you *can't* use MQ for that. Attempting to would have *horrible* usability, as I explain in <http://www.xanthir.com/blog/b4Hv0>. However, there's nothing wrong with using MQ for width/height negotiation; after all, that's their primary purpose. ~TJ
Received on Tuesday, 21 August 2012 23:45:58 UTC