Investigate changes to preload of hero image

[eagerterrier]

Is your feature request related to a problem? Please describe.
Currently we use imagesrcset as in <link data-react-helmet="true" rel="preload" as="image" href="https://ichef.bbci.co.uk/news/640/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg" imagesrcset="https://ichef.bbci.co.uk/news/240/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp 240w, https://ichef.bbci.co.uk/news/320/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp 320w, https://ichef.bbci.co.uk/news/480/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp 480w, https://ichef.bbci.co.uk/news/624/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp 624w, https://ichef.bbci.co.uk/news/800/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp 800w" imagesizes="(min-width: 1008px) 645px, 100vw"/>

Safari doesn't support imagesrcset so this will result in safari preloading https://ichef.bbci.co.uk/news/640/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg and then using whichever of the webp images is appropriate for the page width

I wonder, too, if googlebot can't work out what size to use with imagesrcset as the LCP stats went up a few days after launch of webp.

Describe the solution you'd like
Can we take current srcset and turn into individual preloads and media queries

e.g. expand on this to include all image sizes

<link rel="preload" as="image" href="https://ichef.bbci.co.uk/news/320/cpsprodpb/CAFC/production/_122646915_boris_johnson_1_getty.jpg.webp" media="(max-width: 320px) and (max-resolution: 1dppx)"/>

as described here https://www.bronco.co.uk/our-ideas/using-relpreload-for-responsive-images/

Testing notes
[Tester to complete]

Dev insight: Changes should mean only one hero image will be loaded no matter what the browser.

• This feature is expected to need manual testing.

Checklist

• (BBC contributors only) This issue follows the repository use guidelines