WebP 전환을 통한 이미지 리소스 크기 평균 32% 절감 및 Alpha 채널 보존

Context

PNG의 Lossless 특성으로 인한 대용량 파일 문제는 LCP 등 Core Web Vitals 성능 저하와 스토리지 비용 증가를 초래함. 기존 JPG 전환 방식은 Alpha 채널 소실 및 그래픽 데이터 처리 효율 저하라는 기술적 한계를 보유함.

Technical Solution

• VP8 및 WebP Lossless 기반의 Predictive Transform 알고리즘을 통한 데이터 압축 효율 극대화
• Lossy와 Lossless 모드를 단일 포맷에서 지원하는 구조를 통해 이미지 특성에 맞는 인코딩 전략 수립
• 8-bit Alpha Channel 지원으로 투명도 유지를 통한 UI/UX 정밀도 확보
• WebP 우선 제공 후 JPG를 Fallback으로 처리하는 HTML Picture Element 기반의 적응형 서빙 전략 채택
• 원본 PNG를 Lossless Master로 유지하며 타겟 환경에 따라 WebP/JPG를 동적으로 생성하는 파이프라인 구축

Impact

• 전체 이미지 대상 JPG 대비 평균 32% 용량 감소
• 스크린샷 및 그래픽 리소스에서 45% ~ 61%의 높은 압축 효율 달성
• 97% 이상의 글로벌 브라우저 지원율을 통한 범용적 적용 가능성 확보

Key Takeaway

레거시 관습에 따른 포맷 선택보다 타겟 데이터의 엔트로피와 런타임 환경의 제약 사항을 분석하여 최적의 코덱을 선택하는 데이터 중심 설계 원칙이 중요함.