1. 개요

모든 웹 용량에서 이미지가 가장 많은 용량을 차지하는 이미지를 최적화

2. 방법

이미지 컴포넌트 활용

문제점

1. 이미지는 webP나 AVIF 등 경량화된 포맷을 활용하는 것이 아니라 jpeg나 png를 사용한다.
2. 필요한 이미지부터 보여주고 추가적으로 랜더링하는 것이 아닌 당장 필요없는 이미지까지 가져온다.
3. 필요한 이미지 사이즈보다 더 큰 사이즈로 가져온다.

사용법

img 태그 대신 Image 컴포넌트 사용

1. Image 컴포넌트를 import 한다.

import Image from "next/image";

2. 이미지 컴포넌트 내 경로, 크기 그리고 alt 값을 지정해준다.

<Image src={coverImgUrl} width={80} height={105} alt={title}/>

3. 이미지가 저장된 이미지가 아니라 외부 서버에서 가져온 이미지면 보안때문에 자동으로 차단되어 오류가 난다.

이때 Next.config에 어떤 서버에서 가져온 이미지는 안전하다고 알려줘야한다.

images : {
    domains: [
      '도메인 주소'
    ]
  }

images안에 domain을 넣고 허용할 주소를 입력해준다.

더 많은 방식