I am looking for an equivalent of the responsive images code below, which I can use to preload the correct file.
Since the <link rel="preload" as="image"> can be used with imagesizes and imagesrcset (MDN - link#imagesrcset), I am fairly sure their is a way, but I don't see it yet.
<picture>
<source media="(min-width: 1024px)"
srcset="image.jpg?w=1000&h=384&auto=format&q=75 1x,
image.jpg?w=1000&h=384&auto=format&q=75&dpr=2 2x">
<source media="(min-width: 708px)"
srcset="image.jpg?w=700&h=256&auto=format&q=75 1x,
image.jpg?w=700&h=256&auto=format&q=75&dpr=2 2x">
<source media="(min-width: 391px)"
srcset="image.jpg?w=390&h=256&auto=format&q=75 1x,
image.jpg?w=390&h=256&auto=format&q=75&dpr=2 2x">
<source srcset="image.jpg?w=320&h=256&auto=format&q=75&dpr=2 2x">
<img src="image.jpg?w=320&h=256&auto=format&q=75" width="400" height="256" alt="" decoding="async" fetchpriority="high">
</picture>
I did get to the simple version, but that omits all the &dpr=2/2x files from the the <picture> element - or only loads 2x files, if I change it accordingly.
<link rel="preload" as="image"
imagesrcset="
image.jpg?h=256&w=320&auto=format&q=75 320w,
image.jpg?h=256&w=390&auto=format&q=75 390w,
image.jpg?h=256&w=700&auto=format&q=75 700w,
image.jpg?h=384&w=1000&auto=format&q=75 1000w
"
imagesizes="
(min-width: 1024px) 1000px,
(min-width: 708px) 700px,
(min-width: 391px) 390px,
320px
">
You can use the <link> tag with the rel="preload" attribute, specifying the as="image" attribute to indicate that it's an image resource being preloaded. The imagesrcset and imagesizes attributes are not directly supported within the <link> tag. Instead, you can use the href attribute to specify the image URL and its width, and use media queries in CSS to specify different image sizes based on viewport width. This will effectively preload the correct image files based on the viewport size, similar to your <picture> element with srcset and media attributes.
Here is how you can do that:
<link rel="preload" as="image"
imagesrcset="image.jpg?w=1000&h=384&auto=format&q=75 1x,
image.jpg?w=1000&h=384&auto=format&q=75&dpr=2 2x"
media="(min-width: 1024px)">
<link rel="preload" as="image"
imagesrcset="image.jpg?w=700&h=256&auto=format&q=75 1x,
image.jpg?w=700&h=256&auto=format&q=75&dpr=2 2x"
media="(min-width: 708px)">
<link rel="preload" as="image"
imagesrcset="image.jpg?w=390&h=256&auto=format&q=75 1x,
image.jpg?w=390&h=256&auto=format&q=75&dpr=2 2x"
media="(min-width: 391px)">
<link rel="preload" as="image"
imagesrcset="image.jpg?w=320&h=256&auto=format&q=75 1x,
image.jpg?w=320&h=256&auto=format&q=75&dpr=2 2x">