I’ve been highlighting Jason Grigsby’s superb Responsive Images 101 posts for weeks. They’re a series clear, concise posts which neatly break the new respimg features down into their component conceptual parts.
I want to lead this week with the opposite of that: When Responsive Images Get Ugly, by Taylor Hunt. If Jason’s posts are the 101 course, this is a graduate seminar. Big, messy, in-depth, and exploratory.
The post gets into the weeds. Topics include: using picture to supply an x-descriptor fallback srcset to a preferred w-descriptor srcset; dealing with the lack of h descriptors when marking-up height-constrained images; and stuffing respimgs into inline SVGs (!?). But my favorite part is the bit about the heretofore untapped power of the media attribute. We generally think of the new responsive features as ways to adapt images to different screen sizes, pixel densities, and maybe network speeds. But media queries allow us to do much more, marking up images which tailor themselves to all sorts of contexts. One small example: replacing animated gifs with still images on e-readers and other devices whose media="(update-frequency: slow)". A good and eye-opening article.
After submitting a patch implementing Content-DPR header support to Webkit last month, only to see discussions around it stall, Yoav posted an Intent to Ship client hints thread to Blink-dev a couple of weeks ago… only to see discussions around it stall. Good thing we’re nothing if not persistent.
Yoav and a few of his Akamai chums are getting together to write a book! Based on Guy Podjarny’s overview, High Performance Images will be a book-length treatment from some of the smartest minds in the business about optimal compression, delivery, and backend automation strategies.
Dave Newton just published a stellar article explaining his optimal ImageMagick resizing/compression settings, which concludes with links to a bunch of immediately-implementable tools for bash, Node, PHP, and Grunt. Explanatory, actionable, excellent.
-
Speaking of Dave, he just spoke about Improving Performance With Responsive (And Responsible!) Images at CSS Conf.
-
And Jason Grigsby flew across the Atlantic to answer the question, Why Responsive Images at the final Responsive Day Out in Brighton, England. Notes / slides / audio.
-
Firefox’s shipping respimg implentation might not respond to viewport changes until September. But never fear: Picturefill’s got your back.
-
Five Simple Steps have just released Practical Responsive Images, by Ben Seymour. I haven’t had a chance to check it out yet but it looks good!
-
In the last newsletter I mentioned “a nifty little library that uses CSS gradients as image placeholders”. And forgot to add the link, which is: http://gradifycss.com/. Oops!
See you in a couple of weeks!
—eric