After a lot of reading over the weekend and a fair bit of discussion on the WHATWG mailing list, \u00a0I’ve come to a couple of conclusions:<\/p>\n
<img srcset><\/code> works<\/li>\n- I still don’t want it, and still do<\/em> want
<picture><\/code><\/li>\n<\/ol>\nThe appeal of <picture><\/code> is that you can select different image sources based on any media query, giving you fine control over which version is served under various conditions. Currently this includes viewport width\/height, device orientation, pixel density, colour capability etc, and as more media queries arrive (surely there will be a connection speed query sooner or later, and I’d love to see containing element width\/height as well) the element becomes even more useful and flexible. Initially, I thought <img srcset><\/code> was an attempt to avoid creating a new element by shoehorning this functionality into a new attribute.<\/p>\nIn fact, <img srcset><\/code> comes from a radically different angle. For each version of the image, we add an entry to the srcset<\/code> attribute with the filename, and optionally the width, height and resolution (expressed as “1x”, “2x” etc). The user agent<\/em> then decides which version to serve, based on the metadata we’ve given it and the current conditions on the client (viewport, connection speed, pixel density, user settings, etc). Unlike <picture><\/code>, authors aren’t specifying which source to use and when; rather, we’re just telling the user agent what’s available and letting it make the call on its own. <img srcset><\/code> allows authors to provide lots of different versions of an image, but affords us no control over when they are used.<\/del><\/p>\nUpdate:<\/strong>\u00a0I had this wrong, and so did quite a few other people. There’s still some ambiguity, with the spec contradicting itself in places. Jeremy Keith has done an excellent job of clearing up what the parameters in srcset actually do in his post<\/a> today.<\/p>\nWhen we practise responsive design, we are trying to give the best possible experience to our users by adapting our websites to work with whatever they are using to access them. <picture><\/code>, by design, gives us the control to do this with content images. <img srcset><\/code>, by design, takes it away.<\/del><\/p>\nOf course, <picture><\/code> is imperfect (duplication of alt<\/code> attributes is annoying, as is the potential duplication of media queries on some pages), but in my view it’s the best path to continue down.<\/p>\n","protected":false},"excerpt":{"rendered":"After a lot of reading over the weekend and a fair bit of discussion on the WHATWG mailing list, \u00a0I’ve come to a couple of conclusions: Initially, I totally misunderstood how <img srcset> works I still don’t want it, and … Continue reading