From f2e59fa52f7a687b0de73d9291487a572f32fdfa Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 1 Jul 2026 18:23:50 +0200
Subject: [PATCH] perf: fix sizes attribute scaling bug to prevent mobile
 devices from downloading 1920w desktop images

---
 app/[locale]/page.tsx           | 2 +-
 components/blocks/HeroVideo.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index af44c700d..100c9956c 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -136,7 +136,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
     as: 'image', 
     fetchPriority: 'high',
     imageSrcSet: '/assets/videos/web/hero-kabelpflug-poster-mobile.webp 800w, /assets/videos/web/hero-kabelpflug-poster.webp 1920w',
-    imageSizes: '(max-width: 768px) 800px, 1920px'
+    imageSizes: '100vw'
   });
 
   const mdx = await getMdxContent(locale, 'home');
diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx
index b918c17c5..fe6181c03 100644
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -84,7 +84,7 @@ export function HeroVideo(props: HeroVideoProps) {
         key={`img-${pathname}-${posterSrc}`}
         src={posterSrc}
         srcSet={posterSrc.includes('-poster.webp') ? `${posterSrc.replace('-poster.webp', '-poster-mobile.webp')} 800w, ${posterSrc} 1920w` : undefined}
-        sizes={posterSrc.includes('-poster.webp') ? "(max-width: 768px) 800px, 1920px" : undefined}
+        sizes={posterSrc.includes('-poster.webp') ? "100vw" : undefined}
         alt={posterAlt}
         className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
         decoding="sync"