Antigravity Agent
144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
---
|
|
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]]
|