I have a couple of my own clusters of servers running now, but still use imgix.com and cloudinary.com. Both those two have different price models. Working with images on Webflow means HTML embeds and you handle the responsive logic. Both the two I mentioned do support using client side API’s which makes it somewhat easier.
I think you need to think about this a little more. A full width image on mobile (Webflow) would be up to 479px without HIDPR. So a 500px image works fine. If the screen was scaled down 320px then you might consider another image size (smaller than 500px) as a benefit. Except when I am on my retina or other HIDPR display which would appreciate a 2x or 3x size for quality. So then my browser would want to load a 1000px or 1500px image.
The tools you are using to evaluate performance are general use. They don’t take into account all the real world factors. I have worked on sites with millions of page loads a day. Since those clients are paying for bandwidth, I would strongly consider using and do create MANY breakpoint versions of images (every 10 pix for example, to reduce the bandwidth and server loads. That is a perfect fit for a cloud image service / CDN. Since you are not probably hitting those volumes and paying for the bandwidth I would not even bother with further optimization due to man hour expense creating /maintaining images and negligible ROI. Besides it throws using the designer for working with images out the window. Got a serious project that needs optimization and a budget, feel free to hit me up via a PM.