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 purpose in alt text, or use alt="" when it is decorative. 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 to Field Notes. At 375px and 1280px widths, inspect the selected srcset candidate in DevTools Network, confirm alt text in the Elements panel, and watch for layout shift as the image loads. Remove an unused font weight and verify the font request count drops.

A broken remotePatterns config often shows up as a 400 from /_next/image with a clear error in the terminal. Fix the hostname before blaming the CDN.

For fonts, loading every weight “just in case” adds kilobytes you never render. Start with regular and semibold, then add bold only when the design actually uses it.