Many thanks, however...
Why Action is Definitely Needed
Firstly, I definitely need to serve different images on mobile than on Desktop. I'm in a very competitive field and dropped off Google's front page 8 years ago and have been working hard all that time to get back.
I know that later this month Google is going to implement Page Experience as a ranking factor, so I really need to comply with Search Console when it is telling me to improve my Page Experience.
The instructions I have to follow according to Search Console are to reduce my Largest Contentful Paint for mobiles to less than 2.5 seconds.
You will please note that the LCP load time accounts for 25% of my page score on my home page, and while I am scoring in the 90s or 100% on every other criterion, I am only scoring 33% on LCP. So action is very definitely necessary if I am to have any chance of benefiting from the new algorithm roll-out.
What I've Done So Far to Reduce Load Times
I have already compressed my images to be as small as possible (by converting them to .webp and then converting the compressed .webp images back to .jpg to be served if the user browser cannot see .webp format). My primary images are all the format Google scores me down for not using - .webp
I've tried twice using CDN but I've discovered there are much bigger drawbacks than advantages, so I won't try again.
My Current Attempts to Serve Alternative Images for Mobile
Here are the contents of the HTML box on a page I am using to experiment with serving smaller images to mobile:
srcset="/images/edme501-880.webp 320w, /images/edme502f-880.webp 800w, /images/edme601f-880.webp 1200w"
alt="Tanzania Safari JETR 401" onerror="this.src='/images/jetr401.jpg';" />
Here is the page: https://teamkilimanjaro.com/safaris/tanzania/jetr-401. Please try to resize the page. You will see that the only image that shows is
/images/edme601f-880.jpg. Even if you open the page on mobile devices, you still see the same image.
I will be so grateful if you can please tell me where I am going wrong. What I would really like to do is serve crystal clear 2400 pix width images that look perfect on a retina display on a desktop, and much smaller images that minimise my LCP time on a mobile That way I will have a super fast site that works perfect for all my users, but right now I have an unacceptable compromise that makes my site look grainy on desktops, and is ensuring I have zero "Good" performance pages by Google's assessment.