## Two! Browsers! Down!

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.

## ...three to go

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 
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 

**Gecko:** John Schoenick continues to 
[away]( at his [various 
and [is still hoping to get full respimg support on by default in 
FireFox 34 (or 35 by the 

**IE:** Officially, the features are still 
[consideration](” There are 
[positive signs](!

## But more importantly: it’s our turn

- [`srcset` with 
- [`srcset` with 

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!

## Let the tools do the work

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 
that will auto-generate image versions and write your `scrset`s 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!

## Keep those articles coming

The more how-to articles and personal implementation accounts, the 
merrier. Here’s this fortnight’s batch:

- Responsive Images: getting 
[bigger]( in 
all of the time.

- Dudley Storey published [an introduction to 
and promises additional articles on `srcset` and `sizes` in 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!


Received on Saturday, 18 October 2014 15:26:28 UTC