이미지 최적화 가이드

# 이미지 최적화 가이드 ## 현재 상태 - **2024-klever**: 58MB (큰 GIF 포함: 5.8MB) - **2025-talk-to-figma-mcp**: 19MB (cartoon 이미지들: 3-4MB씩) ## 이미 적용된 최적화 ✅ **Lazy Loading** - gallery와 quote 컴포넌트에 `loading="lazy"` 속성 추가 - 스크롤하기 전까지 이미지를 로드하지 않아 초기 로딩 속도 개선 ## 추가 최적화 방법 ### 방법 1: 자동 스크립트 사용 (추천) 1. **필수 도구 설치** ```bash brew install imagemagick gifsicle ``` 2. **최적화 실행** ```bash # talk-to-figma-mcp 프로젝트 최적화 ./optimize_images.sh images/projects/2025-talk-to-figma-mcp # klever 프로젝트 최적화 ./optimize_images.sh images/projects/2024-klever ``` 3. **결과** - PNG: 약 60-70% 압축 (품질 유지) - JPG: 약 50-60% 압축 - GIF: gifsicle로 최적화 - 자동으로 백업 폴더 생성 ### 방법 2: 온라인 도구 (코드 없이) #### 큰 이미지 우선 최적화 다음 파일들을 우선 압축하세요: **2025-talk-to-figma-mcp:** - `cartoon1.png` (2.9MB) → 목표: ~500KB - `cartoon2.png` (3.2MB) → 목표: ~500KB - `cartoon3.png` (3.8MB) → 목표: ~500KB - `cartoon4.png` (3.4MB) → 목표: ~500KB **2024-klever:** - `5_demo_vid_1.gif` (5.8MB) → 목표: ~1-2MB - `6_infcon_2.png` (2.4MB) → 목표: ~400KB - `6_infcon_3.png` (2.4MB) → 목표: ~400KB - `6_infcon_1.png` (1.4MB) → 목표: ~300KB #### 추천 온라인 도구 1. **TinyPNG** (https://tinypng.com) - PNG/JPG 압축 - 무료: 최대 20개 파일, 각 5MB까지 - 품질 손실 거의 없음 2. **Squoosh** (https://squoosh.app) - Google 제공 - WebP 변환 가능 - 실시간 압축 결과 비교 3. **ezgif** (https://ezgif.com/optimize) - GIF 전용 최적화 - 프레임 간격, 색상 수 조절 가능 ### 방법 3: WebP 변환 (최고 압축률) WebP 포맷은 PNG/JPG보다 30-80% 작습니다. ```bash # WebP 변환 스크립트 for file in images/projects/2025-talk-to-figma-mcp/*.png; do cwebp -q 85 "$file" -o "${file%.png}.webp" done ``` **주의:** WebP 사용 시 HTML에서 `