Revised Picture Element
A quick look at the latest proposal for responsive images, a revised version of the <picture> element taking inspiration from the src-n syntax.
Responsive images are still an area where we’re yet to standardise on an approach despite the numerous proposals that have been put forward. But I am optimistic that 2014 is going to be the year where a standard emerges and hopefully towards the latter part of the year we can begin to implement the draft standard with some confidence following its implementation by a browser vendor or two. Yes miracles can happen!
The latest proposal, an updated <picture> element, seems to cater for the now comprehensive list of responsive image use cases very well. So if it’s not the solution we’ve all been waiting for, it can’t be far away. It takes some inspiration from the src-n responsive images syntax proposed in October 2013 by Tab Atkins from Google.
One feature of a responsive image format I’ve been keen to see served by the proposals is handing over more control of the selection of a source image to the user agent itself. Coming from a web designer that may seem odd but there are a few reasons for this:
- Firstly, whilst having the control to specify media queries is great and I imagine useful in some situations most of the time I don’t understand why we need to be that verbose. As proposed with the src-n syntax we should really just describe the images we are making available to the user agent i.e. specifying the dimensions and pixel densities of the images and leave the choice up to the user agent. As after all it’s rendering the page so knows exactly what size the image is going to be displayed at. It’s also much better informed than our media queries ever could be as to the users connection speed.
- Secondly, I don’t feel comfortable specifying media queries within HTML as we’re duplicating breakpoints that are already declared in our CSS and that feels plain wrong. Imagine a page with 60 thumbnail images, each of which has 3 different source images at different dimensions. Based on media queries, we’d have to duplicate our three media query breakpoints for every single image. That shouldn’t be encouraged!
So in conclusion the refreshed <picture> element looks really promising but also makes available some syntax approaches that are less desirable. But I guess that’s web design all over, there’s more than one way to skin a cat and not all of them are best practice!
