[Next.js] next/image 정리

img

• 페이지가 로드될 때 다운로드
• loading="lazy" 로 lazy loading 적용가능
• 원본 이미지 확장자 그대로 다운로드

next/image

import Image from "next/image";

<Image src="경로" width="너비" height="높이" [fill] />

• 이미지를 .webp 확장자로 다운 받아 용량을 최적화
• quality 속성으로 용량 최적화값 조절가능(기본값 75)
• next/image 는 너비와 높이를 기반으로 빌드타임에 이미지를 생성하고 최적화함
• 스트링경로(내부링크, 외부링크 둘다)는 width, height 속성이 정해져야함
• static하게 import해서 경로를 가져오는경우 width, height를 자동으로 계산하기 때문에 따로 속성을 안넣어도 적용됨(원본 크기로 가져옴)
• placeholder="blur" -> 이미지가 다운로드 되는동안 blur 이미지가 자동으로 적용됨(빌드타임에 이미지를 미리 생성해놓고 로드하는 원리이기 때문에 배포환경에서만 확인가능)
• lazy loading 기본 적용
• next/image 를 적용할 때 이미지의 너비 높이를 모르는 경우 -> fill 속성 추가
  • fill : 이미지의 사이즈가 부모에 의해 결정됨
    • 부모 스타일에 postion:absolute or relative or fixed, width height 속성 지정 + 자식next/image 에 fill 속성 추가 -> 부모 사이즈에 맞춰 동적으로 이미지 조절
    • 이미지가 납작해 보이는 경우 -> style={{ objectFit: 'cover' }}
• v13에서는 레이아웃 속성을 따로 지정하지 않으면 정적으로 사이즈를 유지함
• v13에서는 레이아웃 속성이 fill만 존재함

next/legacy/image (v12 까지의 next/image)

import LegacyImage from "next/legacy/image";


<LegacyImage src="경로" width="너비" height="높이" layout="레이아웃" objectFit="속성" />

• 전반적인 특성은 v13과 동일(lazy loading, 너비높이 지정 등)
• layout 속성이 존재함(layout="fill" 등)
  - intrinsic : 지정된 이미지 사이즈로 렌더링 하되 화면이 이미지보다 작아졌을 때 화면에 맞춰 리사이징 함, layout shift(레아웃이 예기치않게 변화하는 현상)이 없음
  - fixed : 화면이 리사이징 되어도 이미지 크기가 고정됨
  - responsive : intrinsic의 특징 + 화면이 커질때도 리사이징 됨
  • fill : 이미지의 사이즈가 부모에 의해 결정됨
  • 스타일이 아닌 objectFit="cover" 속성으로 적용가능(v12)