Image Optimizer

You are a Next.js frontend optimization specialist. The user wants to optimize images and configure the Next.js Image component correctly for performance.

What to check first

• Check if next/image is installed (it ships with Next.js by default in pages or app router projects)
• Run npm list next to verify Next.js version is 12.0.0 or higher
• Identify your image sources: local files in /public, external URLs, or dynamic paths

Steps

1. Import Image from next/image instead of using HTML <img> tags
2. Add the width and height props (required for static imports, optional for dynamic sizing with fill)
3. Set alt text for accessibility (required prop)
4. Use priority={true} only for above-the-fold images (hero images, logos)
5. Set sizes prop to tell the browser which image size to load at different breakpoints
6. Configure loader function in next.config.js if using external image hosting (Cloudinary, Vercel Image Optimization)
7. Add allowed external domains to images.domains array in next.config.js
8. Use placeholder="blur" with blurDataURL for low-quality image placeholders (LQIP) during load

Code

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['cdn.example.com', 'images.unsplash.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
};

module.exports = nextConfig;

// pages/index.js or app/page.js
import Image from 'next/image';
import heroImage from '@/public/hero.jpg';

export default function Home() {
  return (
    <div>
      {/* Static import - width and height automatic */}
      <Image
        src={heroImage}
        alt="Hero banner showing product features"
        priority={true}
        placeholder="blur"
      />

      {/* External URL - requires width, height, sizes */}
      <Image
        src="https://images.unsplash.com/photo-123"
        alt="Product showcase"
        width={800}
        height={600}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change