[G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00
parent f0befc887a
commit 93ec7e9056
363 changed files with 68333 additions and 64 deletions
@@ -0,0 +1,143 @@
+---
+id: frontend-image-optimization
+title: Image Optimization — WebP / AVIF / srcset / lazy
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [frontend, image, performance, web, vibe-coding]
+tech_stack: { language: "TS / React / Next.js", applicable_to: ["Web"] }
+applied_in: []
+aliases: [next/image, srcset, sizes, AVIF, lazy load, LCP, blurhash]
+---
+
+# Image Optimization
+
+> 페이지 무게의 60% = 이미지. **WebP/AVIF + responsive (srcset/sizes) + lazy + LCP preload** 4종. Next.js `<Image>` / Cloudinary / imgix / @vercel/og 가 자동 처리.
+
+## 📖 핵심 개념
+- LCP (Largest Contentful Paint): 보통 hero image. 빨리 로드 = SEO + UX.
+- Format: AVIF (최신, 작음) → WebP → JPEG. PNG 는 투명 / 도형.
+- srcset: 화면 / DPR 별 이미지.
+- sizes: layout 기반 어떤 크기 선택할지 hint.
+
+## 💻 코드 패턴
+
+### Next.js `<Image>`
+```tsx
+import Image from 'next/image';
+
+<Image
+  src="/hero.jpg"
+  alt="hero"
+  width={1200}
+  height={600}
+  priority // LCP — preload
+  placeholder="blur"
+  blurDataURL="data:image/jpeg;base64,..."
+  sizes="(min-width: 1024px) 1200px, 100vw"
+/>
+```
+
+### 일반 HTML
+```html
+<picture>
+  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
+  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
+  <img src="hero-800.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
+       sizes="100vw" loading="lazy" decoding="async" width="1600" height="900" alt="hero">
+</picture>
+```
+
+### Cloudinary (URL 기반 변환)
+```ts
+const url = `https://res.cloudinary.com/x/image/upload/w_800,f_auto,q_auto/hero.jpg`;
+// f_auto: 브라우저에 맞는 포맷 자동
+// q_auto: 압축 자동
+```
+
+### Lazy load (native)
+```html
+<img loading="lazy" decoding="async" src="..." />
+<!-- LCP 는 lazy 금지! -->
+```
+
+### Blurhash placeholder
+```tsx
+import { Blurhash } from 'react-blurhash';
+
+<div className="relative">
+  {!loaded && <Blurhash hash={item.blurhash} width={400} height={300} />}
+  <img onLoad={() => setLoaded(true)} src={...} />
+</div>
+```
+
+### React Native — FastImage (cache + priority)
+```tsx
+import FastImage from 'react-native-fast-image';
+
+<FastImage
+  source={{ uri, priority: FastImage.priority.high, cache: FastImage.cacheControl.immutable }}
+  style={{ width: 200, height: 200 }}
+/>
+```
+
+### Bitmap subsample (Android)
+```kotlin
+val opts = BitmapFactory.Options().apply { inSampleSize = 2 } // 1/2 크기
+val bmp = BitmapFactory.decodeFile(path, opts)
+```
+
+### iOS — UIImage downsampling
+```swift
+func downsample(url: URL, to size: CGSize, scale: CGFloat) -> UIImage? {
+    let opts = [kCGImageSourceShouldCache: false] as CFDictionary
+    guard let src = CGImageSourceCreateWithURL(url as CFURL, opts) else { return nil }
+    let pixel = max(size.width, size.height) * scale
+    let dsOpts = [
+        kCGImageSourceCreateThumbnailFromImageAlways: true,
+        kCGImageSourceShouldCacheImmediately: true,
+        kCGImageSourceCreateThumbnailWithTransform: true,
+        kCGImageSourceThumbnailMaxPixelSize: pixel,
+    ] as CFDictionary
+    guard let cg = CGImageSourceCreateThumbnailAtIndex(src, 0, dsOpts) else { return nil }
+    return UIImage(cgImage: cg)
+}
+```
+
+### LCP preload
+```html
+<link rel="preload" as="image" href="/hero.avif" type="image/avif"
+      imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w" imagesizes="100vw">
+```
+
+## 🤔 의사결정 기준
+| 상황 | 추천 |
+|---|---|
+| Next.js | `<Image>` |
+| 정적 사이트 | `<picture>` + AVIF/WebP |
+| 동적 변환 / CDN | Cloudinary / imgix / Imgproxy |
+| LCP hero | priority + preload + placeholder |
+| 무한 스크롤 | lazy + blurhash |
+| 모바일 native | FastImage / Glide / Coil |
+| 사용자 업로드 | server 에서 resize + format |
+
+## ❌ 안티패턴
+- **JPEG only**: WebP/AVIF 가 30~50% 작음.
+- **원본 표시**: 1080p 4MB → 200kB 압축 가능.
+- **Width/height 누락**: layout shift.
+- **Lazy LCP**: 첫 paint 느려짐. priority + preload.
+- **Fixed sizes 큰 이미지**: srcset 필수.
+- **Decoding sync**: paint 블록. `decoding="async"`.
+- **이미지 안에 텍스트**: SEO 안 됨, 번역 안 됨.
+
+## 🤖 LLM 활용 힌트
+- AVIF/WebP + srcset + sizes + lazy(LCP 제외) + blur placeholder.
+- Native = FastImage / Coil / Glide + downsample.
+
+## 🔗 관련 문서
+- [[Web_Core_Web_Vitals]]
+- [[CDN_Caching_Strategies]]
+- [[Native_Memory_Profiling]]