Nextjs 이미지

img태그

표준 HTML 요소
이미지를 웹 페이지에 포함시키지만 추가 최적화 없이 사용자가 지정한 소스에서 이미지를 그대로 로드
이미지에 대한 세부 설정을 직접 처리

(src/)app/page.js
export default function Home() {
  return (
    <div>
      <img
        src="/picture.jpg"
        alt="image"
        style={{ width: "300px", height: "300px" }}
      />
    </div>
  );
}

note

img태그를 이용하여 이미지를 표현하는 코드

src: 이미지 경로를 작성하여 보여줄 이미지를 표현
alt: 이미지의 경로 및 파일이 에러날 경우, 이미지를 대신해 표현할 문구

Image Component

Next.js에서 제공하는 이미지 Component
서버 사이드에서 이미지를 최적의 크기로 조정 및 WebP로 이미지 형식을 변환하여 제공
기본적으로 지연 로딩(lazy loading)이 활성화, 뷰포트 내에서 필요할 때만 이미지를 로드

(src/)app/page.js
import Image from "next/image";

export default function Home() {
  return (
    <>
      <div>
        <Image src="/picture.jpg" alt="image" width={300} height={300} />
      </div>
    </>
  );
}

note

Next.js에서 제공하는 Image Component를 이용하여 이미지를 표현하는 코드

Image Component에서 제공하는 속성들을 이용하여 이미지를 표현하면 된다.
Next.js에서는 img태그보다 Image Component 사용을 권유한다.

Image Component 권장 이유

자동 이미지 최적화
- 서버 사이드 이미지의 크기를 조정
- WebP 자동 변환
- 네트워크 대역폭을 절약 및 로드 시간 단축
쉬운 캐싱
자동 지연 로딩(lazy loading)지원

info

Image Component 옵션

src(필수): 이미지의 소스 URL을 지정
alt(필수): 이미지의 대체 텍스트를 제공
width(필수): 이미지의 너비
height(필수): 이미지의 높이
layout: 이미지의 레이아웃을 설정
- fixed: 너비와 높이가 고정된 이미지 생성
- intrinsic: 원본 이미지 크기를 유지, 뷰포트에 따라 축소
- responsive: 컨테이너의 크기에 맞춰 동적으로 이미지 크기가 조절
- fill: 부모 요소를 완전히 채우도록 확장. objectFit, objectPosition속성을 함께 사용
priority: 페이지 로드 시 이미지의 우선 순위를 높여 빠르게 로드
placeholder: 이미지 로더 전 보여줄 placeholder의 유형을 지정
- blur: 로드되기 전에 흐린 이미지를 보여줌. blurDataURL속성이 필요
blurDataURL: placeholder의 blur효과를 내기위해 필요한 이미지의 소스 URL

Next.js Image 공식 문서

img태그​

Image Component​

img태그

Image Component