Next.js Image Lazy Loading Strategies

# Next.js Image Lazy Loading Strategies for Google Antigravity

Efficient image loading improves Core Web Vitals and user experience. This guide establishes patterns for optimizing image loading in Google Antigravity projects.

## Optimized Image Component

```typescript
import Image from "next/image";
import { useState } from "react";

export function OptimizedImage({ src, alt, width, height, priority = false }: {
  src: string;
  alt: string;
  width: number;
  height: number;
  priority?: boolean;
}) {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div className="relative overflow-hidden">
      {!isLoaded && (
        <div className="absolute inset-0 bg-gray-200 animate-pulse" />
      )}
      <Image
        src={src}
        alt={alt}
        width={width}
        height={height}
        priority={priority}
        onLoad={() => setIsLoaded(true)}
        className={`transition-opacity ${isLoaded ? "opacity-100" : "opacity-0"}`}
      />
    </div>
  );
}
```

## Responsive Image with Sizes

```typescript
export function ResponsiveImage({ src, alt }: { src: string; alt: string }) {
  return (
    <div className="relative aspect-video">
      <Image
        src={src}
        alt={alt}
        fill
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
        className="object-cover"
      />
    </div>
  );
}
```

## Lazy Gallery with Intersection Observer

```typescript
"use client";
import Image from "next/image";
import { useInView } from "react-intersection-observer";

export function LazyGalleryImage({ src, alt }: { src: string; alt: string }) {
  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "200px" });

  return (
    <div ref={ref} className="relative aspect-square">
      {inView ? (
        <Image src={src} alt={alt} fill className="object-cover" />
      ) : (
        <div className="w-full h-full bg-gray-200" />
      )}
    </div>
  );
}
```

## Blur Placeholder

```typescript
export function BlurredImage({ src, alt, blurDataURL }: {
  src: string;
  alt: string;
  blurDataURL: string;
}) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      placeholder="blur"
      blurDataURL={blurDataURL}
    />
  );
}
```

## Next.js Config for Images

```typescript
const config = {
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 1080, 1920],
    minimumCacheTTL: 60 * 60 * 24 * 30,
  },
};
```

## Best Practices

1. **Priority for LCP**: Use priority on above-fold images
2. **Sizes attribute**: Define srcset for responsive images
3. **Blur placeholders**: Show preview while loading
4. **Lazy loading**: Use intersection observer
5. **Modern formats**: Enable AVIF and WebP