I think first off, and there are no right answers, only suggestions to ideal image sizes. It depends a lot on the layout of the pages.
How much space are you allowing each image to be displayed in?
If you place an image inside a multi-column stack that has a maximum width then you need to determine how many pixels of screen width the image is allowed For each breakpoint.
The smaller screen sizes might have a wider width than the other breakpoints since the columns may stack.
So there’s no real rules for optimal image sizes that can be applied to every image.
Also, consider how many images you have on a page. Ten 300kb pictures on a page is much slower than one 1.5mb image.
Again there’s no set answer. Banners go edge to edge, so each of the smaller breakpoints you can figure out the maximum display area allowed. But the largest size(desktop) can be as wide as the users screen.
Most websites have a maximum width for the main content area(nonbanner). Currently, the significant frameworks like Bootstrap and Foundry cap the width at around 1200px. Content is centered on screens wider than that. Users, of course, can have the browser set as wide as their monitor allows, but they get ”whitespace” on each side of the main content area.
So it’s a balancing act, if you set the banners to a huge width, folks that have their browsers set to a larger width get a clearer picture but everyone else gets a slower page load and no benefit.
You also need to consider the importance of the image. Is it a ”main” subject or just a background.