Automatically generate a `srcset` for multiple target resolutions in case the original image is large about html-loader HOT 15 CLOSED

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

from html-loader.

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

from html-loader.

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)

from html-loader.

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

from html-loader.

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

from html-loader.

@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.

from html-loader.

^ Similar situation here :D

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

Let us hear it from others.

from html-loader.

Is this a public slack network I can join? 😄

from html-loader.

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

from html-loader.

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

from html-loader.

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

from html-loader.

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

from html-loader.

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

from html-loader.

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

from html-loader.

posthtml-loader and a plugin

from html-loader.