min and max arguments to calculate sizes automatically

[callumacrae]

Hey! I'm currently attempting to integrate a responsive images loader into html-loader, as currently it just outputs full sized images.

Would you accept a PR enabling this syntax?

require('responsive?min=100&max=300!./myImage.jpg');

From there, it'll calculate the best sizes (maybe another argument to say the number of images?), and generate the images. This could be done from html-loader, but I figure it's best to do it from the place that actually accesses the image file so that max can be taken down if necessary.

[jstcki]

How would you calculate the "best" sizes?

[callumacrae]

Steps? Maybe something smart like how http://www.responsivebreakpoints.com/ works, maybe just making n images between the two sizes

[jstcki]

That could be pretty cool! We could even auto-generate useful sizes based on the original image's dimensions and some heuristics about devices used. Discarding images which are too close in file size would also be pretty straight-forward.

On the other hand, would it be that much of an improvement over specifying a preset of sizes in the webpack config? E.g.

{
  responsiveLoader: {
    sizes: [300, 600, 900, 1200]
  }
}

[callumacrae]

I'm not sure how useful that would be, given that there's usually more than one size image displayed on a website. Maybe number of steps would be a useful option there - didn't know you could specify options.