mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

perf: fix sizes attribute scaling bug to prevent mobile devices from downloading 1920w desktop images

Browse Source
This commit is contained in:
Marc Mintel
2026-07-01 18:23:50 +02:00
parent 16d494689f
commit f2e59fa52f
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/page.tsx
View File

@@ -136,7 +136,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
as: 'image', as: 'image',
fetchPriority: 'high', fetchPriority: 'high',
imageSrcSet: '/assets/videos/web/hero-kabelpflug-poster-mobile.webp 800w, /assets/videos/web/hero-kabelpflug-poster.webp 1920w', 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'); const mdx = await getMdxContent(locale, 'home');

2
components/blocks/HeroVideo.tsx
View File

@@ -84,7 +84,7 @@ export function HeroVideo(props: HeroVideoProps) {
key={`img-${pathname}-${posterSrc}`} key={`img-${pathname}-${posterSrc}`}
src={posterSrc} src={posterSrc}
srcSet={posterSrc.includes('-poster.webp') ? `${posterSrc.replace('-poster.webp', '-poster-mobile.webp')} 800w, ${posterSrc} 1920w` : undefined} 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} alt={posterAlt}
className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none" className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
decoding="sync" decoding="sync"