W3C home > Mailing lists > Public > public-respimg@w3.org > October 2014


From: Eric Portis <lists@ericportis.com>
Date: Sat, 18 Oct 2014 09:26:03 -0600
To: public-respimg@w3.org
Message-ID: <BA28BBFD-EDCA-4C0C-AD91-F62940234CB8@ericportis.com>
## Two! Browsers! Down!

and [Opera 25](https://dev.opera.com/blog/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](https://bugs.webkit.org/show_bug.cgi?id=133620) ([the `x` 
descriptor bits shipped in iOS 8 and Safari 
7.1!](http://caniuse.com/#search=srcset)), and is hard at work laying 
the [microtask](https://bugs.webkit.org/show_bug.cgi?id=137496) and 
[asynchronous image 
loading](https://bugs.webkit.org/show_bug.cgi?id=134488) 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](http://bugzil.la/srcset-prefon) 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](https://status.modern.ie/pictureelement).” There are 
[positive signs](https://twitter.com/respimg/status/517744964223385600)!

## 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”](https://github.com/aFarkas/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](https://dev.opera.com/articles/ja/native-responsive-images/) 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](http://responsiveimagescg.github.io/eq-usecases/) to me!

See you in a couple of weeks!

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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:06:15 UTC