Image Optimization
뷰포트에 따라 성능향상을 위해 리사이징 및 레이지로딩을 구현할 필요가 있는데, Next에서는 이를 기본적으로 지원해 준다.
Next의 <Image />를 이용하여 다음과 같은 효과를 낼 수 있다.
- 향상된 성능 : 디바이스 사이즈에 맞춰 최적화된 이미지 제공
- 시각적 안전감 :
CLS(Cumulative Layout Shift)방지 - 빠른 페이지 로드 : 이미지가 뷰포트에 들어왔을 경웅[만 로드 → 초기 로드 속도 빨라짐
- 유연한 에셋 관리 : 외부에 저장되어 있는 이미지 역시 리사이징 가능
Cumulative Layout Shift(누적 레이아웃 이동, CLS)
<Image />의 사용
정적으로 끌어오는 path 사용시
import Image from 'next/image';
import picture from '../assets/picture.png';
const Component = () => {
return <Image src={picture} />
}외부 path 사용 시
Component.js
import Image from 'next/image';
const Component = () => {
return <Image src="target-url.com/picture/1" />
}next.config.js
module.exports = {
images: {
domains: [
"target-url.com",
],
},
};props of <Image />
width & height
- 이미지 요소의 크기 지정
- 단위 유닛 기본값은
px
layout
- 뷰포트의 변경 시 이미지 레이아웃 처리 방식
intrinsic(default) : 큰 화면에서는 지정된 너비와 높이를 유지하지만 작아질수록 부모 컨테이너 요소에 맞게 바뀜fixed: 지정한 너비와 높이를 화면 상관없이 계속 유지함responsive: 부모 요소가display:block일 경우 이미지가 그에 맞게 변형fill: 부모 요소의 position 값이 relative일 경우, 이미지가 부모 컨테이너 요소에 맞게 늘어남.
quality
- 이미지의 품질을 직접 지정하는 props
priority
- 우선 로드되어야 할 이미지에게 priority를 props로 부여할 시 우선적으로 로드
placeholder
- 이미지가 로드 중일 때 표시할 대체 이미지 → 사용자들에게 해당 이미지가 로드되고 있다는 것을 명확히 전달
empty(default)blur:blurDataURL과 사용. 이미지를 로드할 때 흐린 이미지에서 뚜렷해지는 효과 부여
Image Optimization
뷰포트에 따라 성능향상을 위해 리사이징 및 레이지로딩을 구현할 필요가 있는데, Next에서는 이를 기본적으로 지원해 준다.
Next의 <Image />를 이용하여 다음과 같은 효과를 낼 수 있다.
- 향상된 성능 : 디바이스 사이즈에 맞춰 최적화된 이미지 제공
- 시각적 안전감 :
CLS(Cumulative Layout Shift)방지 - 빠른 페이지 로드 : 이미지가 뷰포트에 들어왔을 경웅[만 로드 → 초기 로드 속도 빨라짐
- 유연한 에셋 관리 : 외부에 저장되어 있는 이미지 역시 리사이징 가능
<Image />의 사용
정적으로 끌어오는 path 사용시
import Image from 'next/image';
import picture from '../assets/picture.png';
const Component = () => {
return <Image src={picture} />
}외부 path 사용 시
Component.js
import Image from 'next/image';
const Component = () => {
return <Image src={picture} />
}next.config.js
module.exports = {
images: {
domains: [
"target-url.com",
],
},
};props of <Image />
width & height
- 이미지 요소의 크기 지정
- 단위 유닛 기본값은
px
layout
- 뷰포트의 변경 시 이미지 레이아웃 처리 방식
intrinsic(default) : 큰 화면에서는 지정된 너비와 높이를 유지하지만 작아질수록 부모 컨테이너 요소에 맞게 바뀜fixed: 지정한 너비와 높이를 화면 상관없이 계속 유지함responsive: 부모 요소가display:block일 경우 이미지가 그에 맞게 변형fill: 부모 요소의 position 값이 relative일 경우, 이미지가 부모 컨테이너 요소에 맞게 늘어남.
quality
- 이미지의 품질을 직접 지정하는 props (1 ~ 100)
priority
- 우선 로드되어야 할 이미지에게 priority를 props로 부여할 시 우선적으로 로드
placeholder
- 이미지가 로드 중일 때 표시할 대체 이미지 → 사용자들에게 해당 이미지가 로드되고 있다는 것을 명확히 전달
empty(default)blur:blurDataURL과 사용. 이미지를 로드할 때 흐린 이미지에서 뚜렷해지는 효과 부여
참고
next/image | Next.js
Cumulative Layout Shift(누적 레이아웃 이동, CLS)
Web Developer / Composer