AVIF 도입과 CDN Edge Transform을 통한 이미지 페이로드 60% 절감

Context

웹 페이지 전체 가중치의 50-70%를 차지하는 이미지 리소스의 비효율적 전송 구조 분석. 브라우저별 포맷 지원 격차와 뷰포트별 최적 크기 제공 부재로 인한 LCP 성능 저하 문제 해결 필요.

Technical Solution

• AVIF를 기본 포맷으로 채택하고 WebP를 Fallback으로 구성하여 전송 효율 극대화
• sharp 라이브러리를 이용한 Build-time 이미지 리사이징 및 포맷별 다중 생성 파이프라인 구축
• picture 태그와 srcset 속성을 활용하여 브라우저 뷰포트에 최적화된 이미지 자동 선택 구조 설계
• Cloudflare Image Resizing 도입을 통한 Edge 단의 실시간 이미지 변환 및 캐싱 아키텍처로 전환
• fetchPriority와 IntersectionObserver를 조합한 지능형 Lazy Loading 전략 적용
• CDN 파라미터를 통한 On-the-fly 리사이징으로 빌드 프로세스 의존성 제거 및 워크플로우 단순화