Förklaring

Next.js Image-komponenten kräver att bildens dimensioner anges i förväg så att webbläsaren kan reservera rätt utrymme i layouten innan bilden laddats. Utan det uppstår Cumulative Layout Shift (CLS), det vill säga att sidan hoppar till när bilden dyker upp. Det påverkar både användarupplevelse och Core Web Vitals.

Det finns två varianter: ange width och height i pixlar för bilder med kända mått, eller använd fill för bilder som ska fylla sin container. Med fill sköter komponenten storleksanpassningen automatiskt baserat på föräldraelementets storlek.

Vanliga orsaker

Image-komponent utan width- och height-props, och utan fill-prop.

Lösning

Ange dimensioner eller använd fill:

// Kända dimensioner
<Image src={src} width={800} height={600} alt="..." />

// fill — föräldern måste ha position: relative och en definierad höjd
<div style={{ position: 'relative', height: '400px' }}>
  <Image src={src} fill alt="..." style={{ objectFit: 'cover' }} />
</div>

För bilder från ett CMS eller extern källa där dimensionerna inte är kända i förväg är fill ofta det enklaste alternativet.