Merged in feat/sw-3191-images (pull request #2670)

feat(images): SW-3191 slightly increase image width to improve quality

* feat(images): SW-3191 slightly increase image width to improve quality


Approved-by: Joakim Jäderberg

apps/scandic-web/next.config.ts

@@ -56,7 +56,7 @@ const nextConfig = {
   },
   images: {
     minimumCacheTTL: 2678400, // 31 days
-    deviceSizes: [320, 420, 768, 1024, 1200, 2400],
+    deviceSizes: [320, 420, 768, 900, 1024, 1200, 2400],
     imageSizes: [200, 400, 800, 1200, 1920],
     remotePatterns: [
       {

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

@@ -22,6 +22,10 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
   const isAbsoluteUrl = src.startsWith('https://') || src.startsWith('http://')
   const hasQS = src.indexOf('?') !== -1
 
+  if (width < 500) {
+    width += 150 // HACK! Slightly increase width for better quality
+  }
+
   if (isAbsoluteUrl) {
     return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
   }