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.
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.
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

