Next/Image

프로젝트를 하면서 next 프레임워크에서 next/image를 img 태그 대신 사용했는데 그 이유가 무엇인지 알아보도록 하자

주요 이유와 이점

• next/image는 단순한 img 태그를 대체하는 것이 아니라 이미지 로딩과 관련된 다양한 최적화 기능을 제공하여 웹 애플리케이션의 성능과 사용자 경험을 향상시킨다.

• 자동 레이지 로딩

  • next/image는 기본적으로 모든 이미지를 레이지 로딩한다.
  • 이미지가 화면에 나타날 때만 로드되도록 하여 초기 페이지 로드 시간을 줄이고 사용자가 필요한 이미지만 로드하도록 한다.

• 이미지 최적화

  • Next.js는 이미지 파일을 최적화하여 더 작은 파일 크기로 압축하고 다양한 해상도와 형식으로 이미지를 변환한다. (크롬 브라우저의 경우 이미지를 webp 포맷으로 변경하여 전달해준다.)
    -> 네트워크 대역폭 절약, 로딩 시간 단축

• 반응형 이미지

  • srcset과 sizes 속성을 사용하여 다양한 크기의 이미지를 제공함으로써 각 디바이스와 화면 크기에 적합한 이미지를 로드한다.

  ex)

  module.exports = {
      images: {
          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
      },
  }
  
  src="/example.jpg"
  alt="Example image"
  width={800}
  height={600}
  sizes="(max-width: 640px) 200px, (max-width: 750px) 80px, 20px"
  
  뷰포트 너비가 640px 이하인 경우: 브라우저는 sizes 속성의 (max-width: 640px) 200px 조건을 만족하는 이미지를 선택합니다. 이 경우, 이미지의 너비는 200px이 됩니다.
  뷰포트 너비가 641px에서 750px 사이인 경우: 브라우저는 sizes 속성의 (max-width: 750px) 80px 조건을 만족하는 이미지를 선택합니다. 이 경우, 이미지의 너비는 80px이 됩니다.
  뷰포트 너비가 750px을 초과하는 경우: 브라우저는 sizes 속성의 기본 조건인 20px을 적용합니다. 이 경우, 이미지의 너비는 20px이 됩니다.

• Placeholders and Blurring

  • 이미지가 로드되기 전 해당 영역의 너비가 0이었다가 로드된 이후 이미지가 너비를 차지하게 되어 레이아웃이 흔들리는 CLS(Cumulative Layout Shift) 현상이 발생하지 않도록 placeholder를 제공
  • 이미지가 로드되는 동안 저해상도 버전을 먼저 보여주는 블러 플레이스홀더 기능을 지원
    -> 사용자 경험 개선

속성

• src

  • 이미지를 가져올 URL 또는 경로를 지정

• alt

  • 이미지의 대체 텍스트를 지정 (접근성 향상을 위해 중요한 속성)

• width, height

  • 이미지의 고유 너비와 높이를 지정

• layout

  • 이미지의 레이아웃 방식을 지정
    • intrinsic: 기본값. 이미지가 본래 크기에 맞게 렌더링되며 부모 컨테이너의 너비를 초과히지 않는다.
    • fixed: 이미지가 고정된 크기로 렌더링
    • fill: 이미지가 부모 컨테이너에 맞게 꽉 차게 렌더링 (objectFit과 objectPosition 속성 사용 가능 / 상위요소에 position: relative가 적용되어야 함)
    • responsive: 부모 요소의 display 속성값이 반드시 block이어야 함. 부모 요소의 가로 너비 100%를 차지하도록 이미지가 렌더링됨 (항상 이미지의 비율이 일정하게 유지)

• objectFit과 objectPosition

  • layout="fill"일 때 사용됨. CSS의 object-fit 및 object-position과 동일한 역할
  • objectFit: 이미지의 크기 조정 방법을 지정(fill, contain, cover, none, scale-down)
  • objectPosition: 이미지의 위치를 지정함

• sizes

  • 뷰포트 크기에 따라 이미지의 예상 크기를 지정. srcset 속성과 함께 사용되어 브라우저가 최적의 이미지를 선택할 수 있도록 함

• priority

  • 페이지 로드 시 높은 우선순위로 로드할 이미지를 지정 (중요한 이미지를 빨리 로드해야 할 때 사용)

• quality

  • 이미지의 품질을 1에서 100 사이의 숫자로 지정 (기본값은 75)

• loader

  • 사용자 정의 로더를 사용하여 이미지를 로드하는 방법을 지정

• placeholder

  • 이미지가 로드되는 동안 사용될 placeholder 설정. empty와 blur 값 가능. 기본값은 empty
    • empty: 이미지가 로드되기 전 이미지가 렌더링 될 영역을 빈 공간으로 설정
    • blur: blurDataURL 어트리뷰트 값으로 작성한 이미지가 로드되기 전에 이미지 영역에 표시됨 (로컬 이미지인 경우 placeholder 값을 blur로만 해주면 빌드시 생성된 blur 이미지가 자동적으로 로드되기 전 이미지 영역에 표시됨