Young Log

Next.js의 next/image가 내부적으로 어떤 최적화를 해주는지 분석.

차세대 이미지 포맷 사용(WebP, AVIF)

가장 효과가 큰 방법인데, 우리가 흔히 쓰는 JPG나 PNG 대신 WebP나 AVIF 형식을 사용하면, 화질은 거의 똑같은데 용량은 30%~50% 이상 줄어든다.
이게 왜 줄어드는 것인지?
- WebP: 구글이 만든 포맷으로 대부분의 브라우저에서 지원한다.
  GIF, PNG, JPEG 세가지 포멧 모두 WEBP로 대체 가능
  PNG, JPEG에 비해 용량은 작지만 보다 선명하고 고품질의 이미지로 저장
- AVIF: WebP보다 압축률은 더 좋지만, 아주 오래된 브라우저에서는 안 보일 수 있다.
적절한 이미지 사이즈 제공(Responsive Images)

사용자 화면은 작은 스마트폰인데 4K 해상도의 거대한 원본 이미지를 줄 지는 건 낭비겠죠?
화면 너비에 맞춰서 다른 크기의 이미지를 내려주기!

<picture> 태그나 srcset 속성을 사용
레이지 로딩(Lazy Loading)

사용자가 화면을 아래로 내리기 전까지는 화면에 보이지 않는 이미지를 불러오지 않는 기술이다.
태그에 loading="lazy" 속성 하나만 추가하면 끝!
첫 페이지 로딩 속도가 획기적으로 빨라진다. (당장 필요한 것만 먼저 받으니!)
이미지 스프라이트 (Image Sprite)

작은 아이콘이 수십 개라면, 하나하나 요청하는 것보다는 여러 아이콘을 큰 사진 한 장으로 합쳐서 가져오는 게 통신 횟수를 줄여준다!
한 장의 이미지를 가져온 뒤 background-position으로 필요한 부분만 잘라서 보여준다. (요즘은 SVG 아이콘을 많이 써서 예전보다는 덜 쓰이지만, 여전히 유용한 기술이다)

리액트 프로젝트(Vite)라면?

Vite 환경에서는 이런 최적화를 자동으로 도와주는 플러그인들이 있다.

vite-plugin-imagemin: 빌드할 때 알아서 이미지 용량을 꽉 짜준다.
unplugin-icons: 아이콘들을 개별 파일이 아닌 코드로 처리해서 요청 횟수를 줄여준다.

🚀 `next/image`가 대신 해주는 일들

1. 자동 포맷 변환 (Image Optimization)

가영님이 아무리 용량 큰 PNG나 JPG를 올려도, Next.js 서버가 브라우저 사양을 확인해서 자동으로 **WebP**나 AVIF****로 변환해서 보내준다. 우리가 일일이 확장자를 바꿀 필요가 없어요!

2. 사이즈 최적화 (Resizing)

사용자의 기기(모바일, 태블릿, 데스크탑)에 맞춰서 가장 적절한 크기로 이미지를 즉석에서 리사이징해서 내려준다. 4K 사진을 올려도 모바일 사용자에게는 작은 사이즈로 알아서 줄여서 보내주는 거죠.

3. 레이지 로딩 기본 탑재 (Visual Stability)

별도의 설정 없이도 모든 이미지가 기본적으로 레이지 로딩(Lazy Loading)이 적용된다.
또한, 이미지가 로드되기 전에 영역을 미리 확보해서 화면이 덜컥거리는 '레이아웃 시프트(CLS)' 현상을 완벽하게 막아줌.

4. 플레이스홀더 지원 (Blur-up)

인터넷이 느릴 때 이미지가 툭 나타나는 게 아니라, 처음에 흐릿한(Blur) 이미지를 보여주다가 선명해지는 고급 효과를 placeholder="blur" 속성 하나로 구현할 수 있다.