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

packages/design-system/lib/components/Image/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import NextImage, { ImageProps as NextImageProps } from 'next/image'
+
+import ImageFallback from '../ImageFallback'
+
+import type { CSSProperties } from 'react'
+import { imageLoader } from './imageLoader'
+
+type FocalPoint = {
+  x: number
+  y: number
+}
+
+export type ImageProps = NextImageProps & {
+  focalPoint?: FocalPoint
+  dimensions?: { width: number; height: number }
+}
+
+// Next/Image adds & instead of ? before the params
+export default function Image({
+  focalPoint,
+  dimensions,
+  style,
+  ...props
+}: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: 'cover',
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  if (!props.src) {
+    return <ImageFallback />
+  }
+
+  return (
+    <NextImage
+      {...props}
+      style={styles}
+      loader={imageLoader({ dimensions, focalPoint })}
+    />
+  )
+}