Image

Next.js 자동 최적화를 지원하는 반응형 이미지 컴포넌트

개요

Sample Image

설치

사용법

Image 컴포넌트를 import하여 사용합니다.

예제

기본 사용

기본적인 이미지 렌더링 예제입니다.

Basic Image

Object Fit

fit prop으로 이미지가 컨테이너에 맞춰지는 방식을 제어합니다.

Cover

Cover

Contain

Contain

Fill

Fill

AspectRatio와 함께 사용

AspectRatio 컴포넌트와 조합하여 일관된 비율을 유지합니다.

16:9 Image

Fallback 처리

이미지 로드 실패 시 대체 이미지나 컴포넌트를 표시합니다.

Fallback Image

With Fallback

Fallback Component

With Fallback Component

반응형 이미지 (srcSet)

srcSet과 sizes를 사용하여 다양한 화면 크기에 적합한 이미지를 제공합니다.

Responsive Image

Loading 전략

lazy 또는 eager 로딩 전략을 선택할 수 있습니다.

Lazy (기본값)

Lazy Loading

Eager (즉시 로드)

Eager Loading

이미지 최적화 스크립트

일반 React 환경이나 정적 사이트에서 반응형 이미지를 위해 여러 크기의 이미지를 생성해야 할 때, 제공되는 스크립트를 사용하여 이미지를 자동으로 리사이징하고 WebP 포맷으로 변환할 수 있습니다.

1. 사전 준비

이미지 처리를 위해 sharp 라이브러리가 필요합니다.

2. 스크립트 실행

다음 명령어로 특정 디렉토리의 이미지를 최적화할 수 있습니다.

스크립트는 다음 작업을 수행합니다:

  • 이미지를 640px, 768px, 1024px, 1280px 너비로 리사이징
  • WebP 포맷으로 변환 (품질 80%)
  • 원본 파일명 유지 (예: image-640.webp)

접근성

WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.

  • 대체 텍스트 (필수): 모든 이미지에 의미 있는 alt 속성을 제공해야 합니다. 장식적 이미지는 alt="" 사용
  • 로딩 전략: LCP(Largest Contentful Paint) 이미지는 priority 또는 loading="eager" 사용하여 성능 최적화
  • 반응형 이미지: srcSet과 sizes를 사용하여 다양한 화면 크기에 적합한 이미지 제공
  • 에러 처리: fallbackSrc나 fallback으로 이미지 로드 실패 시 대체 콘텐츠 제공
  • 비동기 디코딩: 일반 img 태그는 자동으로 decoding="async"가 적용되어 렌더링 차단 방지