[Study-Mate] 성능 최적화 2. 이미지 최적화

이미지 성능 최적화 전략

 

1. 문제

- 크롬 개발자도구의 네트워크 탭을 통해 이미지 리소스가 전체 네트워크 요청의 상당 부분을 차지하고 있음을 확인했다. 이미지 수가 늘어날수록 초기 페이지 로딩 성능에 직접적인 영향을 줄 것으로 판단하여 이미지 최적화를 진행하기로 했다.

빨간색 밑줄 친 파란색 그래프가 이미지 로딩 네트워크이다.

 

2. 방법

 

이미지 최적화 방법에 대해 알아보았다.

 

2-1) 포맷 최적화

• JPEG/PNG → WebP/AVIF 변환
• WebP는 JPEG 대비 25~35% 용량 절감
• AVIF는 WebP보다 더 효율적이지만 브라우저 지원이 아직 제한적

2-2) 크기 최적화

• 표시 크기에 맞게 리사이즈 (2000px 원본을 400px로 표시하면 낭비)
• 반응형: 화면 크기별로 다른 크기 제공 (srcset)
• 해상도별: 레티나 디스플레이용 2x 이미지

2-3) 로딩 전략

• Lazy Loading: 뷰포트 밖 이미지 다운로드 지연
• Preload: LCP 대상 이미지 미리 로드
• fetchPriority: 브라우저 다운로드 우선순위 힌트

2-4) 압축

• 손실 압축 (품질 약간 희생, 용량 대폭 절감)
• 무손실 압축 (품질 유지, 용량 절감 적음)

2-5) 캐싱

• CDN 캐싱: 사용자와 가까운 서버에서 제공
• 브라우저 캐싱: Cache-Control 헤더로 재요청 방지

2-6) 업로드 시점 처리

• 업로드할 때 서버에서 미리 리사이즈/변환

 

위 방법이 있는데 그 중에 NextJS가 제공하는 방법들이다.

---

Next.js <Image>가 위 전략 중 어떤 걸 해결해주나

WebP/AVIF 변환	✅ 자동	브라우저 지원 감지해서 자동 변환
반응형 크기	✅ sizes 설정	srcset 자동 생성
Lazy Loading	✅ 기본값	loading="lazy" 기본 적용
Preload	✅ priority={true}	<link rel="preload"> 자동 추가
fetchPriority	✅ priority={true} 시 자동	fetchpriority="high" 자동 추가
CDN 캐싱	✅ Vercel 배포 시 자동	-
업로드 시점 처리	❌	Sharp나 Supabase Transform 별도 필요

 

결론적으로

1. 이미지 포맷 변환

2. 크기 최적화

3. 로딩 전략

전략을 사용하기로 했고

Next.js가 제공하는 <Image> 컴포넌트로 전환하여 자동 WebP 포맷 변환과 브라우저 캐싱을 적용했다.

또한 sizes 속성을 설정하여 뷰포트 크기에 맞는 이미지만 요청하도록 했고, priority와 fetchPriority를 설정하여 초기 화면에 노출되는 이미지를 우선적으로 로드했다.

나머지 이미지는 <Image> 컴포넌트의 기본값인 Lazy Loading을 통해 뷰포트 진입 시점에 로드되도록 했다.

 

 

 

3. 해결

 

sizes = 로딩할 이미지 크기 설정

priority = 초기화면에 우선적으로 로딩할 이미지(그 외에는 Lazy Loading이고 디폴트값이다)

fetchPriority = 브라우저에게 우선순위가 높은 이미지를 추론할 수 있게 힌트

 

 

4. 결과

 

 

이미지의 네트워크 요청이 확연히 줄어든 것을 확인할 수 있었다.