Teaser: Firefox gets respimg! Drupal gets respimg! Ev-er-y-bo-dy gets a respimg!
Firefox users! Belatedly elate! Your images will soon be very lightweight.
picture and srcset have been turned on by default in Firefox Nightly, and are slated for Firefox 38 — release date: May 12th.
What is it about version 38s? Is their greatness innate? The first responsive image implementations landed in Chrome 38 and Opera, uh, 25 back in October.
The wait for Gecko respimg was a bit longer than anticipated; issue-owner John Schoenick left Mozilla for Valve back in November. But Josh Matthews picked up where John left off and succeeded this week in pushing the implementations across the finish line.
Huzzah!
Responsive image support landed in Drupal 8 this week. I’ve played with the implementation a bit and it’s fascinating to see how it differs from WordPress’ — whereas the WordPress respimg plugin tries very hard to keep things simple and automagic, Drupal’s support is much more structured, providing developers with tremendous control (but requiring more setup).
Next up for Drupal: a UI to make that control accessible to people who don’t like mucking around in .yml files.
Don’t look now, but Yoav is persistently laying the foundations for respimg in WebKit. Exhibit A: microtask abstractions, which saw a new batch of patches this week. Let’s be honest: while I might be able to mumble a few vague words about how microtasks enable asynchronous image loading in response to changing media conditions, I wouldn’t recognize a microtask abstraction if it hit me in the face. But! I trust Yoav when he tells us that microtask-in-WebKit progress is respimg progress: slow, steady, and inexorable.
Client Hints move the complexities of alternate resources, x descriptors, and w descriptors out of srcset attributes and into HTTP headers. Using Client Hints, markup can point to a single src. Browsers may send various “hints” — about their device-pixel-ratio, the layout width of the image, or their maximum download speed — as headers on the request for that src; the server can then use those hints to choose an alternate, more appropriate resource to send in response.
Yoav posted an intent to implement thread about Client Hints over on blink-dev this week. Let’s see where it goes!
Artisanal-ly “Save for Web…”-ing every image by hand is fine for bespoke websites, but automated image compression is the name of the game for anything larger. Two great, recent, developments on that front:
- imgmin — the tool that lets you standardize image quality around an objective metric, rather twiddling an arbitrary and mysterious 0-100 encoder knob — has integrated the DSSIM metric. Structural (dis)similarity is Kornel Lesiński’s favorite image quality metric; therefore it is also mine.
- Dave Newton is constructing a massive set of tests for all of ImageMagick’s compression and conversion options. These tests are the raw material for an upcoming talk and article on the subject – I can’t wait!
- Matt Wilcox wrote up his fantastically practical method for picking image breakpoints and authoring
srcsetandsizesmarkup a few months back; I somehow missed it. Oops! Go read it! It’s great! - SVG savant Sara Soueidan published a great thing on using
pictureto serve SVGs with PNG fallbacks. - A bit of follow-up from last week: Wordpress settled on a default
sizesvalue and it’s eminently practical. That default is also settable by theme authors (though they’re still tinkering with how that should work), and adjustable on an image-by-image basis via a sorta-janky/sorta-geniusdata-sizesattribute. Neat. - The
srcsetsyntax and/orsizesattribute might be useful forvideoposters? - After his An Event Apart Atlanta talk, Jason Grigsby set about writing down a bunch of respimg implementation best practices in a series of blog posts. Here’s the first — an introduction, of sorts — and here’s the second, which outlines the extremely sensible, constantly-overlooked step of auditing what you have before deciding where to go, re: images on a website.
- Here are a couple of Rails respimg helpers —
srcsetwithws,srcsetwithxs — if you’re into that sort of thing.
See you in a couple of weeks!
—eric