Image Optimization Guide

# Image Optimization Guide for Google Antigravity

Optimize images for maximum web performance using Next.js and Google Antigravity IDE.

## Next.js Image Component

```typescript
// components/OptimizedImage.tsx
import Image from "next/image";

// Basic usage with automatic optimization
export function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      priority // Load immediately for LCP
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// Responsive image with sizes
export function ResponsiveImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      fill
      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
      className="object-cover"
    />
  );
}

// Remote images with loader
const cloudinaryLoader = ({ src, width, quality }: {
  src: string;
  width: number;
  quality?: number;
}) => {
  return `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}`;
};

export function CloudinaryImage({ publicId, alt }: { publicId: string; alt: string }) {
  return (
    <Image
      loader={cloudinaryLoader}
      src={publicId}
      alt={alt}
      width={800}
      height={600}
    />
  );
}
```

## Lazy Loading Pattern

```typescript
// components/LazyImage.tsx
"use client";

import { useState, useRef, useEffect } from "react";
import Image from "next/image";

export function LazyImage({ src, alt, ...props }: ImageProps) {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: "200px" }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} className="relative">
      {isVisible ? (
        <Image src={src} alt={alt} {...props} />
      ) : (
        <div className="bg-gray-200 animate-pulse" style={{ aspectRatio: props.width / props.height }} />
      )}
    </div>
  );
}
```

## Image Gallery with Blur Placeholders

```typescript
// lib/images.ts
import { getPlaiceholder } from "plaiceholder";

export async function getImageWithPlaceholder(src: string) {
  const buffer = await fetch(src).then(res => res.arrayBuffer());
  
  const { base64, metadata } = await getPlaiceholder(Buffer.from(buffer));

  return {
    src,
    width: metadata.width,
    height: metadata.height,
    blurDataURL: base64
  };
}

// components/Gallery.tsx
export async function Gallery({ images }: { images: string[] }) {
  const imagesWithPlaceholders = await Promise.all(
    images.map(getImageWithPlaceholder)
  );

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {imagesWithPlaceholders.map((image, i) => (
        <Image
          key={i}
          src={image.src}
          alt={`Gallery image ${i + 1}`}
          width={image.width}
          height={image.height}
          placeholder="blur"
          blurDataURL={image.blurDataURL}
          className="rounded-lg"
        />
      ))}
    </div>
  );
}
```

## Best Practices

1. **Use next/image** for automatic optimization
2. **Set priority** for above-the-fold images
3. **Provide sizes** prop for responsive images
4. **Implement blur placeholders** for better UX
5. **Use WebP or AVIF** formats when possible
6. **Lazy load** images below the fold
7. **Optimize source images** before upload

Google Antigravity helps optimize images and provides intelligent sizing recommendations.