Teaser text: The mobile tide is turning, everybody’s still yelling about upgrading Picturefill, and hey! Shirts!
Yoav’s hard work – getting w
descriptors and sizes
support into WebKit – is paying off. Support for both features has been confirmed in iOS 9 betas. Responsive image features are great everywhere, but they were really built for small screens. Landing resolution switching in the most popular mobile browser in the world is a big, big deal. Both Chrome for Android and Lollipop web views already support the features; soon, most newish mobile devices will be fully srcset
and sizes
capable.
We’ve come so far since the first desktop implementations started to ship last fall. What better way to celebrate than by, oh, I dunno, buying something?
Just get a load of these new RICG Shirts! And hoodies!
Designed by Geri in Nottingham.
Maybe you’ve heard? Picturefills <2.3.1 are holding back the progress of the platform. The RICG and friends are trying to make as much noise as possible about this – since I last shouted at you with a megaphone about it, both Greg Whitworth at Microsoft and Jeff Lembeck at A List Apart have weighed in.
Greg’s post is particularly interesting, as it details the damned-if-you-do, damned-if-you-don’t dilemma that the prevalence of old Picturefills put his team at Microsoft in, re: currentSrc
.
One last note: I mentioned that the official WordPress plugin had made the jump to 2.3.1 last week, but forgot to tell you that the Drupal responsive images module did, too. Upgrade your Drupals!
-
Jason Grigsby has almost completed his wondrously clear and concise series, “Responsive Images 101”. Here’s the latest on responsive images in CSS aka
image-set
(but not yet). -
Most of the performance talk about images focuses on how long they take to load over the wire, but that’s where their performance impact begins. Tim Kadlec took a deep dive into mobile image processing at Velocity Santa Clara, talking about how image processing actually works under the hood, and how images clog up small devices’ CPUs and memory, in addition to their internet connections. A great, technical talk with some important lessons and work-arounds: slides, video.
-
Speaking of performance, here’s a nifty little library that uses CSS gradients as image placeholders, in order to reduce visually jarring image paints and help pages feel faster. Pairs well with lazy-loading.
-
The Picturefill folks have added a gotcha section to their docs, discussing common pain points: double downloads, Firefox bugs,
vw
vs%
, and art directing down to no image at all using transparent gifs. -
Smashing Book 5 with a respimg chapter by Yoav is out.
-
Etsy is using
srcset
andsizes
in their Seller Handbook articles. Their CMS integration appears to be particularly impressive. -
Morten Rand-Hendriksen has been thinking deeply about how responsive images challenge some of the fundamental assumptions behind WordPress. He’s written not one, but two posts on the topic.
See you in a couple of weeks!
—eric