Use optimized images and fonts

next/image helps size, lazy-load, and serve responsive images. next/font loads font files with predictable layout and no browser request to a third-party font provider.

Importing a local image gives Next.js its intrinsic dimensions. A remote image needs explicit width and height, or fill inside a positioned container with a real size. Restrict remote sources with remotePatterns; an unrestricted image proxy can fetch content you never intended to serve.

<Image
  src={noteCover}
  alt="Handwritten notes beside an open laptop"
  sizes="(max-width: 768px) 100vw, 640px"
/>

sizes tells the browser how wide the image will render so it can choose a suitable candidate. Without an accurate value, a responsive image can still download far more pixels than it needs. Reserve preload or high-priority loading for the image that materially affects the first viewport.

The APIs do not choose useful content for you. Explain the image’s purpose in alt text, or use alt="" when it is decorative, and preserve dimensions to avoid layout shift. With next/font, expose the returned class or CSS variable near the root layout and request only the families, subsets, styles, and weights the interface uses.

Add one meaningful image and one font. At narrow and wide sizes, inspect dimensions, alt text, the selected srcset candidate, layout shift, and font requests. Remove an unused weight and verify the network evidence changes.