Antigravity Agent
4.4 KiB
4.4 KiB
id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases
| id | title | category | status | source_trust_level | verification_status | created_at | updated_at | tags | tech_stack | applied_in | aliases | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| frontend-image-optimization | Image Optimization — WebP / AVIF / srcset / lazy | Coding | draft | B | conceptual | 2026-05-09 | 2026-05-09 |
|
|
|
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>
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
<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 기반 변환)
const url = `https://res.cloudinary.com/x/image/upload/w_800,f_auto,q_auto/hero.jpg`;
// f_auto: 브라우저에 맞는 포맷 자동
// q_auto: 압축 자동
Lazy load (native)
<img loading="lazy" decoding="async" src="..." />
<!-- LCP 는 lazy 금지! -->
Blurhash placeholder
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)
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)
val opts = BitmapFactory.Options().apply { inSampleSize = 2 } // 1/2 크기
val bmp = BitmapFactory.decodeFile(path, opts)
iOS — UIImage downsampling
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
<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.