Image Optimization for Web Performance (웹 성능을 위한 이미지 최적화)

📌 한 줄 통찰 (The Karpathy Summary)

"시각적 품질은 유지하되 파일 크기는 물리적 최소치로 압축하고, 사용자의 화면에 나타날 때만 리소스를 전송하여 초기 로딩의 거대한 장벽을 제거하라" — LCP 성능을 결정짓는 프런트엔드 리소스 관리의 핵심.

추출된 패턴: "Next-gen Formats and Adaptive Delivery" — WebP/AVIF 같은 차세대 포맷을 사용하고, 기기의 해상도(srcset) 및 뷰포트 위치(Lazy Load)에 따라 최적의 이미지를 선별적으로 전송하는 패턴.
이미지 최적화 기술:
- Modern Formats: JPEG/PNG 대비 30~50% 더 높은 압축률을 가진 WebP 및 AVIF 채택.
- Responsive Images: srcset과 sizes 속성을 활용하여 화면 크기에 맞는 이미지 서빙.
- Native Lazy Loading: loading="lazy" 속성을 통해 스크롤 시점에 이미지 다운로드.
- Aspect Ratio Boxes: 이미지 로드 전 공간을 미리 확보하여 CLS 방지.
- Image CDNs: 이미지를 동적으로 크롭하고 압축하여 전송하는 외부 서비스 활용.
의의: 웹사이트 전송 용량의 60% 이상을 차지하는 이미지를 최적화함으로써 LCP를 단축하고 모바일 데이터 사용량을 절감함.

과거 데이터와의 충돌: 과거에는 이미지를 무조건 합쳐서(Sprite) 요청 수를 줄였으나, 현대 정책은 개별 이미지의 포맷 최적화와 필요 시점 로딩 정책을 선호함.
정책 변화: Antigravity 프로젝트는 모든 신규 이미지 자산에 대해 AVIF 포맷 사용을 기본 정책으로 하며, 고해상도 원본 이미지를 직접 서빙하는 행위를 엄격히 금지함.