From harness-claude
Optimizes images in Next.js apps with next/image for automatic sizing, modern formats (WebP/AVIF), lazy loading, and blur placeholders. Improves LCP/CLS via priority and sizes props.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Serve optimized, correctly sized images automatically with next/image
Optimizes Next.js apps for Core Web Vitals (LCP, INP, CLS) via image/font optimization, caching with unstable_cache/revalidateTag, Server Components, Suspense streaming, and bundle reduction. Supports Next.js 16 + React 19.
Designs responsive image pipelines with srcset, AVIF/WebP formats, lazy loading, and sizes queries. Generates code for Next.js, Nuxt, Blazor, vanilla HTML/CSS.
Provides React Server Components patterns, streaming SSR, code splitting, bundle optimization, and Core Web Vitals guidance for Next.js apps.
Share bugs, ideas, or general feedback.
Serve optimized, correctly sized images automatically with next/image
Image from next/image instead of the HTML <img> tag for all content images.width and height props for images with known dimensions to prevent layout shift (CLS).fill prop with a positioned parent (position: relative) for images that should fill their container — omit width and height when using fill.priority to the first image visible in the viewport (the LCP element) to disable lazy loading and preload it.sizes prop to tell the browser how wide the image will be at each breakpoint — this enables accurate srcset selection.images.remotePatterns in next.config.ts before using external image URLs.placeholder="blur" with blurDataURL for a low-quality preview while the image loads.blurDataURL automatically — import logo from './logo.png' and pass the imported object.// next.config.ts
const config = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'cdn.example.com', pathname: '/images/**' },
],
},
};
// app/products/[id]/page.tsx
import Image from 'next/image';
import heroImage from '@/public/hero.jpg'; // static import — dimensions known
export default function ProductPage() {
return (
<div>
{/* Static import — auto blur placeholder, auto width/height */}
<Image src={heroImage} alt="Hero" priority placeholder="blur" />
{/* Remote image — fill mode for responsive container */}
<div className="relative h-64 w-full">
<Image
src="https://cdn.example.com/images/product.jpg"
alt="Product"
fill
sizes="(max-width: 768px) 100vw, 50vw"
className="object-cover"
/>
</div>
</div>
);
}
next/image wraps the HTML <img> element with automatic size optimization, format conversion, and lazy loading. The optimization pipeline runs server-side: Next.js resizes and converts images to WebP or AVIF on first request and caches the result.
sizes attribute importance: Without sizes, the browser assumes the image is 100vw wide and downloads a larger source than necessary. Providing accurate sizes (e.g., "(max-width: 640px) 100vw, 640px") reduces bandwidth significantly.
fill mode: Use fill when the image dimensions are unknown or when the image should fill a CSS-controlled container. The parent must have position: relative (or absolute/fixed). Use className="object-cover" or className="object-contain" on the Image to control aspect ratio.
priority vs lazy: All images are lazy-loaded by default (loaded when they enter the viewport). The priority prop disables lazy loading and adds a <link rel="preload"> — use it for the LCP image only. Adding priority to multiple images defeats its purpose.
Layout shift (CLS): Providing width and height lets the browser reserve space before the image loads, preventing layout shift. The fill prop avoids this by letting CSS control the container dimensions.
Remote patterns: The remotePatterns config (replacing the deprecated domains) supports wildcards and pathnames. Misconfigured patterns cause 400 errors on image optimization requests.
https://nextjs.org/docs/app/api-reference/components/image