Teaser text: RICYMIG?
I’ll kick off with a quick PSA — if you’re using ImageMagick on a server and accept user uploads and haven’t heard about “ImageTragick”, then panic, because your site is vulnerable to a zero-day exploit. Take steps!
I don’t “ICYMI” often. But when I do, it’s because every responsive image feature is now supported by every browser.
The news was even better than I reported; turns out, Safari’s shipping picture implementation does respond to viewport changes and doesn’t double-download in the test case that I lazily linked to without actually, you know, checking. Yay!
Bruce “Strawman” Lawson (the man who first put the word “picture” between angle brackets) took a well-deserved victory lap over on the Opera blog, re-capping and reflecting on the achievement.
And our Chair, Mat Marquis, recently appeared on the Responsive Web Design podcast to discuss who, what, why-is-it-still-around, and what’s next for the RICG.
Martin Auswöger wrote a respimg linter! “Linter” doesn’t quite capture all of the things that this little bookmarklet does, though — in addition to checking for syntax errors (as the ever-helpful HTML5 validator does), it actually loads your images across a full gamut of viewport sizes, and will raise the alarm if, say, your sizes is lying about the actual layout size of your image, or if it looks like you’re trying to kludge art-direction using srcset. I ran it across a few of my own pages, and the results were, uh, alarming. Bookmarklet bookmarked.
Colt McAnlis, developer advocate at Google, is writing a book on image compression and has recently published a few articles on the subject, explaining how the JPEG and PNG compression algorithms work, and suggesting a plethora of tools and techniques for making .jpgs and .pngs smaller.
If you’re game for a deep dive, these articles are well worth the effort. I’ll highlight one project that I discovered therein: the terribly-named Butteraugli image comparison tool, from Google. Buggerutley can provide not only a single number (like every other comparison metric, e.g. PSNR or SSIM), but also a spatial map of dissimilarity (woah?). Awesomely, Botticelli was motivated by a deep study of the biology of vision. How many engineers can casually drop references to the “frequency space inhibition of ganglion cells”?
And over on the Cloudinary blog, Jon Sneyers (creator of the new-and-exciting FLIF image format, which, hey!, he just gave an excellent interview about) takes a similarly technical tour of the JPEG compression algorithm and makes a wonderfully accessible analogy: “JPEG is like a Photocopier”. Recompression is bad; when you copy a copy of a copy, things can start to get, well, buttugli.
- Google is going to funnel all of its web platform feature development through our sister org, the WICG. In other words, henceforth, when Google wants to change something about web standards, they will be doing it via a process and community that is open to anyone, everywhere, at the click of a button.
- New-axis-of-respimg-adaptation alert! It’s time to start thinking about color gamuts.
- Intersection Observers will power the lazyloaders of the future; the feature just landed in Chrome 51.
- Speaking of lazy loading, my favorite lazyloader is
lazysizes.js(because it keeps the presentation-separate-from-markup dream alive); the imgix folks just wrote about how to uselazysizesin conjunction with their image hosting and resizing service. - Speaking of imgix, Oliver Pattison wrote up his strategy for building low-overhead respimg-equipped sites using imgix and Jekyll.
- Ever wonder how to decorate an
object-fitimage? - Neat: Facebook is automatically authoring
alttext on user uploads using artificial intelligence. - Performance matters.
See you in a few weeks!
—eric