Antigravity Agent
31 lines
2.4 KiB
Markdown
31 lines
2.4 KiB
Markdown
---
|
|
id: PERF-IMG-OPT-001
|
|
category: "10_Wiki/💡 Topics/AI"
|
|
confidence_score: 1.0
|
|
tags: [image-optimization, web-performance, webp, avif, lazy-loading, responsive-images, lcp]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# Image Optimization for Web Performance (웹 성능을 위한 이미지 최적화)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "시각적 품질은 유지하되 파일 크기는 물리적 최소치로 압축하고, 사용자의 화면에 나타날 때만 리소스를 전송하여 초기 로딩의 거대한 장벽을 제거하라" — LCP 성능을 결정짓는 프런트엔드 리소스 관리의 핵심.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "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를 단축하고 모바일 데이터 사용량을 절감함.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거에는 이미지를 무조건 합쳐서(Sprite) 요청 수를 줄였으나, 현대 정책은 개별 이미지의 포맷 최적화와 필요 시점 로딩 정책을 선호함.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 신규 이미지 자산에 대해 AVIF 포맷 사용을 기본 정책으로 하며, 고해상도 원본 이미지를 직접 서빙하는 행위를 엄격히 금지함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Core-Web-Vitals-Metrics|Core-Web-Vitals-Metrics]], [[Largest-Contentful-Paint-LCP|Largest-Contentful-Paint-LCP]], [[Cumulative-Layout-Shift-CLS|Cumulative-Layout-Shift-CLS]], [[Frontend-Performance-Optimization-Guide|Frontend-Performance-Optimization-Guide]]
|
|
- **Raw Source:** 00_Raw/Image Optimization.md
|