Images and fonts

lesson 8-2 · ~9 min · 26/29

next/image: img with the footguns removed

A plain <img> can silently wreck a page: huge files sent to phones, and content jumping as images pop in (layout shift). Next.js ships a component that fixes both:

import Image from "next/image";

<Image src="/team.jpg" alt="Our team" width={800} height={500} />

What it does for you:

Resizes and re-encodes to modern formats per device, so a phone never downloads a desktop-size JPEG.
Lazy-loads images below the fold by default.
Reserves space from width and height before loading, so the layout never jumps.

That is also why width, height, and alt are required: the first two prevent layout shift, and alt you know from accessibility basics.

Layout shift: a plain img inserts itself late and shoves content down. next/image reserves the exact space up front from width and height.

Quiz

Why does next/image insist on width and height props for a local image?

next/font: fonts without the flash

Loading Google Fonts with a <link> tag costs an extra round trip to Google and often a flash of fallback text. next/font downloads the font at build time and self-hosts it:

// app/layout.js
import { Inter } from "next/font/google";

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

No request ever goes to Google from your users' browsers (better privacy and speed), and the generated CSS includes fallback metrics that minimize text reflow. Set it once in the root layout and forget it.

Problem

A teammate's hero photo makes the headline jump down half a second after page load, and mobile users download a 4 MB file. Which Next.js component fixes both issues? (component name)