Teaser: Old Picturefills are holding the web back.
I know I mentioned this last time, but recent events have made it super-extra important – if you use Picturefill and you haven’t updated to version 2.3.1, please, drop everything and upgrade right now.
Mat Marquis explains why this upgrade is so critical over at CSS Tricks. Basically: old Picturefills made some assumptions about browser support that were true at the time, but aren’t any longer. Those assumptions mean Picturefill <2.3.1 tries to polyfill (and write to) the new currentSrc attribute in some browsers that already support it — but when supported, currentSrc is read-only. Trying to write to a read-only when use strict is in play is bad news – giant sites like ESPN that use old Picturefills were missing most of their images in Microsoft Edge previews and WebKit nightlies. So, rather than break the web, Edge and WebKit have decided not to not support currentSrc until y’all upgrade your Picturefills.
Picturefill is supposed to be a bridge to the future, not an obstacle to it. So, again: please upgrade!
The official RICG WordPress responsive images plugin was recently updated. The new version includes:
- the aforementioned Picturefill 2.3.1, the importance of which should already be clear
- bug fixes and performance improvements
- Dave Newton’s image-y magick, behind a flag
The last item on that list is particularly exciting. Dave’s optimal ImageMagick settings (brought previously to Grunt and PHP) produce much smaller images. But they’re new, and they eat up a little more CPU than the WordPress defaults, so this is going to start out as an opt-in thing. If you’re using the plugin and care about image performance enough to subscribe to a newsletter about it, I urge you: opt in and provide feedback.
In addition to bringing huge performance gains to the WordPress plugin’s 5,000+ active installs, Dave also recently became so frustrated with the horrendous performance of animated gifs that he became a core Firefox committer and registered a new IANA MIME type in order to be able to this:
<picture>
<source type="video/vnd.mozilla.apng" srcset="cat.apng" />
<img src="cat.gif" alt="One cool cat" />
</picture>
We’ll owe every APNG we ever use with a gif fallback to Dave. Ideas are easy, but wrangling all of the code and politics surrounding browser implementations and standards bodies necessary to implement them is very, very hard. Thanks, Dave. And, Yoav: I guess you’ve been replaced? (;
- If you only click four links in this newsletter, make the first one a Picturefill upgrade link. But these should be numbers two through four: Jason Grigsby on
type, Steve Souders on hero images and measuring perceived performance, and Sara Soueidan on art-directing embedded SVGs. Three great writers breaking down vital, technical subjects with clarity and style. - It’s official (⨉3) – responsive images recently headlined the Firefox 38 announcement post, hit the WebKit status page, and are slated for inclusion in WordPress core.
- Speaking of Firefox support – you may remember that Firefox 38 shipped without the ability to respond to viewport changes. This is especially troublesome for pages that rely on art direction – it means that simply resizing a Firefox window can break an art-directed page’s layout. The relevant patch is still in limbo, but if you need resize-responding right now, Alexander Farkas has published a quick fix.
- Here’s a stat that suprised me: speculative pre-parsers initiate 43% of image loads. The next time someone asks why we couldn’t have used CSS for responsive images, or why in the world we needed
sizes– that’s why! - The RICG is up for some Net Awards! It’s a bit strange to see our little red logo put in the ring against the likes of a 24 billion dollar company with 3,700 employees, but what the heck! Go ahead and vote for us!
- Yoav has a patch in to kick off client hints work in WebKit. It’s getting some push back. Have I mentioned that the politics around browser implementations are hard?
- Bruce Lawson gave a rollicking respimg talk at DrupalJam: slides, video.
- Joe McGill, respimg-in-WordPress implementer, will be speaking on the subject in Denver, Colorado in a couple of weeks, at WordCamp. Which is cool for me because I live in Denver, and I might get to meet him. Will you be in Denver, too? Tweet at me and maybe we can figure out some sort of meet up.
- Joe will probably be talking about lots of neat WordPress things, like adding responsive images to advanced custom fields.
- Last and least: I will be speaking and workshopping respimg in Germany at SmashingConf in September. Gulp.
See you in a couple of weeks!
—eric