Helper for responsive images

[JosefJezek]

Could you create helper for responsive images using DPR + WebP?

Check out this resources...

• https://github.com/deanhume/Service-Workers-WebP
• http://deanhume.com/home/blogpost/service-workers--dynamic-responsive-images-using-webp-images/10132
• https://youtu.be/etACK2qbHfc?t=33m47s
• API for getting/setting image pixel density ResponsiveImagesCG/picture-element#252

[addyosmani]

@mullens has kindly volunteered to work on a design doc for this one and was interested in hacking on it. (Lucas I've sent you an invite to the repo so we can get you assigned once accepted) :)

[addyosmani]

Talked to @mullens about status. A few docs have been worked on trying to explore the design. We're going to try to nail down some milestones around this work we can aim for shortly.

[addyosmani]

@mullens when you get a chance, could we share an external friendly copy of the research + conclusions you reached and the next steps forward? ⭐️

[addyosmani]

@mullens ended up implementing a proof-of-concept of this idea and is going to keep iterating on it as time allows. We're going to close this issue up as it was explored and will continue looking at how that piece fits into the overall workbox collection next.

[JosefJezek]

@addyosmani any idea?

[jeffposnick]

I'm going to reopen this as we never did end up shipping anything, and it's come up again recently.

[tpiros]

From my perspective it'd be a great addition to workbox to access the network information API as based on the results regarding the user's connection it'd be trivial to return optimised images. Here's what I'm thinking: I am using Cloudinary to store my images and Cloudinary has a feature which allows developers to return images in the most optimised way - for example if the user accesses the site via Chrome it returns a WebP image. Now, it'd be great if I could further control this and say, if the user is accessing the site via Chrome and from a 2G or a 3G connection, return a WebP with a quality of 40 for faster load, whereas if they have a 4G connection I wouldn't care much about the quality but still would return the WebP.

Based on this approach I could also cache the appropriate files - for 2G users, cache a lower quality version of the image using Workbox.