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/imageLoader.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest'
+import { imageLoader } from './imageLoader'
+describe('imageLoader', () => {
+  it('should generate the correct image URL for absolute URLs', () => {
+    const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
+    const url = loader({
+      quality: 80,
+      src: 'https://example.com/image.jpg',
+      width: 800,
+    })
+
+    expect(url).toBe(
+      'https://img.scandichotels.com/.netlify/images?url=https://example.com/image.jpg&w=800&q=80'
+    )
+  })
+
+  it('should generate the correct image URL for relative URLs', () => {
+    const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
+    const url = loader({
+      quality: 80,
+      src: '/image.jpg',
+      width: 800,
+    })
+
+    expect(url).toBe('/image.jpg?w=800&q=80')
+  })
+
+  it('should compensate for landscape 3:2 images', () => {
+    const loader = imageLoader({ dimensions: { width: 6000, height: 4000 } })
+    const url = loader({
+      src: '/image.jpg',
+      width: 400,
+    })
+
+    expect(url).toBe('/image.jpg?w=600')
+  })
+
+  it('should compensate for landscape ~3:2 images', () => {
+    const loader = imageLoader({ dimensions: { width: 7952, height: 5304 } })
+    const url = loader({
+      src: '/image.jpg',
+      width: 400,
+    })
+
+    expect(url).toBe('/image.jpg?w=600')
+  })
+
+  it('should compensate for standing 2:3 images', () => {
+    const loader = imageLoader({ dimensions: { width: 4000, height: 6000 } })
+    const url = loader({
+      src: '/image.jpg',
+      width: 800,
+    })
+
+    expect(url).toBe('/image.jpg?w=800')
+  })
+
+  it('should compensate for landscape 2:1 images', () => {
+    const loader = imageLoader({ dimensions: { width: 2000, height: 1000 } })
+    const url = loader({
+      src: '/image.jpg',
+      width: 800,
+    })
+
+    // used to fetch an image 800x400 image but we, probably, render it with a height of 533
+
+    expect(url).toBe('/image.jpg?w=1200')
+  })
+})

packages/design-system/lib/components/Image/imageLoader.ts

@@ -0,0 +1,57 @@
+import { ImageLoaderProps } from 'next/image'
+
+export const imageLoader =
+  ({
+    dimensions,
+  }: {
+    focalPoint?: { x: number; y: number }
+    dimensions?: { width: number; height: number }
+  }) =>
+  ({ quality, src, width }: ImageLoaderProps) => {
+    const isAbsoluteUrl =
+      src.startsWith('https://') || src.startsWith('http://')
+    const hasQS = src.indexOf('?') !== -1
+
+    if (
+      dimensions &&
+      isLargerThanAspectRatio(dimensions, '3:2') &&
+      width < dimensions.width
+    ) {
+      // If image is wider than 3:2, compensate for low height when rendering in a 3:2 container
+      const scale = width / dimensions.width
+      const minWidthFor32Aspect =
+        dimensions.height * scale * aspectRatios['3:2'] * 2
+
+      width = Math.max(minWidthFor32Aspect, width)
+    }
+
+    if (width < 500) {
+      // Compensate for bad resizing library used by netlify
+      width += width / 2
+    }
+
+    width = roundToNearest(width, 10)
+
+    if (isAbsoluteUrl) {
+      return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
+    }
+
+    return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}`
+  }
+
+const aspectRatios = {
+  '3:2': 3 / 2,
+}
+function isLargerThanAspectRatio(
+  dimensions: {
+    width: number
+    height: number
+  },
+  aspectRatio: keyof typeof aspectRatios
+) {
+  return dimensions.width / dimensions.height > aspectRatios[aspectRatio]
+}
+
+function roundToNearest(value: number, nearest: number) {
+  return Math.ceil(value / nearest) * nearest
+}

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 })}
+    />
+  )
+}