NEXT.JS의 이미지 최적화

웹사이트의 성능을 향상하기 위한 고려사항 중 가장 중요하게 여겨지는 NEXT.js에서의 이미지 최적화에 대해서 다루어 보고자 합니다.

NEXT.JS의 이미지 최적화

nextjs에서는 기본적으로 'next/image' 를 제공하고 있습니다.

 

네 가지 특성을 살펴보겠습니다.

• 향상된 성능 (Improved Performance) : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공
  - 스마트폰으로 보면 그에 맞는 이미지를 보여주고, 태블릿 또는 피씨에서 보면 그 디바이스에 맞는 사이즈의 이미지를 보여줍니다. 
  
  
• 시각적 안정감 (Visual Stability) : CLS(Cumulative Layout Shift - 누적 레이아웃 이동)을 방지
  - 페이지를 최초 오픈시나 살펴볼 때 레이아웃이 이상하게 움직이는 것을 방지해 줍니다. 페이지를 스크롤할 때 갑자기 레이아웃이 위아래로 흔들리거나 이동하는 것을 막고 요소들이 안정적으로 보여줄 수 있게 합니다.
  
  
• 빠른 페이지 로드 (Faster Page Loads) : 이미지가 뷰포트에 들어왔을 경우에만 로드(초기 로드 빠름)
  - 페이지를 불러올 때 화면에 보이는 부분에 있는 이미지만 먼저 로드되고, 다른 부분은 사용자가 스크롤해서 볼 때 로드가 됩니다. 그래서 초기에 필요한 부분이 더 빠르게 로드가 됩니다.
  
  
• 유연한 에셋관리 (Asser Flexibility) : 외부에 저장되어 있는 이미지도 리사이징 가능
  - 외부에 저장되어 있는 이미지를 필요한 사이즈로 변경할 수 있습니다. 예를 들면 큰 이미지를 작게 만들거나 작은 이미지를 크게 확대해서 사용할 수 있습니다. 그래서 크기에 따라 필요한 사이즈로 유연하게 조정하여 사용할 수 있습니다.

 

다음은 이미지를 구성하는 속성에 대한 설명입니다.

 

속성 (Prop)	예 (Example)	타입 (Type)	상태 (Status)
src	src = "/image.png"	String	필수
width	width = {500}	Integer	필수
height	height = {400}	Integer	필수
alt	alt = "alt text"	String	필수
loader	loader = {imageLoader}	Function	-
fill	fill = {true}	Boolean	-
sizes	sizes = "(max-width: 600px) 100vw, 33vw"	String	-
quality	quality = {80}	Integer (1-100)	-
priority	priority = {true}	Boolean	-
placeholder	placeholder = "blur"	String	-
style	style = {{objectFit : "contain"}}	Object	-
onLoadingComplete	onLoadingComplete = {img=>done()}	Function	Deprecated
onLoad	onLoad = {event = > done()}	Function	-
onError	onError = {event => fail()}	Function	-
loading	loading = "lazy"	String	-
blurDataURL	blurDataURL = "data:image/jpeg..."	String	-

이미지 최적화에 영향을 주는 요소들을 체크해 보겠습니다.

 

• quality : 최적화된 이미지 품질로, 숫자 1 ~ 100 사이의 정수를 부여합니다. 기본값은 75이며 100은 최고 품질이므로 파일 크기가 가장 큽니다.
  
  
• priority : true 인경우 이미지가 높은 우선순위로 간주되어 사전 로드됩니다. 우선순위를 사용하는 이미지의 경우 자동으로 레이지 로딩이 비활성화됩니다. 이미지가 화면의 가장 윗부분에 노출될 때 사용권장되며 이 설정은 기본적으로 false입니다.
  
  
• placeholder : 이미지가 로딩되는 동안 사용할 수 있는 플레이스홀더 기능입니다. 가능한 값은 blur, empty 또는 data:image/...이고 기본값은 empty입니다. blur로 설정하면 blurDataURL 속성이 대체되어 사용됩니다. data:image/...로 설정하면 이미지가 로딩되는 동안 Data URL이 플레이스 홀더 이미지로 사용됩니다. empty로 설정하면 이미지가 로딩되는 동안 플레이스홀더가 없고 빈 공간만 있습니다.
  
  
• blurDataURL : src 이미지가 성공적으로 로드되기 전에 플레이스홀더 이미지로 사용될 Data URL입니다. placeholder="blur"와 함께 사용될 때만 작동합니다. 사이즈가 큰 이미지를 플레이스 홀더로 사용하면 성능에 악영향을 줄 수 있기에 주의해야 합니다.
  
  
• loading : 사용값에는 lazy와 eager가 있습니다. 일반적으로 eager를 사용하면 성능에 악영향을 줄 수 있습니다. lazy로 설정하면 이미지를 뷰포트에서 계산된 거리에 도달할 때까지 로딩을 지연합니다. eager로 설정하면 이미지를 즉시 로드합니다.
  
  
• unoptimized : true인 경우 next/image 자동 최적화 기능이 적용되지 않고 있는 그대로 제공됩니다.
  
  
• fill : 이 속성은 이미지를 부모 요소에 맞추도록 하는 불리언 값입니다. 이미지의 너비와 높이가 알려지지 않았을 때 사용하면 유용합니다. 부모요소는 postion 속성 중 relative fixed 또는 absolute 스타일을 할당해야 합니다. 기본적으로 이미지 요소는 absolute 스타일이 적용됩니다. 또한 이미지에스타일이 적용되지 않은 경우 이미지는 컨테이너에 맞추어 늘어납니다.   

 

다음장에서 이어서 다루어 보겠습니다.

 

reference

 

Components: <Image> | Next.js (nextjs.org)

Components: <Image> | Next.js

https://nextjs.org/docs/app/building-your-application/optimizing/images

Optimizing: Images | Next.js