Several of your concerns are things that are not really anything specific to Hugo, and depend on the html/css/js that your site uses.
1 & 2 - This was just mentioned in a different thread, and is possible in some of the hosting environments.
3 - Lazy loading has nothing to do with generating a website, it has to do with how a website is served and consumed by clients, long after hugo has done its thing. So you are right, that’s up to JS that your site incorporates.
4 - Before you decide how you want to handle them in hugo, you need to decide how you want to handle them in your html/css.
The best overview of the issues with responsive images I’ve found
Then it’s fairly simple to use a shortcode or image render hook template to create your images that way. Hugo has a number of features that make it easy to do whatever you’d want with images:
A few Hugo specific links:
- Processing Responsive Images with Hugo
- Responsive Images in Hugo
- Mastering Image Delivery With Cloudinary
I’d agree I haven’t seen a generalized, common, responsive image shortcode or template that many people are reusing in their sites. No reason it couldn’t be done, but there are lots of things that are site specific like break points, use cases, etc.