Merge pull request #1222 from oscarzhou511/perf/issue-1089-image-sizes
Some checks are pending
Build and Push Docker Images / tag_release (push) Waiting to run
Build and Push Docker Images / build (./surfsense_backend, ./surfsense_backend/Dockerfile, backend, surfsense-backend, ubuntu-24.04-arm, linux/arm64, arm64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_backend, ./surfsense_backend/Dockerfile, backend, surfsense-backend, ubuntu-latest, linux/amd64, amd64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_web, ./surfsense_web/Dockerfile, web, surfsense-web, ubuntu-24.04-arm, linux/arm64, arm64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_web, ./surfsense_web/Dockerfile, web, surfsense-web, ubuntu-latest, linux/amd64, amd64) (push) Blocked by required conditions
Build and Push Docker Images / create_manifest (backend, surfsense-backend) (push) Blocked by required conditions
Build and Push Docker Images / create_manifest (web, surfsense-web) (push) Blocked by required conditions

perf: optimize next/image sizes with dynamic maxWidth (#1089)
This commit is contained in:
Rohan Verma 2026-04-14 01:51:50 -07:00 committed by GitHub
commit 91c2c06108
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -288,7 +288,7 @@ export function Image({
alt={alt}
width={0}
height={0}
sizes="100vw"
sizes={`(max-width: ${maxWidth}) 100vw, ${maxWidth}`}
loading="eager"
className={cn(
"w-full h-auto transition-transform duration-300",
@ -307,7 +307,7 @@ export function Image({
src={src}
alt={alt}
fill
sizes="(max-width: 512px) 100vw, 512px"
sizes={`(max-width: ${maxWidth}) 100vw, ${maxWidth}`}
className={cn(
"transition-transform duration-300",
fit === "cover" ? "object-cover" : "object-contain",