Otimização de Imagens com Next.js

// app/components/optimized-image.tsx
import Image from "next/image";
 
// Imagem local (importação estática habilita o placeholder de blur automático)
import heroPhoto from "@/public/images/hero.jpg";
 
export function HeroImage() {
  return (
    <Image
      src={heroPhoto}
      alt="Uma paisagem de montanha cênica"
      placeholder="blur"
      priority
      className="rounded-lg"
    />
  );
}

// Imagem remota com dimensões explícitas
export function RemoteImage() {
  return (
    <Image
      src="https://images.unsplash.com/photo-example"
      alt="Foto do Unsplash"
      width={800}
      height={600}
      className="rounded-lg"
    />
  );
}

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
      },
    ],
  },
};
 
export default nextConfig;

// app/components/image-gallery.tsx
import Image from "next/image";
 
interface GalleryImage {
  src: string;
  alt: string;
  blurDataURL: string;
  width: number;
  height: number;
}
 
const images: GalleryImage[] = [
  {
    src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb",
    alt: "Lago na montanha ao amanhecer",
    blurDataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA...",
    width: 1200,
    height: 800,
  },
  {
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e",
    alt: "Caminho na floresta no outono",
    blurDataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA...",
    width: 1200,
    height: 800,
  },
  {
    src: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d",
    alt: "Cordilheira nebulosa",
    blurDataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA...",
    width: 1200,
    height: 800,
  },
];
 
export function ImageGallery() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {images.map((image, index) => (
        <div key={image.src} className="relative aspect-[3/2] overflow-hidden rounded-xl">
          <Image
            src={image.src}
            alt={image.alt}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            placeholder="blur"
            blurDataURL={image.blurDataURL}
            priority={index === 0}
            className="object-cover transition-transform duration-300 hover:scale-105"
          />
        </div>
      ))}
    </div>
  );
}

// app/gallery/page.tsx
import { ImageGallery } from "@/app/components/image-gallery";
 
export default function GalleryPage() {
  return (
    <main className="mx-auto max-w-6xl px-4 py-8">
      <h1 className="mb-6 text-3xl font-bold">Galeria de Fotos</h1>
      <ImageGallery />
    </main>
  );
}

<div className="relative aspect-video w-full">
  <Image
    src="/images/banner.jpg"
    alt="Banner"
    fill
    sizes="100vw"
    className="object-cover"
  />
</div>

// Herói em tela cheia
<Image src={src} alt={alt} fill sizes="100vw" />
 
// Grade de duas colunas
<Image src={src} alt={alt} fill sizes="(max-width: 768px) 100vw, 50vw" />
 
// Três colunas com barra lateral
<Image src={src} alt={alt} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" />

import Image from "next/image";
 
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() {
  return (
    <Image
      loader={cloudinaryLoader}
      src="sample.jpg"
      alt="Imagem do Cloudinary"
      width={800}
      height={600}
    />
  );
}

import type { ImageProps, StaticImageData } from "next/image";
 
interface HeroProps {
  image: StaticImageData;
  alt: string;
  priority?: boolean;
}