[Next.js] 이미지 next/image 적용해보기

Project/foliohub

[Next.js] 이미지 next/image 적용해보기

솔B 2024. 4. 12. 01:36

오늘은 Next.js에서 이미지를 사용하는 방법에 대해서 알아보겠다.

이 글은 Next.js 14를 기준으로 작성되었다.

이미지 최적화 전략

이미지를 최적화하기 위한 전략에는 아래와 같이 다양한 방법이 있다.

png, jpeg 형식보다는 webp, avif 형식의 이미지 파일 사용하기
이미지 Lazy Loading 처리하기
디바이스 크기에 알맞은 이미지 크기로 리사이징
이미지 캐싱하기

이러한 작업을 Next.js에서 해주고 있는데 어떻게 적용할 수 있는지 알아보겠다!

1. webp로 변환

next/image는 png, jpeg 등 형식을 webp로 변환해 이미지 용량을 줄여준다.

webp보다 2019년에 만들어진 avif가 여러 형식(jpeg, webp) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한다.(webp보다 인코딩하는데 20%는 더 오래 걸리지만 20% 더 작게 압축된다고 한다) 하지만 avif는 지원하지 않는 브라우저가 있을 수 있다.

얼마나 효과가 있는지 하나씩 적용을 해봤는데 webp와 avif가 확실히 기존 형식에 비해 size가 줄어든 것을 확인할 수 있었다. 나의 경우 avif는 큰 효과를 모르겠어서 webp로 사용했다.

일반 img 태그 사용 시

next/image 적용해 webp 사용 시

avif 사용 시

2. 이미지 Lazy Loading 처리

Lazy Loading이란 웹 페이지 성능을 향상시키기 위한 기술 중 하나로, 페이지가 로드될 때 이미지를 한 번에 다운로드하는 대신 페이지가 스크롤될 때 필요한 이미지만 로드하는 방식을 의미한다.

과거에는 Intersection observer 또는 scroll 이벤트를 활용하여 이미지를 동적으로 로드했다. 최근에는 img 태그에 loading 속성을 사용해 Lazy Loading을 적용할 수 있다고 한다.

이런 기능도 Next.js에서 지원해주고 있다. 기본적으로 next/image를 사용하면 Lazy loading이 적용되고 이를 끄고 싶다면 priorty 속성을 true로 설정해 주면 된다. 또는 loading="eager"로 설정할 경우에도 이미지를 즉시 로딩하지만 성능을 저하시킬 수 있다고 한다.

나의 경우 우선순위가 높은 이미지(페이지를 로드했을 때 화면에 바로 보이는 이미지)는 priority를 true로 적용해 줬고 스크롤되면서 필요한 이미지들은 기본값으로 두었다.

priority

기본값은 false이고, priority를 true로 설정하면 높은 우선순위로 간주되어 preload된다. LCP(Largest Contentful Paint, 웹 페이지가 로드되는 동안 사용자에게 가장 먼저 보이는 콘텐츠 요소로 웹 페이지 성능 및 사용자 경험을 평가하는데 중요한 지표 중 하나) 요소는 priority를 true로 적용하는 것이 좋다.

3. 디바이스 크기에 알맞는 이미지로 리사이징

모바일 화면에서 pc에서 사용되는 큰 이미지를 사용하는 것은 낭비이다. 따라서 각 화면에 알맞은 이미지 크기를 보여주는 것이 성능을 최적화하는데 도움이 된다.

Image 태그에서 width와 height를 명시할 경우 그에 맞게 생성된다. fill을 사용할 경우 아래처럼 자동으로 srcset이 지정되어 디바이스 별 이미지 사이즈를 설정해 준다.

(좀 과하게...? 디바이스별 이미지 사이즈를 만들어주는 게 아닌가 하는 생각이 들어 이 부분에 대해서는 좀 더 찾아봐야 할 거 같다..! next.config.js에서 설정해 주는 값도 무엇을 기준으로 deviceSizes와 imageSizes를 설정해줘야 하는지 등도 의문이다 )

이걸 next.config.js에서 원하는 값으로 설정할 수 있는데

만약 원하는 디바이스 중단점과 그에 따른 이미지 넓이가 있다면 next.config.js 파일에 아래처럼 작성해 주면 된다. 이런 값을 별도 설정하지 않는다면 아래의 기본값이 사용된다.

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