Image Optimization Strategies

# Image Optimization Strategies for Google Antigravity

Image optimization is crucial for web performance and SEO. Google Antigravity's Gemini 3 helps you implement best practices for the Next.js Image component, responsive images, and lazy loading strategies.

## Next.js Image Component Basics

Use the optimized Image component for automatic optimization:

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

interface OptimizedImageProps {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  priority?: boolean;
  className?: string;
}

export function OptimizedImage({
  src,
  alt,
  width,
  height,
  priority = false,
  className,
}: OptimizedImageProps) {
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      priority={priority}
      className={className}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
      quality={85}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    />
  );
}
```

## Responsive Hero Images

Implement responsive hero images with art direction:

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

interface HeroImageProps {
  mobileSrc: string;
  desktopSrc: string;
  alt: string;
}

export function HeroImage({ mobileSrc, desktopSrc, alt }: HeroImageProps) {
  return (
    <div className="relative w-full h-[50vh] md:h-[70vh]">
      <Image
        src={mobileSrc}
        alt={alt}
        fill
        priority
        className="object-cover md:hidden"
        sizes="100vw"
      />
      <Image
        src={desktopSrc}
        alt={alt}
        fill
        priority
        className="hidden md:block object-cover"
        sizes="100vw"
      />
    </div>
  );
}
```

## Image Gallery with Lazy Loading

Create a performant image gallery:

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

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

interface GalleryImage {
  id: string;
  src: string;
  alt: string;
  width: number;
  height: number;
}

interface ImageGalleryProps {
  images: GalleryImage[];
}

export function ImageGallery({ images }: ImageGalleryProps) {
  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);

  return (
    <>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {images.map((image, index) => (
          <button
            key={image.id}
            onClick={() => setSelectedImage(image)}
            className="relative aspect-square overflow-hidden rounded-lg hover:opacity-90 transition-opacity"
          >
            <Image
              src={image.src}
              alt={image.alt}
              fill
              className="object-cover"
              sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
              priority={index < 4}
              loading={index < 4 ? "eager" : "lazy"}
            />
          </button>
        ))}
      </div>

      {selectedImage && (
        <div
          className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
          onClick={() => setSelectedImage(null)}
        >
          <div className="relative max-w-4xl max-h-[90vh] w-full h-full">
            <Image
              src={selectedImage.src}
              alt={selectedImage.alt}
              fill
              className="object-contain"
              sizes="100vw"
              priority
            />
          </div>
          <button
            className="absolute top-4 right-4 text-white text-2xl"
            onClick={() => setSelectedImage(null)}
          >
            Close
          </button>
        </div>
      )}
    </>
  );
}
```

## Custom Image Loader

Configure custom loaders for CDN optimization:

```typescript
// lib/image-loader.ts
import { ImageLoaderProps } from "next/image";

export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
  const params = [
    "f_auto",
    "c_limit",
    `w_${width}`,
    `q_${quality || "auto"}`,
  ];
  return `https://res.cloudinary.com/your-cloud/image/upload/${params.join(",")}/${src}`;
}

export function imgixLoader({ src, width, quality }: ImageLoaderProps) {
  const url = new URL(`https://your-domain.imgix.net${src}`);
  url.searchParams.set("auto", "format");
  url.searchParams.set("fit", "max");
  url.searchParams.set("w", width.toString());
  if (quality) {
    url.searchParams.set("q", quality.toString());
  }
  return url.href;
}
```

```typescript
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./lib/image-loader.ts",
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    formats: ["image/avif", "image/webp"],
  },
};

export default nextConfig;
```

## Background Images with CSS

Handle background images efficiently:

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

interface BackgroundSectionProps {
  imageSrc: string;
  children: React.ReactNode;
}

export function BackgroundSection({ imageSrc, children }: BackgroundSectionProps) {
  return (
    <section className="relative min-h-[400px] flex items-center justify-center">
      <Image
        src={imageSrc}
        alt=""
        fill
        className="object-cover -z-10"
        sizes="100vw"
        quality={75}
      />
      <div className="absolute inset-0 bg-black/50 -z-10" />
      <div className="relative z-10 text-white p-8">
        {children}
      </div>
    </section>
  );
}
```

## Image SEO Optimization

Implement proper image SEO:

```typescript
// components/SEOImage.tsx
import Image from "next/image";
import Head from "next/head";

interface SEOImageProps {
  src: string;
  alt: string;
  width: number;
  height: number;
  caption?: string;
}

export function SEOImage({ src, alt, width, height, caption }: SEOImageProps) {
  const fullUrl = `https://yourdomain.com${src}`;

  return (
    <>
      <Head>
        <meta property="og:image" content={fullUrl} />
        <meta property="og:image:width" content={String(width)} />
        <meta property="og:image:height" content={String(height)} />
        <meta property="og:image:alt" content={alt} />
      </Head>
      <figure className="my-8">
        <Image
          src={src}
          alt={alt}
          width={width}
          height={height}
          className="rounded-lg"
        />
        {caption && (
          <figcaption className="text-center text-sm text-gray-500 mt-2">
            {caption}
          </figcaption>
        )}
      </figure>
    </>
  );
}
```

## Best Practices

1. **Use priority for LCP images** - Mark above-fold images as priority
2. **Specify sizes attribute** - Help browser select optimal image size
3. **Use blur placeholders** - Improve perceived loading performance
4. **Implement responsive images** - Serve appropriate sizes for devices
5. **Optimize format and quality** - Use WebP/AVIF with 75-85 quality

Image optimization with Google Antigravity ensures fast loading times while maintaining visual quality across all devices.