Merged in feature/SW-3365-blurry-images (pull request #2746)

Feature/SW-3365 reduce upscaling of images (fix blurry images)

* fix: handle when images are wider than 3:2 but rendered in a 3:2 container

* use dimensions everywhere applicable

* fall back to using <img sizes='auto' /> if possible

* imageLoader: never nest

* remove empty test file


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

apps/scandic-web/components/Hero/hero.ts

@@ -1,7 +1,8 @@
-import type { FocalPoint } from "@scandic-hotels/trpc/types/image"
+import type { FocalPoint, Image } from "@scandic-hotels/trpc/types/image"
 
 export interface HeroProps {
   alt: string
   src: string
   focalPoint?: FocalPoint
+  dimensions?: Image["dimension"]
 }

apps/scandic-web/components/Hero/index.tsx

@@ -4,7 +4,12 @@ import styles from "./hero.module.css"
 
 import type { HeroProps } from "./hero"
 
-export default async function Hero({ alt, src, focalPoint }: HeroProps) {
+export default async function Hero({
+  alt,
+  src,
+  focalPoint,
+  dimensions,
+}: HeroProps) {
   return (
     <Image
       className={styles.hero}
@@ -13,6 +18,7 @@ export default async function Hero({ alt, src, focalPoint }: HeroProps) {
       width={1196}
       src={src}
       focalPoint={focalPoint}
+      dimensions={dimensions}
       priority
     />
   )