RICG-newsletter-2014-10-31.html

<h1>New website, new name</h1>

<p>Teaser text: Deep and sincere apologies for all of the HORRORble puns!</p>

<h2>Scope creepy!</h2>

<p>The RICG is about to tackle <a href="http://responsiveimagescg.github.io/eq-usecases/">Element Queries</a>. To prepare for this imminent broadening of our scope of work, we’re doing some housekeeping:</p>

<ul>
<li>It’s official! We’re now the Responsive <em>Issues</em> Community Group</li>
<li>We’ve got a new website, and it lives at <a href="http://ricg.io">ricg.io</a>. It’s a bit sparse at the moment but it’s a work in progress.</li>
</ul>

<p>Element Queries are a GHOULd idea! But it’s still very, very early days; to draft a use cases document, SPOOKification, and ultimately bring them to browsers we’ll need all the help we can get. ContriBOOte!</p>

<h2>image-spook()</h2>

<p>A week ago Jason Grigsby <a href="http://lists.w3.org/Archives/Public/public-respimg/2014Oct/0016.html">asked</a>, “what ever happened to <code>image-set()</code>?” <code>image-set()</code> brings <code>srcset</code>’s functionality to CSS; Jason does a great job of explaining why we need it in a subsequent <a href="http://blog.cloudfour.com/the-forgotten-responsive-images-spec-image-set/">blog post</a>. <code>image-set()</code> was implemented with a prefix in WebKit <a href="http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/">two years ago</a> (!) and then we all kind of... forgot about it.</p>

<p>The discussions that came out of Jason’s post were productive. <code>image-set()</code> is happening; <a href="http://lists.w3.org/Archives/Public/public-respimg/2014Oct/0032.html">it’ll be specced as a part of CSS Images Level 3</a>, <a href="http://ircbot.responsiveimages.org/bot/log/respimg/2014-10-23#T97312">it’s going to have feature parity with HTML’s respimg features</a>, and the RICG is going to push for it however we can. TERRORiffic!</p>

<h2>Boo!-link</h2>

<p>Yoav’s respimg implementation in Blink is already shipping, but that doesn’t mean it’s done. Some changes made over the last couple of weeks:</p>

<p><a href="https://codereview.chromium.org/667763004/">Blink now uses gemetric means to pick <code>srcset</code> sources</a>. What in the HELL does that mean? Blink used to pick the smallest source that supplied <em>at least</em> as many pixels as it needed; now it picks the source whose dimensions are the <em>closest</em> to what it needs. For example: before, given an option between two resources, one with 0.9x the image’s device pixel width and the other with 3x, Blink would have picked the 3x source; now it’ll compromise a little bit on sharpness and save a lot of bytes by selecting the 0.9x resource.</p>

<p>Different browsers are going to do different things here. With any luck, they’ll continue to experiment with, refine, and ultimately improve their <code>srcset</code> picking logic over time. Developers can’t predict which source will be chosen out of a <code>srcset</code>, and that’s a good thing. <a href="https://twitter.com/yoavweiss/status/524634996108427264">“<code>srcset</code> is about letting go”</a>.</p>

<p>Blink also now <a href="https://codereview.chromium.org/674923004/">avoids downloading smaller images if bigger ones are already available in the cache</a>. So, now, shrinking your browser window (or changing the orientation of your phone from landscape to portrait) won’t trigger a new request for a new resource; Blink will happily continue to scale-down the old, larger one. A clear and obvious win!</p>

<p>Lastly, Blink now gives developers <a href="https://codereview.chromium.org/649183007/">console warnings about bad <code>srcset</code> descriptors</a>. Helping you EXORCISE bugs.</p>

<h2>Yay! Link!</h2>

<p>The <a href="http://www.futureinsights.com/home/responsive-images-are-here-its-up-to-you-to-make-the-web-for.html">video from Wilto’s excellent talk at Refresh Boston</a> is up and it is chock full o’ Zelda references.</p>

<h2>Tricks and treats</h2>

<p>There’s been no SCAREcity of respimg links over the last two weeks:</p>

<ul>
<li><p><a href="https://github.com/scottjehl/picturefill/releases/tag/2.2.0-beta">Picturefill 2.2 hit beta</a>. The new version brings better spec compliance, better performance, fewer bugs, and it plays nicely with Asynchronous Module Definitions.</p></li>
<li><p>The NCC Group broke <a href="http://en.wikipedia.org/wiki/Betteridge's_law_of_headlines">Betteridgde’s Law of Headlines</a> by asking, <a href="https://www.nccgroup.com/en/blog/2014/10/is-it-time-to-start-using-srcset-and-the-picture-element/">“Is it time to start using <code>srcset</code> and the <code>picture</code> element?”</a></p></li>
<li><p>Eiji Kitamura published a bit of Javascript that uses <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/">Service Workers</a> (which were just <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/QfxPGw0kJW8/bsIQTZu0UCkJ">green-lighted in Blink</a>) to manipulate image requests based on a global manifest. Yoav <a href="https://twitter.com/yoavweiss/status/525568123333017600">asks</a>, “who will write the tool that does the same thing server-side?”</p></li>
</ul>

<p>See you in a couple of weeks!</p>

<p>—eric</p>