AVIF/WebP 다중 포맷 전략으로 LCP 최적화 및 이미지 용량 최대 50% 절감

Context

이커머스 플랫폼의 특성상 마켓플레이스별 요구사항 준수와 Core Web Vitals 지표 개선이라는 상충하는 제약 사항 존재. 특히 4G 환경에서 이미지 로딩으로 인한 3~8초의 지연 시간이 LCP 수치 악화 및 전환율 저하의 핵심 병목 지점으로 작용.

Technical Solution

• Browser Support 기반의 계층적 Fallback 구조 설계를 통한 최적 포맷 제공
• AVIF(최우선) -> WebP(범용) -> JPEG(레거시) 순의 <picture> 엘리먼트 기반 렌더링 경로 구현
• 시각적 손실을 최소화하는 포맷별 Quality Sweet Spot(AVIF 65-75, WebP 80-85) 설정으로 데이터 전송량 최적화
• Critical Rendering Path의 Hero Image는 즉시 로드하고 나머지 리소스는 loading="lazy" 속성으로 렌더링 우선순위 제어
• Content Hash 기반 URL과 Cache-Control: immutable 설정을 통한 Edge Location 캐싱 효율 극대화
• 원본 업로드부터 리사이징, 포맷 변환, Object Storage 저장, CDN 배포로 이어지는 자동화 파이프라인 구축

Impact

• AVIF 채택 시 JPEG 대비 파일 크기 최대 50% 감소
• WebP 적용 시 JPEG 대비 25-34% 용량 절감
• Quality 100에서 90으로 조정 시 시각적 차이 없이 파일 크기 40-60% 감소

Key Takeaway

단일 포맷 고집보다 브라우저 능력에 따른 적응형 서빙(Adaptive Serving) 전략이 성능과 호환성을 동시에 잡는 핵심 설계 원칙임.