Automatically generate a srcset for multiple target resolutions in case the original image is large

[niieani]

As requested by @d3viant0ne in #55, creating an issue feature request for this.
I don't need it at the moment, but it will greatly enhance the usability of #55 and open it up to more practical use-cases.

[joshwiens]

This not being able to set labels thing is absolutely killing my o.c.d.

[callumacrae]

Hey!

I'd be interested in implementing this—or at least, getting html-loader to play nice with responsive-loader or resize-image-loader.

I have no idea where to start, though, or even if it's a good idea. Is anyone able to point me towards a good starting point?

---

My credentials: I did it once before with Gulp: https://github.com/Lostmyname/lmn-gulp-tasks/blob/master/tasks/responsive-images.js

[callumacrae]

I've written a little library that can inspect a sizes attribute and work out the maximum and minimum size of an image required—vs what most people do which is just divide the image width by two, then three, then four, which falls apart when your designer gives you a 10,000px wide image for an 800px wide website: https://github.com/callumacrae/sizes-extent (obviously, DPR needs to be taken into account after this)

My current thought of how to implement this feature would be inspect <img> elements, and if they have a sizes attribute but not a srcset attribute, automatically calculate the best sizes for the image and call one of the libraries I mentioned before to get the images in their smaller sizes.

I'm pretty sure this wouldn't break backwards compatibility, and would only activate the functionality when it is needed. I can't think of any cases where you would actually want the sizes attribute but not the srcset attribute.

This would only solve half the problem, when the w descriptor is used. The other half is when the x descriptor is used for stuff like icons - double resolution on retina displays, for example. Not sure how to handle that one yet.

Sound good?

(happy to hand the library over to webpack / add some webpack org people to sizes-extent if it ends up being used)

[TheLarkInn]

@hemanth @d3viant0ne, would you mind assisting with the design of this feature with @callumacrae.

[hemanth]

We could plan for a quick slack meeting on this sometime soon.

[joshwiens]

@hemanth - My schedule is pretty flexible, i.e. I'm forever in front of my computer. Pick what works for you and i'm sure I can be there.

[hemanth]

^ Similar situation here :D

[What dose it mean when people say "go get a life"? 🤔]

Let us hear it from others.

[callumacrae]

Is this a public slack network I can join? 😄

[joshwiens]

@callumacrae - Webpack public is @ https://gitter.im/webpack/webpack
The slack channels are limited to the core team & and teams maintaining it's plugins.

[callumacrae]

Well, I'm in the gitter, let me know if there's anything I can do to help with this feature.

[bebraw]

@d3viant0ne Maybe it would be a smart move to invite @callumacrae to the slack/meeting?

[hemanth]

We can just hangout anywhere, I am always on IRC too ;)

[bebraw]

Ok. I invited Callum to Slack just in case so you can organize as you like.

[callumacrae]

Also on IRC, and now on Slack as callumacrae. Thanks, @bebraw :)

[michael-ciniawsky]

posthtml-loader and a plugin