빠른 이미지 로드를 위한 개선방법

🔍 웹과 앱에서 빠른 이미지 로드를 위한 방법 찾기

🚨 문제 상황

현재 진행 중인 프로젝트에서 이미지 로딩 속도가 너무 느림!!
특히 프로필 페이지는 썸네일 이미지가 많아서, 페이지 진입 후 약 2초가 지나야 썸네일이 모두 로드가 된다. 

• 이미지들은 서버를 통해 받아오며, 현재 png확장자  사용 중.
• 내가 보기에도 거슬리는데  사용자 경험(UX)에 너무 안좋아서 최적화가 필요할듯 싶다. 

---

📦 1. 이미지 확장자 종류와 특징

확장자압축 방식특징사용 추천

.jpg, .jpeg	손실 압축	- 사진, 배경에 적합<br/>- 용량 작고 호환성 좋음	일반 사진, 피드
.png	무손실 압축	- 투명 배경 지원<br/>- 용량 큼	UI 요소, 로고
.webp	손실/무손실 지원	- JPEG 대비 최대 34% 더 가볍고<br/>- 투명도, 애니메이션 지원	웹/앱 최적화용
.avif	손실/무손실 지원	- WebP보다 더 효율적인 압축<br/>- 최신 포맷	고화질 이미지, 최신 환경

✅ 현재 PNG를 WebP로 전환할 경우, 이미지 로딩 속도에 큰 개선 효과를 볼 수 있을 듯 싶다!

 

🔍 여기서 손실압축/ 무손실 압축이란?

1. 손실 압축

* 압축 과정에서 일부 데이터를 버림

→ 눈으로 보기엔 큰 차이 없지만, 원본 품질은 감소함

• 장점: 용량이 작아짐 (압축률 높음)
• 단점: 한 번 압축하면 원래 품질로 복원 불가

언제 쓰냐?

• 사진, 배경 이미지 등 고해상도 필요 없고, 용량이 중요한 경우

---

2. 무손실 압축

* 압축하더라도 원본 데이터를 보존

→ 품질 손실 없이 그대로 복원 가능

• 장점: 이미지 품질 100% 유지
• 단점: 용량 큼 (압축률 낮음)
• 예시 포맷: PNG, SVG, WebP (무손실), AVIF (무손실)

언제 쓰냐?

• 로고, UI 아이콘, 텍스트 포함된 이미지, 픽셀이 중요한 작업

---

💡 2. 내가 생각하는 최적화 방법

 1) 포맷 최적화

• PNG → WebP  변경
• WebP는 JPEG 대비 25~34% 가벼움 또는 Avif?

 2) 사이즈 최적화

• 썸네일/프로필 이미지는 실제 화면에 맞는 크기로 서버에서 리사이징

 3) 지연 로딩 (Lazy Loading)

• 웹: loading="lazy" 속성, 또는 IntersectionObserver 사용
• 앱: FlatList의 initialNumToRender, removeClippedSubviews 옵션
• Placeholder나 Skeleton UI로 사용자 체감 속도 향상
• => next.js는 <Image> 컴포넌트를 통해 이미지를 로드할 경우, 기본적으로 lazy loading을 지원. 뿐만 아니라 placeholder라는 옵션을 통해 네트워크에서 불러오는 동안 임시로 보여줄 이미지도 자동으로 blur 처리

next.js

 4) 캐시 & 사전 로딩

• 앱: Image.prefetch()로 이미지 미리 로딩
• 웹: CDN을 활용해 이미지 전송속도 개선 (ex: Cloudflare, Cloudinary)

---

 

📦 APP

- 이미지 최적화를 위한 EC2 + S3 + CloudFront 기반 리사이징 구조 개선

당근마켓 테크블로그에서 소개한 Lambda@Edge 기반 이미지 리사이징 & WebP 변환 전략을 참고해, 현재 사용하는 EC2 + S3 + CloudFront 조합에서도 리사이징 & WebP 최적화를 해보면 어떨까

---

✅ 리사이징이란?

- 이미지를 서버에서 필요한 크기로 줄이는 작업

• 클라이언트에 큰 원본 이미지를 그대로 보내는 대신,서버에서 미리 줄이고 가볍게 만든 이미지만 전달하는 방식

---

✅ 왜 리사이징이 필요할까?

 

⚡ 속도	원본 이미지가 클수록 불러오는 데 오래 걸림
📉 용량 감소	작은 이미지일수록 데이터 전송량이 작음
📱 앱 최적화	썸네일에 큰 이미지를 쓰면 렌더링 비용 커짐
💰 트래픽 절감	요청 크기에 맞춘 이미지만 보내서 CloudFront/S3 요금 감소

---

✅ 기존 구조

 

클라이언트 => S3에 이미지 업로드 (pre-signed URL 사용) / 앱에서 요청 =>CloudFront → S3 → PNG 이미지 응답

• 클라이언트는 S3에 직접 업로드
• 앱에서 PNG 이미지를 내려받아 사용

---

✅ 개선 구조 (리사이징 + WebP 변환)

 

클라이언트=> S3에 원본 업로드 (PNG, JPEG 등) / 앱에서 요청 =>CloudFront → EC2 서버 (리사이징 & WebP 변환) → 응답

• EC2에서 이미지 크기와 포맷을 실시간 처리 (sharp 사용)
• CloudFront에서 변환된 결과를 캐시하여 성능 유지
• WebP 포맷으로 변환해 20~30% 이상 용량 절감

---

✅ 필요 기술 스택

 

이미지 처리	EC2 + Node.js + sharp
원본 저장소	AWS S3
CDN 캐싱	AWS CloudFront
포맷 최적화	WebP 변환
앱 최적화 전략	썸네일 요청 시 사이즈 지정 + Lazy Load + 캐싱

---

✅ 개선 방법 요약

1. EC2 서버에 리사이징 서버 구축 (sharp, express)
2. 이미지 요청 시 S3에서 원본 받아 리사이징 & WebP 변환
3. CloudFront를 통해 캐시된 WebP 이미지 제공
4. 앱에서는 format=webp&size=300x300 형식으로 요청 ?