이미지 최적화 — lazy loading부터 next-image까지

function ImageGallery({ images }) {
  return (
    <div className="gallery">
      {images.map((img) => (
        <img
          key={img.id}
          src={img.url}
          alt={img.description}
          loading="lazy"         // 네이티브 lazy loading
          width={img.width}      // CLS 방지를 위해 크기 명시
          height={img.height}
        />
      ))}
    </div>
  );
}

// 첫 화면 이미지는 lazy가 아닌 eager
<img src={heroImage} alt="히어로 이미지" loading="eager" fetchPriority="high" />

// 아래쪽 이미지는 lazy
<img src={galleryImage} alt="갤러리" loading="lazy" />

function useLazyImage(src) {
  const [loadedSrc, setLoadedSrc] = useState(null);
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setLoadedSrc(src);
          observer.disconnect();
        }
      },
      { rootMargin: '200px' } // 뷰포트 200px 전에 미리 로드
    );

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

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

  return { imgRef, loadedSrc };
}

function LazyImage({ src, alt, placeholder, ...props }) {
  const { imgRef, loadedSrc } = useLazyImage(src);

  return (
    <div ref={imgRef}>
      {loadedSrc ? (
        <img src={loadedSrc} alt={alt} {...props} />
      ) : (
        <div className="placeholder">{placeholder || <Skeleton />}</div>
      )}
    </div>
  );
}

function BlurImage({ src, blurSrc, alt, width, height }) {
  const [loaded, setLoaded] = useState(false);

  return (
    <div style={{ position: 'relative', width, height }}>
      {/* 작은 블러 이미지 (인라인 또는 매우 작은 크기) */}
      <img
        src={blurSrc}
        alt=""
        style={{
          filter: 'blur(20px)',
          transform: 'scale(1.1)',
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: loaded ? 0 : 1,
          transition: 'opacity 0.3s',
        }}
      />
      {/* 실제 이미지 */}
      <img
        src={src}
        alt={alt}
        loading="lazy"
        onLoad={() => setLoaded(true)}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: loaded ? 1 : 0,
          transition: 'opacity 0.3s',
        }}
      />
    </div>
  );
}

function ResponsiveImage({ alt }) {
  return (
    <img
      srcSet="
        /images/hero-480w.webp 480w,
        /images/hero-768w.webp 768w,
        /images/hero-1200w.webp 1200w,
        /images/hero-1920w.webp 1920w
      "
      sizes="
        (max-width: 480px) 100vw,
        (max-width: 768px) 100vw,
        (max-width: 1200px) 80vw,
        60vw
      "
      src="/images/hero-1200w.webp"  // 폴백
      alt={alt}
      loading="lazy"
    />
  );
}

function OptimizedImage({ src, alt, width, height }) {
  const baseName = src.replace(/\.[^.]+$/, '');

  return (
    <picture>
      {/* AVIF — 가장 작지만 지원 범위 좁음 */}
      <source srcSet={`${baseName}.avif`} type="image/avif" />
      {/* WebP — 좋은 압축률, 넓은 지원 */}
      <source srcSet={`${baseName}.webp`} type="image/webp" />
      {/* JPEG — 폴백 */}
      <img src={`${baseName}.jpg`} alt={alt} width={width} height={height} loading="lazy" />
    </picture>
  );
}

// 방법 1: width/height 명시
<img src={src} alt={alt} width={800} height={600} />

// 방법 2: aspect-ratio CSS
function AspectImage({ src, alt, aspectRatio = '16/9' }) {
  return (
    <div style={{ aspectRatio, overflow: 'hidden' }}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
      />
    </div>
  );
}

// 방법 3: padding-top 해킹 (레거시)
function PaddingImage({ src, alt }) {
  return (
    <div style={{ position: 'relative', paddingTop: '56.25%' /* 16:9 */ }}>
      <img
        src={src}
        alt={alt}
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
      />
    </div>
  );
}

import Image from 'next/image';

function HeroSection() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="히어로 이미지"
      width={1200}
      height={600}
      priority                    // LCP 이미지는 priority 설정
      placeholder="blur"          // 블러 플레이스홀더
      blurDataURL={blurDataUrl}   // 작은 블러 이미지 데이터
    />
  );
}

function GalleryItem({ photo }) {
  return (
    <Image
      src={photo.url}
      alt={photo.description}
      width={400}
      height={300}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      // lazy loading은 기본 활성화
    />
  );
}