Teaser text: We did it.
A long time ago, in a newsletter far, far away*, I reported that picture would be shipping in Safaris in “the fall.” Good news everybody! Apple shipped a webdev-focused Safari point release yesterday, and the headlining feature is picture!
And with that – every major browser is shipping with support for every respimg feature.
Caveat implementor: Apple’s implementation still suffers from some fairly severe bugs. Two biggies: 1) double downloads sometimes, 2) it doesn’t respond to viewport changes.
Tab “The Catalyst” Atkins Jr., who outlined a technical plan for how container queries could work at the RICG meeting a year ago in Redmond, provided a status update in the RICG IRC. TL;DR: he wants to see this feature evolve from the ground up, rather decreeing it from the top, down. Extensible-Web-Manifesto-style.
So:
- Give authors the tools to create their own solutions. Namely: element-level resize events, custom CSS @-rules, and (maybe) an explicit way to break out of some of the thorny circular-dependency issues.
- Nudge authors to create (JavaScript-dependent) libraries and see if any of them gain traction and mature.
- If/when a given solution wins sufficient hearts/minds and achieves a degree of maturity: pull it into the platform; make it native.
To me, this sounds more or less like the path we (eventually) took to get from picturefill.js to <picture>. (Frustratingly) slow, (reassuringly) steady, and (happily) democratic. While we wait for various foundations to be laid, I say we all spend some time thinking about how to implement CQs as a progressive enhancement?
For the impatient: nitty-gritty discussions (and specifications!) about those pesky circularity issues have been kicking up again recently. Read up and chime in!
Efforts continue on all fronts to make the creation, management, and delivery of responsive images as easy as possible.
The coolest tool released during the newsletter’s long haitus: Cloudinary’s responsive images breakpoint generator. A living, breathing, (and free!) answer to Jason Grigsby’s koan: how many differently-sized versions of a given image do we really need, and exactly what should their resolutions be?
It seems like I’ve mentioned this in every newsletter for the last six months, but – responsive images landing in WordPress 4.4 Core was a Big Flippin’ Deal, and has made respimg deployment completely automatic for millions of sites. Tim Evko wrote up a great explainer of how the implementation actually works on SmashingMag.
Speaking of great explainers on SmashingMag, Jon Arne Sæterås penned a great intro to Client Hints. If you want to do more respimg heavy lifting on your server and in HTTP headers and less in markup, Client Hints are the ticket.
Finally, I wrote a little thing on the Cloudinary blog about how to use their smart-cropping features for automatic art direction.
- The excellent and under-appreciated spec intro for respimg features now sports a few snazzy (and helpful!) illustrations, courtesy of editor Simon “Non-Normative” Pieters.
- While most of us are only just now dipping our toes into generating WebPs and JPEG-XRs, the next next generation of image formats continues to take shape. The FILF folks wrote a few words about their new
--lossymode, and the Daala crew (whose in-development video codec includes an innovative still image coder) is getting awfully close to their stated goal of outperforming the royalty-encumbered, world-beating HEVC/H.265. - Expect the unexpected and style your broken images.
See you in a couple weeks!
—eric
* Sorry, by the way, for the extended haitus. Turns out: quitting your job, leaving the country for three weeks, and then moving from the Mile-High City to a cabin by the sea is fairly disruptive, re: timely newslettering.