docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,141 @@
|
||||
---
|
||||
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.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[Native_Memory_Profiling]]
|
||||
Reference in New Issue
Block a user