From 20d34198e3f24660c8ed36b94f24cd84691490ae Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Tue, 19 Aug 2025 06:54:25 +0000 Subject: [PATCH] Merged in feat/sw-3191-images (pull request #2670) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 +- packages/design-system/lib/components/Image.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/scandic-web/next.config.ts b/apps/scandic-web/next.config.ts index bd461411a..77d722107 100644 --- a/apps/scandic-web/next.config.ts +++ b/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: [ { diff --git a/packages/design-system/lib/components/Image.tsx b/packages/design-system/lib/components/Image.tsx index 0eba7aaec..b4728a40f 100644 --- a/packages/design-system/lib/components/Image.tsx +++ b/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 : ''}` }