Images and Fonts

next/image and next/font

The next/image component serves correctly sized, modern-format images, lazy-loads them by default, and reserves space to avoid layout shift (give width and height, or use fill with a sized container). Configure allowed remote image hosts in next.config. next/font downloads fonts at build time and self-hosts them, avoiding extra requests to font providers and reducing layout shift. Both directly affect Core Web Vitals.

Using next/image and next/font (sketch)

Not part of the built demo.

import Image from "next/image";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Hero() {
  return (
    <section className={inter.className}>
      <Image src="/hero.jpg" alt="Desk with notebooks" width={1200} height={600} priority />
    </section>
  );
}

Mark the hero image as priority

The largest image above the fold should load eagerly; everything else can stay lazy.

त्वरित जाँच: Why give next/image a width and height?

• To disable optimisation
• To make the image square
• Because it cannot load otherwise in any case
• To reserve space and avoid layout shift while it loads