Improved image sizing throughout the site

[lukasbestle]

Description

Summary of changes

• Images loaded with the img() helper that are lazy-loaded (which is the default) now get a sizes="auto" attribute if not passed manually
• Most relevant LCP images "above the fold" are now loaded without lazy-loading
• sizes attribute is set for those LCP images so that the browser can immediately load the correct srcset variant

Reasoning

• Increase load and render performance
• Reduce transfer sizes

Additional context

Images "below the fold" are still lazy-loaded. With sizes="auto", modern browsers can figure out the correct sizes better than we can manually. So I didn't touch these.

[lukasbestle]

In general: The fluid layout makes everything a sliding scale. So:

• the srcset numbers are mostly chosen by feeling except those exact sizes in the max-width case we know,
• the sizes thresholds are also rough as I couldn't reliably determine all exact breakpoints (if you know or can determine them, feel free to edit those directly) and
• the sizes vw units are rough by definition because of the fluid layout (the margins are often static, but the images scale fluidly, which prevents the ratios from being exact for the entire scale). I have chosen those to fit for the part of the breakpoint where the image is 80-90% of its maximum size.