Description

When next/image uses the fill prop without sizes, it defaults to sizes="100vw". This tells the browser the image fills the entire viewport width, causing it to download unnecessarily large images even when the image is inside a small grid card.

Files to change

1. surfsense_web/components/homepage/features-bento-grid.tsx (lines 407-412)

<Image
  src="/homepage/comments-audio.webp"
  alt="Audio Comment Illustration"
  fill
  className="object-cover"
/>

Fix: Add sizes matching the bento grid column width:

sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"

2. surfsense_web/components/tool-ui/image/index.tsx (line ~305)

Missing sizes with fill. Also the auto-ratio branch (~line 286) uses sizes="100vw" which is too coarse when maxWidth is set.

Fix: Derive sizes from container/maxWidth, e.g. sizes="(max-width: 512px) 100vw, 512px".

3. surfsense_web/mdx-components.tsx (line ~15)

The img to Image MDX mapping has no default sizes.

Fix: Add a sensible default based on prose max-width: sizes="(max-width: 768px) 100vw, 896px".

Acceptance criteria

• All fill images have an appropriate sizes prop
• Images render at correct visual sizes
• Smaller image files downloaded on mobile viewports