Image - different file per view

Hi Balbooa,
In the past I've requested the ability for the image plugin to reference a different image file per design view (desktop, tablet etc). This is obviously needed because the same image used on a desktop view is often unsuitable to use on a phone view (wrong ratio, too large) - so bad for usability and SEO.

I've been told it's not possible to switch image files per view, and instead I must use two or more image plugins and show/hide them per view. However, I've since realised there's a big problem with this method. If I have two image plugins (small for phone views and a larger one for the other views), then BOTH images are always loaded regardless, despite one being "hidden".
So for a mobile view which only needs a small image is much worse off, because not only does it download the small image, but the larger desktop image as well. Google insights then penalises the website.

- image 1 shows the network activity of the website in mobile view. Both the desktop image file ("physiotherapy-clinic-dover-main.webp" - which is hidden in GB) and the expected image plugin for phone ("physiotherapy-clinic-dover-main-mobile.webp") is also downloaded.
- image 2 shows Google insights complaining about the size of the desktop file being used in the mobile view.

Images are crucial for websites, so an efficient method of displaying images on difference device types is essential. Could you please take a look.

Many thanks
Marc