Componenta <Image> în Next.js în React & Next.js

Optimizare automată a performanței Core Web Vitals

Componenta <Image> redimensionează imaginile pe server la dimensiunea ecranului utilizatorului, le convertește în WebP/AVIF și rezervă spațiul geometric în pagină pentru a elimina complet variațiile neplăcute de layout (Cumulative Layout Shift – CLS).

import Image from 'next/image';

export function Banner() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Platforma Dexblog"
      width={1200}
      height={500}
      priority={true} // Se descarcă imediat pentru a îmbunătăți metrica LCP
    />
  );
}