Next.js Image 컴포넌트의 width, height, sizes, srcset 이해하기

Next.js Image 컴포넌트의 width, height, sizes 이해하기

Next.js의 Image 컴포넌트는 이미지 최적화를 위한 여러 속성을 제공합니다. 오늘은 width, height, sizes의 관계와 사용법에 대해 알아보겠습니다.

1. width와 height

width와 height는 이미지의 원본 비율(aspect ratio)을 설정합니다.

<Image 
  src="/example.jpg"
  width={1000}    // 원본 이미지 비율 설정
  height={600}    // 원본 이미지 비율 설정
  alt="Example"
/>

• 이미지 로딩 전 공간 확보 (레이아웃 시프트 방지)
• 실제 표시 크기는 CSS로 조절 가능
• 원본 이미지의 비율 정보 제공

2. sizes

sizes는 반응형 디자인을 위한 속성입니다.

<Image
  src="/example.jpg"
  width={1000}
  height={600}
  sizes="(max-width: 768px) 100vw, 
         (max-width: 1200px) 50vw,
         33vw"    // 화면 크기별 상대적 크기
  alt="Example"
/>

<div style={{ position: 'relative', width: '800px', height: '400px' }}>
  <Image
    src="/example.jpg"
    alt="With sizes"
    fill
    sizes="800px"  // 실제 컨테이너 크기
    // -> 800px 크기의 이미지만 로드
  />
</div>

브라우저 화면 크기에 따라:

• 모바일(768px 이하): 화면 전체 너비
• 태블릿(768px-1200px): 화면 너비의 50%
• 데스크톱(1200px 이상): 화면 너비의 33%

반응형을 하지 않더라도 srcset을 통해 최적화가 되려면 설정을 해줘야한다

3. 실제 크기 설정

실제 표시될 크기는 style이나 className으로 설정합니다.

3.1 반응형 이미지

<Image
  src="/example.jpg"
  width={1000}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{
    width: '100%',
    height: 'auto'
  }}
  alt="반응형 예시"
/>

3.2 고정 크기 이미지

<Image
  src="/example.jpg"
  width={1000}
  height={600}
  style={{
    width: '500px',
    height: '300px'
  }}
  alt="고정 크기 예시"
/>

3.3 최대 크기가 있는 반응형

<Image
  src="/example.jpg"
  width={1000}
  height={600}
  sizes="(max-width: 768px) 100vw, 500px"
  style={{
    width: '100%',
    height: 'auto',
    maxWidth: '500px'  // 최대 크기 제한
  }}
  alt="혼합 예시"
/>

4. srcset이란?

srcset은 브라우저에게 여러 크기의 이미지 소스를 제공하여, 상황에 맞는 최적의 이미지를 선택할 수 있게 하는 속성입니다.

4.1. Next.js의 자동 srcset 생성

Next.js Image 컴포넌트는 자동으로 srcset을 생성합니다:

<!-- Next.js가 자동 생성하는 srcset -->
<img 
  src="/example.jpg"
  srcset="/_next/image?url=/example.jpg&w=384 384w,
          /_next/image?url=/example.jpg&w=640 640w,
          /_next/image?url=/example.jpg&w=750 750w,
          /_next/image?url=/example.jpg&w=828 828w,
          /_next/image?url=/example.jpg&w=1080 1080w,
          /_next/image?url=/example.jpg&w=1200 1200w,
          /_next/image?url=/example.jpg&w=1920 1920w,
          /_next/image?url=/example.jpg&w=2048 2048w,
          /_next/image?url=/example.jpg&w=3840 3840w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
/>

4.2 srcset의 의미

• 384w: 이미지의 실제 너비가 384px
• 640w: 이미지의 실제 너비가 640px
• 등등..

4.3 브라우저의 선택 과정

1. 현재 화면 크기에서 sizes 값 확인
2. 필요한 이미지 크기 계산
3. srcset에서 가장 적합한 이미지 선택

4.4 장점

1. 성능 최적화
   • 필요한 크기의 이미지만 다운로드
   • 불필요한 대용량 이미지 전송 방지
2. 자동화
   • Next.js가 자동으로 이미지 최적화
   • 다양한 크기의 이미지 자동 생성
3. 사용자 경험
   • 디바이스에 최적화된 이미지 제공
   • 빠른 로딩 속도
   4.5 주의사항

• sizes 속성은 반응형에서만 필요
• 고정 크기 이미지는 style로 설정
• width/height는 원본 비율 유지용

5. 정리

• width/height: 이미지 비율 설정
• sizes: 반응형 크기 설정
  • srcset: 이미지 소스 최적화
• style/className: 실제 표시 크기 설정

이렇게 각 속성의 역할을 이해하고 적절히 조합하면, 성능과 사용자 경험을 모두 고려한 이미지 최적화가 가능합니다.

 

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

interface AvatarProps {
  username: string;
  image?: string | null;
  size?: "sm" | "md" | "lg";
  className?: string;
}

const Avatar = ({
  username,
  image,
  size = "md",
  className = "",
}: AvatarProps) => {
  const [imgError, setImgError] = useState(false);

  const sizeClasses = {
    sm: "w-6 h-6",
    md: "w-8 h-8",
    lg: "w-12 h-12",
  };

  const defaultImage = `https://ui-avatars.com/api/?name=${encodeURIComponent(
    username
  )}`;

  const handleError = () => {
    setImgError(true);
  };

  return (
    <Image
      src={imgError || !image ? defaultImage : image}
      alt={`${username}'s avatar`}
      width={24}
      height={24}
      className={`rounded-full object-cover ${sizeClasses[size]} ${className}`}
      onError={handleError}
      quality={75}
    />
  );
};

export default Avatar;

아바타 이미지 구현 예시