Next.js - Image Optimization

sanha_OvO·2022년 6월 28일
0

React

목록 보기
13/13

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)

profile
Web Developer / Composer

0개의 댓글