Next.js Image & Font Optimization Strategy

What this prompt does

This prompt turns the AI into a Next.js performance specialist focused on the two assets that wreck Core Web Vitals most often: images and fonts. It walks through a six-step plan that audits the images in [images_directory], configures the Next.js Image component for [image_cdn], applies art direction for hero crops, tunes next/font for [font_count] fonts, builds a font-fallback metrics system, and adds a build-time conversion pipeline. The [site_type] variable frames the whole audit, so an e-commerce store gets thumbnail-heavy advice while a content site leans toward hero and typography work.

The structure works because it attacks layout shift and payload size in the order they actually cause damage. Categorizing images first means each one gets dimensions and formats that fit its job, and the [size_reduction] target gives the AI a concrete payload goal to reason against. The [placeholder_strategy] setting and the font size-adjust/ascent-override step both exist to drive Cumulative Layout Shift toward zero, which is usually the hardest Core Web Vitals metric to move by hand. Wrapping each image category into a typed component also means the optimization doesn't quietly regress as new pages and developers are added later.

When to use it

• A Next.js site's Lighthouse or CrUX scores are dragging down search rankings or conversions
• LCP is slow because hero images ship at the wrong size or format
• You see visible layout shift while web fonts swap in on first paint
• You want reusable HeroImage, Thumbnail, and Avatar wrappers so optimization survives growth
• You're standardizing image handling before onboarding a larger team
• You need a repeatable build step that converts and strips EXIF metadata automatically
• You're migrating to [image_cdn] and want responsive sizes and art direction set up correctly

Example output

Expect a structured, step-by-step plan rather than a single file. You typically get an image-audit table grouped by category with recommended dimensions, formats, and quality settings, code for the custom loader and the wrapper components, a next/font configuration block with Latin subsetting and per-context font-display settings, the fallback-metrics CSS overrides that come from adjustFontFallback, and a sketch of a GitHub Action or build script that processes [images_directory] before deployment. Each step is explained so you can adapt it to your project rather than paste it blind, and the art-direction step shows distinct mobile, tablet, and desktop crops for hero images.

Pro tips

• Set [images_directory] to the real path the AI should scan (the default public/images) so the audit reflects your actual assets
• Pick [image_cdn] to match your host; the loader code changes between Vercel's built-in optimizer and a third-party CDN
• Keep [placeholder_strategy] on blur for hero and product shots, but switch to a solid color for icons where a blur is wasted
• Be honest about [font_count] — every extra font is more bytes and more potential CLS, so trim before you optimize
• Treat [size_reduction] as a target to verify with [testing_tool], not a guarantee; real savings depend on your source images
• If CLS persists after images, the font adjustFontFallback metrics step is almost always the missing fix