This is (unsurpisingly) a difficult problem to solve. I've been trying to help my colleague at Gatsby (a React based framework that uses static site generation) with improvements to the image optimization API Gatsby includes with its image plugins.

Just when you think you've handled every edge case, you have to account for screen pixel densities, better ways to infer sizes and srcSet attributes on picture tags, browsers with or without modern features for loading images in better.. it's no small task!

(I'm obviously biased but I think Gatsby's solution is pretty good now)