Next/image 컴포넌트의 내부 동작 원리를 알아보자!

동작원리

Next/image 컴포넌트는 최초 이미지 요청이 왔을 때, 이미지를 최적화한 후 캐싱합니다. 다시 말해 런타임 때 처음 요청이 들어오면 최적화된 이미지를 만들고 캐싱해두었다가 재사용합니다. 이미지 최적화 전후로 .next(dist)폴더의 변화 과정을 확인해 보았습니다.

 

예시

이미지 최적화 전/후

.next 폴더의 이미지 최적화 전후 비교 사진입니다. cache폴더 아래 images 폴더의 유무를 주목해야합니다. 왼쪽은 이미지 요청이 한번도 발생하지 않아, images폴더도 없고 최적화된 이미지도 없는 상태입니다. 오른쪽은 이미지 요청이 1회이상 발생해서 Next.JS가 이미지를 캐싱해둔 상태입니다. 이후 요청부터는 Next.JS는 images 폴더에 캐싱해둔 이미지를 재사용합니다. 

 

로컬에서도 확인하는 방법은 아래와 같습니다. (dev 모드)

1. 이미 .next/cache/images폴더가 존재하면 images 폴더를 지운다.

2. Next/images 컴포넌트를 사용하는 페이지에 접속한다.

3. images폴더 하위에 이미지들이 다시 생성된 것을 확인한다.

 

 

알아둘 점

• 모든 파일 타입의 이미지를 최적화하지 않습니다

next.js 코드를 보면 svg나 webp, png, gif 타입의 애니메이션 이미지들은 최적화하지 않습니다.

next.js v13.4.9

• sizes 속성 사용할 때는 리사이징된 이미지를 최적화하고 캐싱합니다. 

Next.JS에서 sizes 속성 사용할 때 srcSet에는 아래와 같이 여러가지 버전의 이미지들이 지정됩니다. 

그 이유는 imagesSizes, deviceSizes는 아래와 같이 16개의 사이즈가 default값으로 설정되어 있습니다. 이를 바탕으로 next/image 컴포넌트에서 적절하게 srcSet 속성에 여러 사이즈의 이미지를 지정합니다. 요청이 들어오면 이미지 사이즈를 동적으로 리사이징하고 최적화합니다. 각 이미지 사이즈별로 최적화된 이미지들이 생성되고 캐싱됩니다.

// next.config.js
module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

 

 

참고

https://www.youtube.com/watch?v=Ino03JPppU4