Next.js

Verified against Claude Code · 2026-07-27

Audit a page for next/image misuse before Lighthouse catches it

Scans a page's images for missing priority hints, wrong fill/dimension usage, and un-allow-listed remote domains — the mistakes that quietly tank LCP and CLS.

Claude CodeCursor 2.1GitHub Copilot

The prompt

Ready to copy — highlighted parts are example details you can swap.

<context>
Page or component code to audit: app/blog/[slug]/page.tsx — hero image plus inline images in the post body
External image domains in use, if any: images.ctfassets.net (Contentful), cdn.example-cms.com
</context>

<task>
Audit every image on this page for next/image correctness. Flag anything using a plain <img> tag where next/image should be used, and anything using next/image incorrectly in a way that would hurt Core Web Vitals.
</task>

<checklist>
- Plain <img> tags for content images: flag for conversion to next/image, unless there's a specific reason (e.g. an SVG icon, or an image whose dimensions genuinely can't be known ahead of time) — name that reason if you're leaving one as-is.
- The largest above-the-fold image (the likely LCP element): must have priority set to disable lazy-loading; if it's currently lazy-loaded by default, that's a direct LCP regression, flag it as high severity.
- Every other next/image usage: should NOT have priority set — marking every image priority defeats the point and front-loads bandwidth for images the user may never scroll to.
- Any image using fill: confirm its parent element has position: relative (or similar) and defined dimensions; fill with an unsized/static parent causes the image to collapse or overflow.
- Any image using explicit width/height instead of fill: confirm the values match (or are proportional to) the actual source image's aspect ratio — mismatched dimensions cause layout shift or a distorted image.
- Any image sourced from an external domain: confirm that domain is in next.config's images.remotePatterns; flag any that aren't — those requests fail at request time in production, not at build time, so this often only surfaces after deploy.
- Images that resize significantly across breakpoints (e.g. full-width on mobile, one-third width on desktop): confirm a sizes attribute is set so the browser downloads an appropriately sized file at each breakpoint, not the largest variant everywhere.
</checklist>

<output_format>
A findings table: Image/location | Issue | Severity (LCP-impacting / CLS-impacting / will-fail-in-prod / minor) | Fix.
</output_format>
Customize the highlighted detailsoptional — the prompt above already works

Why this works

Most next/image mistakes are invisible in local development and only show up in a Lighthouse report or a production error weeks later, which is exactly why a targeted checklist beats a general 'optimize my images' ask: the priority-on-the-LCP-image rule catches a lazy-loaded hero image that's actively hurting LCP score, the fill-needs-a-sized-relative-parent rule catches a collapse bug that only appears at certain viewport widths, and the remotePatterns check catches a failure mode that doesn't exist at build time at all — an un-allow-listed external domain builds successfully and only fails when a real request hits it in production. Distinguishing 'every image should have priority' from 'exactly the LCP image should' also matters because the naive fix (add priority everywhere) removes the lazy-loading benefit for every image below the fold, trading one performance problem for a worse one.

What you get back

Hero image at app/blog/[slug]/page.tsx line 14: plain <img>, no priority equivalent, likely the LCP element — convert to next/image with priority. Inline post-body images: using next/image correctly but sourced from cdn.example-cms.com, which isn't in remotePatterns — will fail in production despite working in local dev if that domain happens to be cached.

Verified against

Claude Code Sonnet 4.6 · 2026-07-27

Cursor 2.1 · 2026-07-29

Changelog

  • 2026-07-27 Initial version, tested against Claude Code on a Next.js 16 blog with a CMS-hosted image domain.
Pairs with our free Website Speed Test — no signup, runs in your browser.

Need this built into your business?

If a prompt isn't enough — custom software, built and maintained for you — that's Scult's day job.

EXPLORE CUSTOM SOFTWARE
All Next.js prompts

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY