이미지 최적화 완벽 가이드: 고화질 갤러리부터 SEO까지

import sharp from 'sharp';
import { glob } from 'glob';
import path from 'path';

async function optimizeImages() {
  const images = await glob('public/images/**/*.{jpg,jpeg,png}');

  for (const imagePath of images) {
    const parsed = path.parse(imagePath);
    const outputDir = parsed.dir;

    // WebP 변환 (품질 85, 파일 크기 균형)
    await sharp(imagePath)
      .webp({ quality: 85, effort: 6 })
      .toFile(`${outputDir}/${parsed.name}.webp`);

    // AVIF 변환 (고품질 이미지용)
    if (parsed.dir.includes('portfolio') || parsed.dir.includes('gallery')) {
      await sharp(imagePath)
        .avif({ quality: 75, effort: 6 })
        .toFile(`${outputDir}/${parsed.name}.avif`);
    }

    console.log(`Optimized: ${parsed.name}`);
  }
}

optimizeImages();

import Image from 'next/image';

export function ResponsiveGallery({ images }: { images: string[] }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {images.map((src, i) => (
        <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-lg">
          <Image
            src={src}
            alt={`Gallery image ${i + 1}`}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            className="object-cover hover:scale-105 transition-transform duration-300"
            loading={i < 3 ? 'eager' : 'lazy'}
            quality={90}
          />
        </div>
      ))}
    </div>
  );
}

<Image
  src="/hero-bg.jpg"
  alt="Hero background"
  fill
  priority
  quality={95}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
  className="object-cover"
/>

'use client';
import { useEffect, useRef, useState } from 'react';

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

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '50px' } // 뷰포트 50px 전부터 로드
    );

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

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

  return (
    <div ref={imgRef} className="relative aspect-video bg-gray-200">
      {isVisible && (
        <img src={src} alt={alt} className="w-full h-full object-cover" />
      )}
    </div>
  );
}

import { Blurhash } from 'react-blurhash';
import Image from 'next/image';
import { useState } from 'react';

export function BlurHashImage({
  src,
  blurhash,
  alt
}: {
  src: string;
  blurhash: string;
  alt: string;
}) {
  const [loaded, setLoaded] = useState(false);

  return (
    <div className="relative aspect-square">
      {!loaded && (
        <Blurhash
          hash={blurhash}
          width="100%"
          height="100%"
          resolutionX={32}
          resolutionY={32}
          punch={1}
        />
      )}
      <Image
        src={src}
        alt={alt}
        fill
        className={`object-cover transition-opacity duration-300 ${
          loaded ? 'opacity-100' : 'opacity-0'
        }`}
        onLoad={() => setLoaded(true)}
      />
    </div>
  );
}

'use client';
import { useState } from 'react';
import Image from 'next/image';

export function BeforeAfterSlider({
  before,
  after,
  alt
}: {
  before: string;
  after: string;
  alt: string;
}) {
  const [sliderPosition, setSliderPosition] = useState(50);

  const handleMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
    setSliderPosition((x / rect.width) * 100);
  };

  return (
    <div
      className="relative aspect-[4/3] cursor-ew-resize select-none overflow-hidden rounded-lg"
      onMouseMove={handleMove}
      onTouchMove={(e) => {
        const touch = e.touches[0];
        const rect = e.currentTarget.getBoundingClientRect();
        const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
        setSliderPosition((x / rect.width) * 100);
      }}
    >
      {/* After 이미지 (배경) */}
      <Image src={after} alt={`${alt} - After`} fill className="object-cover" quality={95} />

      {/* Before 이미지 (클립) */}
      <div
        className="absolute inset-0 overflow-hidden"
        style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
      >
        <Image src={before} alt={`${alt} - Before`} fill className="object-cover" quality={95} />
      </div>

      {/* 슬라이더 핸들 */}
      <div
        className="absolute top-0 bottom-0 w-1 bg-white shadow-lg"
        style={{ left: `${sliderPosition}%` }}
      >
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center">
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
          </svg>
        </div>
      </div>

      {/* Before/After 라벨 */}
      <div className="absolute top-4 left-4 bg-black/70 text-white px-3 py-1 rounded-full text-sm">
        Before
      </div>
      <div className="absolute top-4 right-4 bg-black/70 text-white px-3 py-1 rounded-full text-sm">
        After
      </div>
    </div>
  );
}

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 365, // 1년
  },
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, stale-while-revalidate=86400',
          },
        ],
      },
    ];
  },
};

<img src="/img001.jpg" alt="image">

<img src="/nose-surgery-before-after-gangnam-clinic.jpg"
     alt="강남 성형외과 코성형 전후 비교 사진">

export function ImageJsonLd({
  url,
  caption,
  width,
  height
}: {
  url: string;
  caption: string;
  width: number;
  height: number;
}) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'ImageObject',
          url,
          caption,
          width,
          height,
          encodingFormat: 'image/webp',
        }),
      }}
    />
  );
}

// app/layout.tsx or page.tsx
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: '/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'POEMA 디지털 에이전시 - 웹 개발, 이커머스, 마케팅',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/og-image.jpg'],
  },
};

// app/layout.tsx
'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    if (metric.name === 'LCP' && metric.rating === 'poor') {
      console.warn('LCP needs improvement:', metric.value);
      // 분석 도구로 전송 (GA4, Vercel Analytics 등)
    }
  });

  return null;
}