<div dir="ltr"><br><div class="gmail_extra"><br><br><div class="gmail_quote">On Thu, Nov 7, 2013 at 3:32 AM, Benjamin Poulain <span dir="ltr">&lt;<a href="mailto:benjamin@webkit.org" target="_blank">benjamin@webkit.org</a>&gt;</span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div class="im">On 11/6/13, 3:24 PM, Yoav Weiss wrote:<br>
</div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div class="im">
<br>
On Wed, Nov 6, 2013 at 11:33 PM, Benjamin Poulain &lt;<a href="mailto:benjamin@webkit.org" target="_blank">benjamin@webkit.org</a><br></div><div class="im">
&lt;mailto:<a href="mailto:benjamin@webkit.org" target="_blank">benjamin@webkit.org</a>&gt;&gt; wrote:<br>
<br>
    On 11/6/13, 10:53 AM, John Mellor wrote:<br>
<br>
        On Sun, Oct 20, 2013 at 2:00 AM, Maciej Stachowiak<br>
        &lt;<a href="mailto:mjs@apple.com" target="_blank">mjs@apple.com</a> &lt;mailto:<a href="mailto:mjs@apple.com" target="_blank">mjs@apple.com</a>&gt;<br></div><div><div class="h5">
        &lt;mailto:<a href="mailto:mjs@apple.com" target="_blank">mjs@apple.com</a> &lt;mailto:<a href="mailto:mjs@apple.com" target="_blank">mjs@apple.com</a>&gt;&gt;&gt; wrote:<br>
          &gt;<br>
          &gt; My initial impression is that it seems a bit overengineered.<br>
<br>
        I sympathize. The issue of srcN appearing to be a complex<br>
        solution to a<br>
        seemingly simple problem came up again on IRC chatting to rniwa,<br>
        so I<br>
        thought I&#39;d try to explain this briefly.<br>
<br>
        Unfortunately, responsive images is a deceptively complex<br>
        problem. There<br>
        are 3 main use cases:<br>
        1. dpr-switching: fixed-width image resolution based on<br>
        devicePixelRatio.<br>
        2. viewport-switching: flexible-width image resolution based on<br>
        viewport<br>
        width and devicePixelRatio.<br>
        3. art direction: same as #1 or #2, except additionally, must serve<br>
        completely different images based on viewport width.<br>
<br>
<br>
    How important and common are each of those use cases?<br>
    Handling every imaginable use case by the Engine is a non-goal.<br>
<br>
<br>
    There has been a lot of demand for dpr-switching since the first<br>
    iPad Retina. This has caused some very ugly hacks on the Web. It is<br>
    very important to address that issue.<br>
<br>
    Viewport switching is usually done to adapt images for mobile device<br>
    VS large/huge display devices. It is a valid concern but it is not<br>
    easily addressed. Srcset can/should likely be improved regarding this.<br>
<br>
    I believe (feel free to prove me wrong) dynamic viewport adaptation<br>
    and what you call &quot;art direction&quot; is not as common.<br>
<br>
On a survey ran at the last Mobilism conference (and on Twitter) 41% of<br>
respondents said they&#39;re already using some hack to get their responsive<br>
image &quot;art-directed&quot;.<br>
A manual responsive site survey<br></div></div>
&lt;<a href="http://japborst.net/blog/the-current-state-of-art-direction.html" target="_blank">http://japborst.net/blog/the-<u></u>current-state-of-art-<u></u>direction.html</a>&gt; showed that<div class="im"><br>
23% of the sites &quot;art-direct&quot; their images, and 58% do that when<br>
(subjectively) the design requires it.<br>
So it might not be as common as viewport switching (which is practically<br>
everywhere), but it is pretty common.<br>
</div></blockquote>
<br>
The survey you linked (<a href="http://japborst.net/blog/the-current-state-of-art-direction.html" target="_blank">http://japborst.net/blog/the-<u></u>current-state-of-art-<u></u>direction.html</a>) was targeting specifically responsive websites. </blockquote>
<div><br></div><div>That&#39;s true. This is why I called it a &quot;responsive site survey&quot;. </div><div><br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Those websites represents only an unquantified subset of the web.<br></blockquote><div> </div><div>Arguably, they also represent the future of Web design, since the multitude of devices and form factors renders the alternative methods impractical. </div>
<div><br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
Even with that very targeted subset, only a small percentage was actually implementing art-direction.<br></blockquote><div><br></div><div>I wouldn&#39;t consider almost 1 out of 4 a small percentage, given the fact that art-direction today requires some extra effort over a native solution (the use of polyfills, etc).</div>
<div><br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
It looks to me like art-direction should not be imposing all the design constraints over the more important use cases.<br>
<br>
<br>
Something that is still unclear to me is why srcN would be doing a better job than JavaScript for art-direction?<br></blockquote><div><br></div><div>SrcN would enable art-directed image to be picked up by the preloader and loaded fairly early in the page&#39;s life-cycle (like all other images).</div>
<div>Using polyfills, you have to either download the polyfill script synchronously (which is considered a performance bad practice) and frequently poll the DOM for discovered images that you&#39;d then add to the resource download queue, or download it asynchronously and start polling the DOM for image much later in the page&#39;s life-cycle. In short, with srcN, performance would be better.</div>
<div><br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
There are many complex cases that are handled dynamically (changing images on zoom; tiling large images on zoom; changing layout on rotation; creating popover style layout when switching portrait/landscape, etc).</blockquote>
<div> </div><div>That&#39;s true, and none of them is considered to be implemented as part of a responsive images solution. (even though some of them can be handled with CSS). </div><div>These cases are all related to interaction with images once they were loaded, not to the loading process itself and the decision which images need to be loaded in the first place.</div>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><span class="HOEnZb"><font color="#888888"><br>
<br>
Benjamin<br>
</font></span></blockquote></div><br></div></div>