# Images and Fonts — Next.js

Source: https://www.skillbyai.com/en/nextjs/u-assets

> Built-in optimisation.

## 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.

```tsx
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.

**Quiz:** Why give next/image a width and height?

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

*Answer:* To reserve space and avoid layout shift while it loads. Stable layout improves Core Web Vitals.