<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><br class=""><div><blockquote type="cite" class=""><div class="">On May 29, 2015, at 2:11 PM, Yoav Weiss <<a href="mailto:yoav@yoav.ws" class="">yoav@yoav.ws</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class=""><div class="gmail_extra"><div class="gmail_quote">On Fri, May 29, 2015 at 8:34 PM, Sam Weinig <span dir="ltr" class=""><<a href="mailto:weinig@apple.com" target="_blank" class="">weinig@apple.com</a>></span> wrote:<br class=""><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word" class=""><div class="">Hi Yoav,</div><div class=""><br class=""></div>Can you give a concrete example of when this will be used? I’m having trouble understanding when an author will want to change an images intrinsic size but not have control of the markup.</div></blockquote><div class=""><br class=""></div><div class="">It's not about control over markup, it's about control over style.</div><div class=""><br class=""></div><div class="">Let's say you're now given the following task: write a script that will go over all your server's HTML files and make your images responsive by adding a `srcset` attribute to all <img> tags. Since some of the images may change their display dimensions at different viewport sizes (i.e the <a href="https://dev.opera.com/articles/native-responsive-images/#variable-width-images" class="">"variable width" use case</a>), you want to add multiple resources with `w` descriptors to each <img>. Each one of these resources will be pointed towards your shiny new image server, which has access to the original high-quality image as well as the currently displayed one (the "src image").</div><div class=""><br class=""></div><div class="">But, since you don't know if all the images have their dimensions defined in CSS (and you suspect that a large chunk of them don't have CSS based dimensions), you want to make sure that the intrinsic dimensions of the displayed images remain the same even when you deliver images of varying "physical" dimensions. How can you achieve that?</div><div class=""><br class=""></div><div class="">Well, the answer is, you want to modify the intrinsic size of the delivered images to be the same as the "src image"'s intrinsic dimensions. With Content-DPR, that's easy. You simply set it to the value that is the delivered image width divided by the "src image" width.</div><div class="">That way, the browser takes the Content-DPR into account, scales the delivered image and it ends up with the same intrinsic dimensions as the "src image".</div><div class=""><br class=""></div></div></div></div></div></blockquote><div><br class=""></div><div>Hi Yoav,</div><div><br class=""></div><div>Sorry, but I’m afraid I’m still not really getting it. Can you get even more concrete? Perhaps provide some a sample page that would need this kind of functionality and go through what Content-DPR values would be used?</div><div><br class=""></div><div>- Sam</div><br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class="gmail_extra"><div class="gmail_quote"><div class="">If you don't have markup control, the same exercise applies, but would require the full-fledged Client-Hints in order to actually deliver resized images.</div><div class=""> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word" class=""><div class=""><br class=""><div class=""><span class=""><blockquote type="cite" class=""><div class="">On May 29, 2015, at 11:23 AM, Yoav Weiss <<a href="mailto:yoav@yoav.ws" target="_blank" class="">yoav@yoav.ws</a>> wrote:</div><br class=""><div class=""><div dir="ltr" class=""><div class="">As a first step towards the Client-Hints implementation, I submitted a <a href="https://bugs.webkit.org/show_bug.cgi?id=145380" target="_blank" class="">patch</a> for <a href="http://igrigorik.github.io/http-client-hints/#confirming-selected-dpr" target="_blank" class="">Content-DPR support</a>.<br class=""></div><div class="">A discussion followed on the thread, so I'd like to move it to the list, in order for it to get higher exposure.</div><div class=""><br class=""></div><div class="">Content-DPR is an HTTP response header that enables style-agnostic image resizing,</div></div></div></blockquote><div class=""><br class=""></div></span><div class="">What exactly does "style-agnostic image resizing” mean? I am not familiar with that term </div></div></div></div></blockquote><div class=""><br class=""></div><div class="">It's not an official term. I meant to say that it enables you to perform image resizing without taking into account the style rules that control the way in which the resized image will be displayed.</div><div class=""><br class=""></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word" class=""><div class=""><div class=""><br class=""><blockquote type="cite" class=""><div class=""><span class=""><div dir="ltr" class=""><div class=""> by enabling the server to adapt the image's intrinsic size so that layout will not break, even if the image's dimensions are not defined in style.</div><div class=""><br class=""></div><div class="">Opinions welcome! :)</div></div></span>
_______________________________________________<br class="">webkit-dev mailing list<br class=""><a href="mailto:webkit-dev@lists.webkit.org" target="_blank" class="">webkit-dev@lists.webkit.org</a><br class=""><a href="https://lists.webkit.org/mailman/listinfo/webkit-dev" target="_blank" class="">https://lists.webkit.org/mailman/listinfo/webkit-dev</a><br class=""></div></blockquote></div><br class=""></div></div></blockquote></div><br class=""></div></div>
</div></blockquote></div><br class=""></body></html>