Next.js에서 이미지 최적화
최근에 Next.js를 배우다 보니 HTML 기본 이미지 태그인 <img>를 사용하지 않고 Next.js만의 방식이 있다는 걸 알게 되었다.
Next/image이 그 주인공인데
사용하는 방법은 간단하게
// Next.js 공식문서 참고 예시
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return <Image src={profilePic} alt="Picture of the author" />
}
이렇게 작성할 수 있다.
Next/image가 제공하는 기능을 알아보자면
- 장치의 크기에 맞춘 적절한 이미지 사이즈와 최신 이미지 포맷 지원
- Web Vitals의 CLS 발생을 방지
- 레이지 로드를 기본적으로 사용하고 있기 때문에, 뷰포트에 노출됐을 때 이미지 로드. 선택적으로 블러링 처리한 이미지를 먼저 노출하는 기능
- 이미지 리사이징. 외부 이미지도 리사이징 가능
이렇게 다양하고 유용한 기능이 담겨있는데
이미지 최적화를 중점으로 보기 위해 HTML 기본 이미지 태그인 <img>와 Next/image 컴포넌트의 동작을 비교보면 크롬 브라우저에서 네트워크 쓰로틀링을 3G 환경으로 제약을 걸어서 테스트했을 때의 결과는 상당히 차이가 난다.
일반 <img> 태그를 사용하면 이미지를 내려받는데 1.9MB, 11.5초가 걸렸다. 반면에 Next/image 컴포넌트를 사용하면 이미지를 내려받는데 16.9KB, 862ms 밖에 안 걸렸다.
이렇게 차이가 나는 이유는 이미지 최적화에 대해선 Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공하고 있다.
사용자의 디바이스에 맞는 이미지 사이즈를 만들고, 용량이 작은 webp 포맷으로 변환하는 작업은 이미지에 대한 최초 요청 시에 Next.js 서버에서 진행되게 되기에 시간이 조금 더 오래 걸린다.
하지만 첫 번째 요청이 끝난 후에 다시 동일한 이미지를 요청하는 경우에는 이미 최적화되어 있는 이미지를 재사용하기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있게 된다.