Next.js <img> vs <Image> — PageSpeed 관점에서의 선택 기준

<!-- Next.js Image가 생성하는 HTML -->
<img
  alt="Hero Image"
  loading="lazy"
  width="900"
  height="1118"
  decoding="async"
  data-nimg="1"
  style="color:transparent"
  sizes="100vw"
  srcset="
    /_next/image?url=%2Fhero.webp&w=640&q=75 640w,
    /_next/image?url=%2Fhero.webp&w=750&q=75 750w,
    /_next/image?url=%2Fhero.webp&w=828&q=75 828w,
    /_next/image?url=%2Fhero.webp&w=1080&q=75 1080w,
    /_next/image?url=%2Fhero.webp&w=1200&q=75 1200w,
    /_next/image?url=%2Fhero.webp&w=1920&q=75 1920w,
    /_next/image?url=%2Fhero.webp&w=2048&q=75 2048w,
    /_next/image?url=%2Fhero.webp&w=3840&q=75 3840w
  "
  src="/_next/image?url=%2Fhero.webp&w=3840&q=75"
/>

// 빌드 시 sharp로 미리 변환
// sharp input.png -resize 900 --avif quality=40 -o hero.avif

<!-- HTML — 깔끔하고 가벼움 -->
<img
  src="/images/hero.avif"
  alt="Hero Image"
  width={900}
  height={1118}
  fetchPriority="high"
  className="object-cover w-full h-full"
/>

// ✅ 사용자 업로드 이미지 — Image가 적합
import Image from "next/image";

<Image
  src={user.profileImage}  // 어떤 크기인지 모름
  alt={user.name}
  width={128}
  height={128}
  className="rounded-full object-cover"
/>

// ✅ CMS 이미지 — Image가 적합
<Image
  src={post.thumbnailUrl}  // 외부 URL
  alt={post.title}
  width={800}
  height={450}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

// ✅ Hero 이미지 — img + AVIF가 적합
<img
  src="/images/hero.avif"
  alt="서비스 소개"
  width={900}
  height={1118}
  fetchPriority="high"
  className="object-cover w-full h-full"
/>

// ✅ 서비스 카드 이미지 — img + WebP + lazy
<img
  src="/images/service-ai.webp"
  alt="AI 서비스"
  width={1920}
  height={1434}
  loading="lazy"
  className="object-cover w-full h-full"
/>