This has been a solved problem for years in some frameworks, e.g. all the major image upload handling libraries in Rails have this built in an it's very easy to use. There are also plenty of webpack plugins for static assets:

https://github.com/metalabdesign/sharp-loader

https://github.com/herrstucki/responsive-loader

https://github.com/tcoopman/image-webpack-loader

(and many more, just grabbing a few examples)

Webpack also warns you about large assets by default, although the limit is 250KB, which isn't great.

https://github.com/tcoopman/image-webpack-loader exists. The plugin will recompress png, jpeg, and svg images, as well as optionally converting the first two to webp. That said, it seems to have a persistent bug where jpegs are always converted to webp while retaining their original extention, and the maintainer doesn't seem to have the time to fix it or merge pull requests. If you wanted to help them out with that, they'd likely be amenable.

Something that I've not seen is a plugin/loader that will automatically use the <picture> tag to make available multiple auto-generated source images and a fallback <img>. It'd be great to be able to

import myImage from 'res/img/my_img.png'

and have myImage be a string like

<picture><source srcset="[generated-name-of-my-image.webp]"><img src="generated-name-of-my-image.png"]></picture>

Flif gives you a lower resolution image of you download only part of the file. Keep downloading and the image gets better resolution. If browsers supported it, they could have settings so you download partial images when roaming or the full file when on wifi.

Are you seriously suggesting that image resizing to match expected output size is an unsolved problem?

As per the guidelines:

Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith.