Django 기반 고해상도 이미지 서빙 최적화를 통한 AVIF 80% 용량 절감 및 CLS 제거

Context

기존 ImageField 기반의 단순 서빙은 고해상도 파일의 무분별한 전송으로 인한 네트워크 병목 현상을 초래함. On-demand 방식의 썸네일 생성 라이브러리는 첫 요청 시 발생하는 Latency와 수동 srcset 관리의 비효율성이라는 구조적 한계를 가짐.

Technical Solution

• Model 레벨의 선언적 설계를 통한 이미지 Variant 생성 및 Migration 시스템 기반의 버전 관리 체계 구축
• Async Processing Hook을 활용한 업로드 시점의 사전 생성으로 Runtime Latency를 제거한 정적 파일 서빙 구조 설계
• AVIF 포맷 채택을 통한 JPEG 대비 60-80% 수준의 파일 크기 감소 및 저장 공간 최적화
• Pixel Density(1x, 2x, 3x)별 최적화된 해상도 자동 매핑으로 디바이스별 최적 이미지 전달 체계 구현
• Model 내 image_width 및 image_height 필드 명시를 통한 브라우저 렌더링 시 Cumulative Layout Shift(CLS) 원천 차단
• select_related 및 prefetch_related 적용을 통한 피드 쿼리 시 N+1 Database Hit 문제 해결