Advanced Image Optimization

import Image from "next/image";
import heroImage from "./hero.jpg"; // Static import
 
export default function AboutPage() {
  return (
    <Image
      src={heroImage}
      placeholder="blur" // blurDataURL auto-generated
      alt="Team photo"
      className="rounded-lg"
    />
  );
}

import Image from "next/image";
 
// Pre-generated blur placeholder (10x10 pixels, base64 encoded as text representation of binary data)
const blurDataURL =
  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAKAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABgcI/8QAIhAAAgEDBAMBAAAAAAAAAAAAAQIDBAURAAYSIQcTMUH/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABkRAAIDAQAAAAAAAAAAAAAAAAECAAMRIf/aAAwDAQACEQMRAD8Aq9t3Bb7hU1FPBLIZYQDIrRMuAf3OdNNu+RbRa7XDQS1VY8kKhGkMBUMQMZxk4z+aUbf8d2i3XGorYpq1pZwA4aYEDA/MYGl+4/HdnulzqK2Kauikn5c1SYEKZxnGQDjP5rRVlYnJz//2Q==";
 
export default function GalleryPage() {
  return (
    <div className="relative aspect-video">
      <Image
        src="https://picsum.photos/1200/800"
        alt="Gallery image"
        fill
        placeholder="blur"
        blurDataURL={blurDataURL}
        sizes="(max-width: 768px) 100vw, 50vw"
        className="object-cover"
      />
    </div>
  );
}

/**
 * Generate a simple color-based blur placeholder.
 * For production, use a library like plaiceholder for better results.
 */
export function generateColorPlaceholder(
  r: number,
  g: number,
  b: number
): string {
  // 1x1 pixel SVG with the dominant color
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect fill="rgb(${r},${g},${b})" width="1" height="1"/></svg>`;
  return `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
}
 
// Usage: generateColorPlaceholder(59, 130, 246) → blue placeholder

I need blur placeholders (blurDataURL) for remote images in Next.js.
 
<context>
Static imports get automatic blur placeholders:
```tsx
import hero from './hero.jpg'
<Image src={hero} placeholder="blur" /> // Works automatically
```
 
Remote images need manual blurDataURL:
```tsx
<Image
  src="https://cdn.example.com/photo.jpg"
  placeholder="blur"
  blurDataURL="data:image/..." // Must provide this
/>
```
</context>
 
<my-situation>
**Image source:** _____
Example: "CMS API", "User uploads", "External CDN"
 
**When URLs are known:**
- [ ] Build time (static list of images)
- [ ] Runtime (dynamic, from API/database)
 
**Image types:** _____
Example: "Product photos", "User avatars", "Blog featured images"
 
**Volume:** ~_____ images
</my-situation>
 
<current-implementation>
```tsx
// How I'm currently loading images:
___PASTE_YOUR_IMAGE_CODE___
```
</current-implementation>
 
**Questions:**
1. Should I generate placeholders at build time or runtime?
2. Which library? (plaiceholder, sharp, thumbhash)
3. Where should I cache generated placeholders?
4. How do I avoid blocking page render?
 
Generate a production-ready blur placeholder system that:
- Works with my image source
- Includes caching strategy
- Integrates with next/image
- Doesn't hurt performance

import { getImageProps } from "next/image";
 
export function HeroImage() {
  const common = { alt: "Product showcase", sizes: "100vw" };
 
  // Desktop: wide landscape image
  const {
    props: { srcSet: desktop },
  } = getImageProps({
    ...common,
    width: 1440,
    height: 600,
    quality: 85,
    src: "/hero-desktop.jpg",
  });
 
  // Mobile: tall portrait image (different crop, not just smaller)
  const {
    props: { srcSet: mobile, ...rest },
  } = getImageProps({
    ...common,
    width: 750,
    height: 1000,
    quality: 75,
    src: "/hero-mobile.jpg",
  });
 
  return (
    <picture>
      <source media="(min-width: 1024px)" srcSet={desktop} />
      <source media="(min-width: 640px)" srcSet={mobile} />
      <img {...rest} style={{ width: "100%", height: "auto" }} />
    </picture>
  );
}

I need to decide between responsive images and art direction for my Next.js app.
 
<context>
**Responsive images** (same image, different sizes):
```tsx
<Image src={photo} sizes="(max-width: 768px) 100vw, 50vw" />
```
 
**Art direction** (different images per breakpoint):
```tsx
<picture>
  <source media="(max-width: 768px)" srcSet={mobileImg} />
  <Image src={desktopImg} />
</picture>
```
</context>
 
<my-image>
**Image type:** _____
Example: "Hero banner", "Product photo", "Team headshot"
 
**Desktop version:**
- Dimensions: _____x_____
- What it shows: _____
 
**Mobile version (current):**
- What happens when desktop image is scaled down: _____
Example: "Important content gets cropped", "Text becomes unreadable", "Looks fine"
 
**The problem (if any):** _____
Example: "Product details too small on mobile", "Wrong aspect ratio looks awkward"
</my-image>
 
<current-implementation>
```tsx
// My current image code:
___PASTE_YOUR_IMAGE_CODE___
```
</current-implementation>
 
**Questions:**
1. Do I actually need art direction, or will responsive `sizes` work?
2. Is the UX improvement worth the extra complexity?
3. How do I handle this in my CMS/design workflow?
 
Help me decide:
- A) Stick with responsive (simpler, same image scales)
- B) Use art direction (complex, different crops/images)
- C) Hybrid (art direction for heroes only)
 
Include implementation code for whichever you recommend.

import { getImageProps } from "next/image";
import styles from "./theme-image.module.css";
 
export function ThemeImage() {
  const {
    props: { srcSet: light, ...lightRest },
  } = getImageProps({
    src: "/logo-light.png",
    alt: "Logo",
    width: 200,
    height: 50,
  });
 
  const {
    props: { srcSet: dark, ...darkRest },
  } = getImageProps({
    src: "/logo-dark.png",
    alt: "Logo",
    width: 200,
    height: 50,
  });
 
  return (
    <>
      <img {...lightRest} srcSet={light} className={styles.light} />
      <img {...darkRest} srcSet={dark} className={styles.dark} />
    </>
  );
}

.dark {
  display: none;
}
 
@media (prefers-color-scheme: dark) {
  .light {
    display: none;
  }
  .dark {
    display: unset;
  }
}

// deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
// imageSizes: [32, 48, 64, 96, 128, 256, 384]

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  images: {
    // Match Tailwind breakpoints: sm(640), md(768), lg(1024), xl(1280), 2xl(1536)
    deviceSizes: [640, 768, 1024, 1280, 1536, 1920],
 
    // Common thumbnail/avatar sizes in your design system
    imageSizes: [32, 48, 64, 96, 128, 192, 256],
 
    // Allowlist quality values (required in Next.js 16)
    qualities: [50, 75, 85, 100],
 
    // Modern formats
    formats: ["image/avif", "image/webp"],
  },
};
 
export default nextConfig;

// ❌ Deprecated in Next.js 16
<Image src="/hero.jpg" alt="Hero" priority />
 
// ✅ Next.js 16+
<Image src="/hero.jpg" alt="Hero" preload />