|
| 1 | +# Victory laps and deep dives |
| 2 | + |
| 3 | +**Teaser text:** RICYMIG? |
| 4 | + |
| 5 | +## Magick? Mitigate! |
| 6 | + |
| 7 | +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”][imagetragick], then panic, because your site is vulnerable to a zero-day exploit. Take steps! |
| 8 | + |
| 9 | +[imagetragick]: https://imagetragick.com |
| 10 | + |
| 11 | +## Have I mentioned that we did it? |
| 12 | + |
| 13 | +I don’t “ICYMI” often. But when I do, it’s because [every responsive image feature is now supported by every browser][we-did-it]. |
| 14 | + |
| 15 | +The news was even better than I reported; turns out, Safari’s shipping `picture` implementation [*does* respond to viewport changes][correction-safari] and *doesn’t* double-download in the test case that I lazily linked to without actually, you know, checking. Yay! |
| 16 | + |
| 17 | +Bruce “Strawman” Lawson, the man who first put the word “picture” between angle brackets, took a well-deserved [victory lap][bruce-victory-lap] over on the Opera blog, re-capping and reflecting on the achievement. |
| 18 | + |
| 19 | +And our Chair, Mat Marquis, [recently appeared on the Responsive Web Design podcast][wilto-podcast] to discuss who, what, why-is-it-still-around, and what’s next for the RICG. |
| 20 | + |
| 21 | +[we-did-it]: http://us8.campaign-archive1.com/?u=c988d9ca55d5d09e73a7dc993&id=5946649815&e=4db00bcdc4 |
| 22 | +[correction-safari]: https://github.com/ResponsiveImagesCG/newsletters/commit/351176eaa087325b9bb358b530cdfb425bf4a5d7#commitcomment-16796216 |
| 23 | +[bruce-victory-lap]: https://www.opera.com/blogs/news/2016/03/the-picture-element-saving-bandwidth-data-and-possibly-the-world/ |
| 24 | +[wilto-podcast]: http://responsivewebdesign.com/podcast/ricg/ |
| 25 | + |
| 26 | + |
| 27 | +## Down ‘n nerdy with image formats |
| 28 | + |
| 29 | +Colt McAnlis, developer advocate at Google, is writing [a book on image compression][understanding-compression] and has published a few articles on the topic over the past few weeks, explaining how the [JPEG][colt-jpg-works] and [PNG][colt-png-works] compression algorithms work, and suggesting a plethora of tools and techniques for making [`.jpg`s][colt-jpg-smaller] and [`.png`s][colt-png-smaller] smaller. |
| 30 | + |
| 31 | +If you’re game for a deep dive, these articles are well worth the effort. I’ll highlight one mentioned project which was news to me: the terribly-named [Butteraugli][butteraugli] image comparison tool, from Google. Buggerutley can provide not only a single number (like every other comparison metric, e.g. [PSNR][psnr] or [SSIM][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”? |
| 32 | + |
| 33 | +And over on the Cloudinary blog, Jon Sneyers (creator of the new-and-exciting [FLIF image format][flif], which, hey!, he just gave [an excellent interview about][jon-interview]) takes a similarly technical tour of the JPEG compression algorithm and makes a wonderfully accessible analogy: [“JPEG is like a Photocopier”][jpeg-photocopier]. Recompression is bad; when you copy a copy of a copy, things can start to get, well, buttugli. |
| 34 | + |
| 35 | +[understanding-compression]: http://shop.oreilly.com/product/0636920052036.do |
| 36 | +[butteraugli]: https://github.com/google/butteraugli |
| 37 | +[ssim]: https://en.wikipedia.org/wiki/Structural_similarity |
| 38 | +[psnr]: https://en.wikipedia.org/wiki/Peak_signal-to-noise_ratio |
| 39 | +[colt-png-works]: https://medium.com/@duhroach/how-png-works-f1174e3cc7b7#.7d6b3v7mz |
| 40 | +[colt-png-smaller]: https://medium.com/@duhroach/reducing-png-file-size-8473480d0476#.rhsc7jqld |
| 41 | +[colt-jpg-works]: https://medium.freecodecamp.com/how-jpg-works-a4dbd2316f35#.tebx1htgx |
| 42 | +[colt-jpg-smaller]: https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c#.9k6ch9cis |
| 43 | +[flif]: http://flif.info |
| 44 | +[jon-interview]: http://dev.to/ben/interview-with-flif-creator-jon-sneyers |
| 45 | +[jpeg-photocopier]: http://cloudinary.com/blog/why_jpeg_is_like_a_photocopier |
| 46 | + |
| 47 | +## Grab Bag |
| 48 | + |
| 49 | +- Martin Auswöger wrote a [respimg syntax linter][respimg-linter]! |
| 50 | +- [Google is going to funnel all of its web platform feature development through our sister org, the WICG][google-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][click-of-a-button]. |
| 51 | +- New axis of respimg adaptation alert! It’s time to [start thinking about color gamuts][color-gamuts]. |
| 52 | +- [Intersection Observers][intersection-observer] will power the lazyloaders of the future; the feature [just landed in Chrome 51][io-in-chrome] |
| 53 | +- Speaking of lazy loading, my favorite lazyloader is [`lazysizes.js`][lazysizes] (which keeps the presentation-separate-from-markup dream alive); the imgix folks just wrote about [how to use `lazysizes` in conjunction with their image hosting-and-resizing service][imgix-lazysizes]. |
| 54 | +- Speaking of imgix, Oliver Pattison [wrote up his strategy][imgix-jekyll] for building low-overhead respimg-equipped sites using imgix and Jekyll. |
| 55 | +- Ever wonder [how to decorate an `object-fit` image][decorate-object-fit]? |
| 56 | +- Neat: [Facebook is automatically authoring `alt` text on user uploads][automatic-alt] using artificial intelligence. |
| 57 | +- [Performance matters][ft-perf]. |
| 58 | + |
| 59 | +See you in a few weeks! |
| 60 | +—eric |
| 61 | + |
| 62 | + |
| 63 | +[respimg-linter]: https://ausi.github.io/respimagelint/ |
| 64 | +[valitator-nu]: https://checker.html5.org |
| 65 | +[google-wicg]: https://groups.google.com/a/chromium.org/d/msg/blink-dev/PJ_E04kcFb8/baiLN3DTBgAJ |
| 66 | +[click-of-a-button]: https://groups.google.com/a/chromium.org/d/msg/blink-dev/PJ_E04kcFb8/qZtcSdE2AAAJ |
| 67 | +[color-gamuts]: http://blog.iconfactory.com/2016/04/looking-at-the-future/ |
| 68 | +[intersection-observer]: https://github.com/WICG/IntersectionObserver/blob/master/explainer.md |
| 69 | +[io-in-chrome]: https://twitter.com/ChromiumDev/status/718136230232383493 |
| 70 | +[lazysizes]: https://github.com/aFarkas/lazysizes |
| 71 | +[lazysizes]: https://github.com/aFarkas/lazysizes |
| 72 | +[imgix-jekyll]: https://olivermak.es/2016/05/jekyllconf-responsive-images/ |
| 73 | +[imgix-lazysizes]: https://blog.imgix.com/2016/05/02/imgix-lazysizes.html |
| 74 | +[decorate-object-fit]: http://fvsch.com/code/object-fit-decoration/ |
| 75 | +[automatic-alt]: http://www.theverge.com/2016/4/5/11364914/facebook-automatic-alt-tags-blind-visually-impared |
| 76 | +[ft-perf]: http://engineroom.ft.com/2016/04/04/a-faster-ft-com/ |
0 commit comments