The Great Spec Merge

Implementations march on

First off: after months of work, John Schoenick published thirteen patches for Firefox last week (http://responsiveimages.us8.list-manage2.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=77ea99f7f4&e=4db00bcdc4) which provide “basically-working” picture, srcset, andsizes implementations! Grab John’s “Work In Progress” builds and see for yourself here (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=582447d254&e=4db00bcdc4).


Over on the Blink side of things, Yoav Weiss has been soldiering on, addingpicture support to the DOM (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=275b44e83a&e=4db00bcdc4) and working on preloading (http://responsiveimages.us8.list-manage2.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=e625dee119&e=4db00bcdc4). Google developer Christian Biesinger landed some changes (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=0a9d5eb5b1&e=4db00bcdc4) to the basic algorithms governing image loading which pave the way for picture.


Christian introduced the concept of “stable state” (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=0243ad2e15&e=4db00bcdc4). Previously Blink would greedily load an image source as soon as it became aware of it it; now it politely waits for processes that might impact the final source before fetching any assets. For instance: the code Yoav is writing to pick a URL out of apicture element and its sources.


Foundational and exciting stuff!

Spec work

Speaking of foundational and exciting stuff, work is being done to integrate picture into the HTML5 spec (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=c2dc2f1e1f&e=4db00bcdc4) proper. WHATWG editor Ian Hickson has concerns about picture’s maintainability and offered to turn over responsibility for the pertinent parts of the Living Standard (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=f1da3bb59d&e=4db00bcdc4) to Simon Pieters of Opera, one of picture’s editors. Simon accepted, and the Group’s GitHub repository (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=62f32883b0&e=4db00bcdc4) is now the canonical home of the WHATWG picture and imgspecifications, which will henceforth be pulled from there into the WHATWG document automatically.


When we started this process we thought we’d get a responsive images solution into specifications first and browsers second. But the web, as they say, runs on rough consensus and functioning code. After years of work we’ve achieved both and have worked our way into the spec the other way ‘round.

Spreading the word

Here are a few front-end-dev-centered, picture-related links from the past couple of weeks:

Scott Jehl talked about PictureFill and responsive images generally on The Big Web Show (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=e3ec3dacb6&e=4db00bcdc4)
Martin Wolf shared his experience (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=9934f727b8&e=4db00bcdc4) learning to use srcset and sizes
Tim Kaldec urged developers (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=72bb0db60f&e=4db00bcdc4) to not let the perfect be the enemy of the good: use the new markup now and work to leverage other layers of the stack to make responsive images even easier, later.
Over at Smashing Magazine, Tim Wright published an introduction to PictureFill (http://responsiveimages.us8.list-manage1.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=024dd79894&e=4db00bcdc4) and yours truly penned a tour of the spec and the use-cases it was designed for (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=1db4762486&e=4db00bcdc4).

Oh, and Sizer Soze is better now

If you gave Sizer Soze (http://responsiveimages.us8.list-manage.com/track/click?u=c988d9ca55d5d09e73a7dc993&id=73f46d77d6&e=4db00bcdc4) a spin after reading about it in the newsletter last week and found it a bit flaky, well, it’s better now. Harder, better, faster, stronger. So go forth and measure how many bytes your non-responsive images are wasting!


See you in a couple of weeks!


—eric