Teaser text: We did it. And there’s work to be done.
Chrome 38 and Opera 25 have landed, bringing responsive image capabilities to hundreds of millions of users for the first time.
To everyone who’s given their time, attention, or money to this multi-year collaborative effort: thank you, and congratulations. We made the web better for everyone forever.
Now seems like a good time to take stock of the work yet to be done. First of all: in browser engines. Armed with spec-editor Simon Pieter’s suite of tests, implementors march on:
WebKit: Yoav has already landed basic srcset and sizes support in WebKit (the x descriptor bits shipped in iOS 8 and Safari 7.1!), and is hard at work laying the microtask and asynchronous image loading foundations that WebKit needs in order to load images in response to changing media conditions (aka all of that work that Christian Biesinger did in Blink).
Gecko: John Schoenick continues to plug away at his various patches, and is still hoping to get full respimg support on by default in FireFox 34 (or 35 by the latest).
IE: Officially, the features are still “under consideration.” There are positive signs!
srcsetwithx: 0.0069%picture: 0.0004%srcsetwithwandsizes: 0.0001%
Those are the percentages of Chrome pageloads that are utilizing responsive image markup right now. So: web developers! Implementors have paved (and continue to pave) the responsive image way; now it’s on us to actually walk it, one picture element and srcset attribute at a time. Go forth and mark up!
Or, wait, a better idea: let computers do it!
Tooling to take care of some of the tedious and error-prone bits of a responsive image implementation is already here to help.
Stephen Max has published a Grunt plugin that will auto-generate image versions and write your scrsets for you.
And Alexander Farkas published a truly wondrous thing, a bit of Javascript called “lazysizes” which lazily-loads images and writes your sizes for you, on the fly. This not only saves you from the trouble of writing sizes by hand — it lets you to keep your markup and presentation entirely separate!
The more how-to articles and personal implementation accounts, the merrier. Here’s this fortnight’s batch:
-
Dudley Storey published an introduction to
picture, and promises additional articles onsrcsetandsizesin the future. I can’t wait! -
Shane Prendergast wrote up an intro to the full suite of markup and his efforts to understand it .
In it, Shane opines:
One of the most confusing aspects is the fact that the widths are based on the viewport and not their containing elements. It would be cool if the browser was smart enough to know how big an image should be inside its container.
Sounds a lot like Element Queries to me!
See you in a couple of weeks!
—eric