picture code for responsive headerimage and preloading it

[deeper]

Hi,
my website, which is responsive "desktop-first", has a header image. It is 930x300 for desktop. There are five media queries with different versions of the image.
I have never used a picture tag before, which I need now because of "art direction".

Could someone confirm the following picture code to be correct? Especially the img part there may be a little bit unusual.

<picture> 
 <source media="(max-width: 26.8125em)" srcset="image-430x172-1x.jpg 1x, image-860x344-2x.jpg 2x" width="430" height="172">
 <source media="(max-width: 31.1875em)" srcset="image-500x200-1x.jpg 1x, image-1000x400-2x.webp 2x" width="500" height="250">
 <source media="(min-width: 31.25em) and (max-width: 41.875em)" srcset="image-670x268-1x.jpg 1x, image-1340x536-2x.webp 2x" width="670" height="268">
 <source media="(min-width: 41.9375em) and (max-width: 51.8125em)" srcset="image-930x372narrow-1x.webp 1x, image-1395x558-15x.webp 1.5x" width="930" height="372">
 <source media="(min-width: 51.875em) and (max-width: 60em)" srcset="image-930x372narrow-1x.webp 1x, image-1395x558-15x.webp 1.5x" width="930" height="372">
 <img class="headergrafik" src="image-930x300wide-1x.webp" srcset="image-930x300breit-1x.webp 1x, breit-1860x600wide-2x.webp 2x" width="930" height="300" alt="...">
 </picture>

I'd also like to preload this header image.

I have found a similar example, does the following code show the right way, i.e., I need to create six preload-tags in my case, one for desktop and one for every single media query (five)?

<link rel="preload" as="image" href="desktop.jpg" 
 media="(min-width: 1025px)">

<link rel="preload" as="image" 
 imagesrcset="mobile-1x.jpg 1x, mobile-2x.jpg 2x" 
 media="(max-width: 1024px)">

Thanks!

[not2easy]

I don't use the <picture> tag or preload any resources so I am not much help here, but the usage and limits are explained at w3schools: [w3schools.com...]

Before that, I'd suggest a visit to the W3.org Validator: [validator.w3.org...] to find anything that might need attention.

Others who do use the tags may be more helpful.

[deeper]

@not2easy O.K., let's see.

Here is my attempt for the preload code. What to do with width and heights from the <picture>, which are needed there for aspect ratio in order to avoid layout shift? Just dropping them in preload tags?

<link rel="preload" as="image" fetchpriority="high" media="(max-width: 26.8125em)" imagesrcset="image-430x172-1x.jpg 1x, image-860x344-2x.jpg 2x">

<link rel="preload" as="image" fetchpriority="high" media="(max-width: 31.1875em)" imagesrcset="image-500x200-1x.jpg 1x, ./grafiken/headerbild-1000x400-2x.webp 2x">

<link rel="preload" as="image" fetchpriority="high" media="(min-width: 31.25em) and (max-width: 41.875em)" imagesrcset="image-670x268-1x.jpg 1x, image-1340x536-2x.webp 2x">

<link rel="preload" as="image" fetchpriority="high" media="(min-width: 41.9375em) and (max-width: 51.8125em)" imagesrcset="image-930x372narrow-1x.webp 1x, image-1395x558-15x.webp 1.5x">

<link rel="preload" as="image" fetchpriority="high" media="(min-width: 51.875em) and (max-width: 60em)" imagesrcset="image-930x372narrow-1x.webp 1x, image-1395x558-15x.webp 1.5x">

<!-- default-img of <picture> , desktop-image "desktop-first" -->
<link rel="preload" as="image" fetchpriority="high" media="(min-width: 60.0625em)" imagesrcset="image-930x300breit-1x.webp 1x, image-1860x600breit-2x.webp 2x">

[lucy24]

I am very uneasy about all those max-widths in ems when we are talking about a picture, whose size is in pixels. (Besides, having both max-width and min-width is redundant. Pick one or the other.) It only works when the whole page has a forced text size, which is generally A Bad Thing.

:: happily wondering what happens the day a user's configuration results in a width of exactly 51.85 em ::

[not2easy]

TY lucy24, that is why I suggested using the Validator to point out issues.

[deeper]

@lucy24

I am very uneasy about all those max-widths in ems when we are talking about a picture, whose size is in pixels. (Besides, having both max-width and min-width is redundant. Pick one or the other.) It only works when the whole page has a forced text size, which is generally A Bad Thing.

:: happily wondering what happens the day a user's configuration results in a width of exactly 51.85 em ::

It's quite normal to use em for viewport width of media queries and viewport width has nothing to do with the size of any image of the page, has it? em-values are exact equivalents for pixel values, due to 1em = 1 rem = 16px. font size is different with the media queries/viewports, of course, which is fine for my website, but this is not my question.
Media queries with both max-width and min-width are usual, too. It's just another way of giving the media query its viewport area, a way which has its advantages and disadvantages, compared to pure desktop-first/mobile-first with just max-width or min-width.

Thanks for your ideas, though my question is about the correct picture code and the preload tags according to this <picture>.

[lucy24]

em-values are exact equivalents for pixel values, due to 1em = 1 rem = 16px

wtf? An em is not an absolute measure like a pixel; it is dependent on the point size of the text.